/mern-jiffy

Giphy clone made with MERN stack

Primary LanguageJavaScript

JIFFY

GIPHY clone made with Mern Stack and GIPHY SDK/API.

Jiffy Home paget

Libraries and frameworks I used;

React, Styled-Components, Context-Hooks (deserves to be mentioned), Node, Express, MongoDB, Multer, Adorable Avatars, Jest, Bcrypt, and JWT.

API can be found here

Adorable avatars and Multer

Every user gets a unique avatar after registering for the app. Library here After registering, user can upload a new avatar/image. That image will be resized and converted to webp. There's a 2MB limit for images.

Bcrypt, JWT

When a user registers, passwords get hashed before being saved to the database, and for each login, there's a new token assigned, for secure sessions.

Scripts

App is created with CRA so scripts are same (react-scripts);

  • npm run start; starts the app,
  • npm run build; build,
  • npm run test or npm t; running tests,
  • npm run eject; ejects.

Environment Variables

  • REACT_APP_GIPHY_SDK_KEY: Key to utilize Giphy SDK (docs),
  • REACT_APP_API_URL; URL to use API. Recently changed because of updates in Heroku service and migrating to fly.io.

Profile Update

Jiffy Profile update

Categories

Jiffy Categories

Search Results

Jiffy Search Results

Gif Detail Page

Jiffy gif detail page

Login Register page

Jiffy login register