A simple full-stack shopping cart application built using React (Frontend), Node/Express (Backend), and MongoDB for storing user data and cart items. This application demonstrates basic e-commerce functionality like adding/removing products from the cart, viewing the cart, and generating invoices in PDF format.

Screen	Screenshot
Signup Page
Login Page
Home Page
Product Page
Cart Page
Invoice Page

• Product Grid: Display a list of products with "Add to Cart" functionality.
• Cart View: Show items, quantities, and prices in the cart.
• Checkout: Submit cart items to get a mock receipt.
• Invoice Generation: Generate a PDF invoice after successful checkout.
• User Authentication: Login/Signup using JWT tokens.

• RESTful API: Manage products, cart items, and user authentication.
• Cart Management: Add/remove items, get cart data.
• Checkout and Receipt: Mock checkout process with a generated receipt.
• PDF Invoice Generation: Generate downloadable invoices using jsPDF.

• Frontend: React, Vite, TailwindCSS
• Backend: Node.js, Express, MongoDB, JWT Authentication
• Other: jsPDF (for invoice generation), React Context API (for global state)

Ensure that the following are installed:

• Node.js (v16+)
• npm or yarn
• MongoDB (Local or MongoDB Atlas)

git clone https://github.com/Gyanthakur/mock-ecom-cart.git
cd mock-ecom-cart

cd backend

    npm install

MONGO_URI=mongodb://localhost:27017/mock-ecom-cart
JWT_SECRET=your-secret-key
PORT=5000

npm start

Your backend will now run at http://localhost:5000.

cd ../frontend

    npm install

VITE_BACKEND_URL=http://localhost:5000

npm run dev

Your frontend will be accessible at http://localhost:5173.

📂 Project Structure

mock-ecom-cart/
├── backend/
│   ├── controllers/          # API route handlers
│   ├── models/               # Mongoose models
│   ├── routes/               # API routes
│   ├── .env                 # Environment variables
│   ├── app.js               # Express app setup
│   └── server.js            # Server entry point
├── frontend/
│   ├── src/
│   │   ├── components/      # React components
│   │   ├── context/         # Context API for global state
│   │   ├── pages/           # React pages
│   │   ├── App.jsx          # Main app component
│   │   ├── main.jsx         # Entry point for React app
│   │   ├── utils/           # Helper functions (e.g., API requests)
│   │   ├── AppContext.jsx   # Context API provider
│   ├── .env                 # Environment variables (e.g., backend URL)
│   ├── index.html           # Main HTML file
│   └── package.json         # Frontend dependencies and scripts
└── README.md                # readme file

• JWT Authentication: JWT tokens are used to manage sessions. After login, a token is saved to localStorage for persistent user sessions.

• MongoDB: MongoDB stores product data, cart items, and user information.

• Invoice Generation: After checkout, a downloadable PDF invoice is created using jsPDF.