JIFFY is a GIPHY clone made with Mern Stack and GIPHY SDK/API.

Project has; React (Context, Hooks), Express, Node, MongoDB, Multer, Styled-Components, LazyLoad, Jest, and Adorable Avatars.

I challenged myself to make a GIPHY clone (with appealing animations and card styles) and I believe I was successful at it.

This is my second MERN stack app, and my most comprehensive project so far (as you go through my other projects, you might see similar sentences because I try to level up with each project). I also made the RestAPI for the project too and you can find it here.

For the logo and favorite icon, I made them myself in AdobeXD, with 8bit looks. Then animated them as well, differently.

When user registers, API gives each user a unique avatar based on their email account. So if the user decides to delete the account and re-register, the avatar would be the same. After registering/logging in, the user can change the avatar. The user's new avatar is resized and converted to webP and png by the API (png for browsers/OSs that don't support webP). I used multer for that.

Still here? Good! Bear with me for a bit longer 😁

Search also has a little bit of logic behind as well. There's no trick in searching for something that already exists in Giphy API. But if the user searches for something too long (doesn't exist in API) or short (can be a typo as well), I show them similar results still. Every time user types, I show suggestions of similar words (Giphy API suggestion endpoint).

So overall, in the app;

• Users can log in/register, update, and delete their accounts.
• When logged in, users can add GIFs as their favorite and change their avatars, upload a new picture
• In either case; search for GIFs and see their details, navigate through categories, and see their subcategories as well.

If you have read this far and came to this page, I think JIFFY deserves like.