That was a hobby project for someone trying to learn Redux Toolkit and MERN stack deeply. I learned a lot things while doing it and had a lot of fun (LOL, actually I hate it cause of bugs). This project includes basic functionalities like storage data with Local Storage, auth with JWT, add-to-cart/favorite with Redux-Toolkit, data-fetching with RTK Query.
Hosted with Vercel
Demo 🚀
| Package (Frontend) | Version |
|---|---|
| axios | ^0.21.4 |
| framer-motion | ^6.3.16 |
| jwt-decode | ^3.1.12 |
| moment | ^2.29.1 |
| react | ^17.0.2 |
| react-hot-toast | ^2.2.0 |
| react-lottie | ^1.2.3 |
| react-modal | ^3.15.1 |
| react-redux | ^7.2.2 |
| @reduxjs-toolkit | ^4.0.5 |
| redux-logger | ^3.0.6 |
| sass | ^1.53.0 |
| swiper | ^8.0.0 |
| Package (Backend) | Version |
|---|---|
| bcrypt | ^5.0.1 |
| cors | ^2.8.5 |
| dotenv | ^16.0.1 |
| express | ^4.18.1 |
| joi | ^17.6.0 |
| jsonwebtoken | ^8.5.1 |
| mongoose | ^6.4.4 |
| nodemon | ^2.0.18 |
- Clone this project via GitHub or Git, then go to folder location (frontend or backend, whichever you want)
cd client ## for frontend
#or
cd server ## for backend- Install deps with Yarn:
yarn- In the project directory, run the development server:
yarn start ## for frontend
nodemon ## for backendThis project uses MongoDB Cloud as database service and JSON Web Tokens for auth.
Create .env file inside server/ and enter the necessary variables (JWT secret key and MongoDB Cloud URI)
DB_URI = mongodb+srv://<yourUsername:<yourPassword>@cluster0.u5blo2m.mongodb.net/<databaseName>?retryWrites=true&w=majority
JWT_KEY = YOUR_KEY_OR_SOMETHING
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent