The GIF above was generted by Giffy

Giffy

A GIF sharing platform built by WebAssembly, React and Node

Key Features • How To Use • How To Use • Application Structure • License

Key Features

• ⚡ Blazign fast Video to GIF conversion using FFMPEG Wasm right on the browser

• 🔥 React and Redux for the SPA App and Node, Express and MongoDB for the API

• ☁️ GIFs stored in Cloudinary

• ✂️ Crop the GIF timeline, right in the browser!

• 🌟 Like, Comment on GIF shared by others

• 🔠 Multilingual with EN and BN support

• 🎨 Ant Design and Custom Styled Component used

• 👌 Persisted user auth

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. Recommended to use Yarn for the project. If you want to run the app locally, you have to have MongoDB locally. Download and install.

Frontend (React)

From your command line:

# Clone this repository
$ git clone repo-link

# Go into the repository
$ cd giffy-web

# Install dependencies
$ yarn install or npm i

# Run the app for development scope
$ yarn start || start-prod

# Build the app
$ yarn build || start-prod

Backend (Node)

From your command line:

# Clone this repository
$ git clone repo-link

# Go into the repository
$ cd giffy-api

# Install dependencies
$ npm i

# Run the app 
$ npm start || npm run start-dev

Application structure

The directory layout of this boilerplate

.
├── giffy-web                 # Frontend/Client directory
└── giffy-api                 # Backend/API directory

Credits

This React SPA uses the following open source packages:

• React
• Ant Design
• Styled Components
• React Redux
• Redux Saga
• @reduxjs/toolkit
• redux-logger
• redux-persist
• React Intl
• React Router
• @ant-design/icons
• Axios
• Craco
• @testing-library/react
• polished
• eslint
• prettier
• husky
• And more..

This Node API uses the following open source packages:

• React
• Ant Design
• MongoDB
• Mongoose
• Bcrypt
• Dotenv
• jsonwebtoken
• eslint
• prettier
• husky
• And more..

License

MIT