Chic o Pick E-commerce App

Project Overview

This is a full-stack e-commerce application built with the MERN stack. It includes features like product management, shopping cart, user authentication, and admin dashboard.

‍

Tech Stack:

Frontend:

• React
• Tailwind CSS / Sass / Chakra UI
• Axios

Backend:

• Node.js
• Express.js
• MongoDB (Mongoose)
• Cloudinary (for image upload)
• JWT (Authentication)
• Multer (file handling)

Github Repositories and Demo:

Frontend:

        Demo: https://react-ecommerce-app-pied.vercel.app/

      Credentials: (Example)
                username: maryam1@test.com
               password: 1234567890

        Github: https://github.com/maryamfad/React-Ecommerce-App

Backend:

         Demo: https://chicopick-051e2cf42204.herokuapp.com/

         Github: https://github.com/maryamfad/Express_Ecommerce_App

Admin Panel:

         Demo: https://react-ecommerce-admin-panel-app.vercel.app/

         Credentials:
                username: admin@chicopick.com
               password: chicopick1234

         Github: https://github.com/maryamfad/React-Ecommerce-Admin-Panel-App

Features

• User authentication (login/register)
• Product listing and filtering
• Shopping cart with quantity and size selection
• Admin panel (add/edit/delete products)
• Image upload with Cloudinary
• Responsive design

API Endpoints:

Auth:

• POST /api/auth/register
• POST /api/auth/login

Products:

• GET /api/product/list
• POST /api/product/add
• DELETE /api/product/:id

Cart:

• POST /api/cart/add
• POST /api/cart/get

Authentication Flow:

• JWT token is generated on login and stored in local storage or headers.
• Token is sent in the  token header for protected routes.
• Middleware (authUser) verifies token and attaches userId to request.

Screenshots:

Screenshots for Admin Panel