MERN E-COMMERCE FRONTEND

Also Check Out : MERN E-COMMERCE BACKEND

▶️ Demo Video

demo-video.mp4

💳 Product Checkout

product-checkout.mp4

---

FRONTEND

• React.Js: For building the user interface.
• Redux: For state management.
• Firebase: For user authentication and authorization.

---

BACKEND

• Node.js and Express.js: For building the RESTful API.
• MongoDB Atlas: As the database for storing user and product data.

---

TOOLS and PLATFORMS

• GitHub: For version control and collaboration.
• Render: For deployment of the backend.
• Vercel: For deployment of the frontend.
• Postman: For API testing.

Products

Cart

Orders

Admin Dashboard

Admin Products Details

Users

Transactions

Dynamic Bar Charts

Dynamic Pie Charts

Dynamic Line Charts

Install Dependencies

For Dev - npm i && npm run dev For Product - npm i && npm run preview

Env Variables

Make Sure to Create a .env file in root directory and add appropriate variables in order to use the app.

Essential Variables

VITE_FIREBASE_KEY= from firebase

VITE_AUTH_DOMAIN= from firebase

VITE_PROJECT_ID=from firebase

VITE_STORAGE_BUCKET=from firebase

VITE_MESSAGING_SENDER_ID=from firebase

VITE_APP_ID=from firebase

VITE_SERVER=Your Backend Server URl

VITE_STRIPE_KEY=Stripe Publishable Key

fill each filed with your info respectively

Contact

If you have any feedback, feel free to reach out:

• LinkedIn : https://www.linkedin.com/in/yashk9293/
• GitHub : https://github.com/yashk9293
• Instagram : https://www.instagram.com/yashk9293

💖Like my work?

This project needs a ⭐️ from you. Don't forget to leave a star ⭐️.