EasifyMart

A full-stack e-commerce web application built with React and Express, featuring Stripe payment integration and JWT authentication.

Features

• Browse products by category (Formal Shoes, Slippers, and more)
• Product detail pages with size variation selector and image gallery
• Shopping cart with localStorage persistence, quantity controls, and variation tracking
• Multi-step checkout wizard (Shipping → Method → Review)
• Stripe Checkout integration with redirect flow, supporting INR currency
• JWT authentication with secure login and signup (bcrypt password hashing)
• User dashboard with order history, wishlist, and address book
• Responsive single-page application with client-side routing

Tech Stack

Layer	Technologies
Frontend	React 18, Vite 5, React Router 6, Axios, Stripe.js, FontAwesome, CSS (per-component)
Backend	Node.js, Express 4.18, MongoDB Atlas (Mongoose 8), JWT (jsonwebtoken), bcrypt, Stripe SDK, express-async-errors

Architecture

The frontend is a React SPA that communicates with an Express REST API over HTTP. The API exposes eight route groups: /auth, /products, /categories, /orders, /orderitems, /users, /stripe, and /transactions, each backed by Mongoose models against a MongoDB Atlas cluster.

Authentication flows through JWT middleware that protects user-specific routes. Tokens are issued on login/signup with a one-hour expiry. On the frontend, React Context manages both auth state and cart state, keeping things lightweight without Redux.

Payments go through Stripe's hosted checkout. The backend creates a Stripe Checkout Session and returns the URL. The frontend redirects the user to Stripe's hosted page, then handles the return redirect to confirm the order.

Getting Started

Prerequisites

• Node.js (v18 or later recommended)
• A MongoDB Atlas cluster (or local MongoDB instance)
• A Stripe account with API keys

Setup

Clone the repository:

git clone https://github.com/kaustubhbhargava/EasifyMart.git
cd EasifyMart

Backend:

cd backend
npm install

Create a .env file in the backend/ directory:

MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
STRIPE_SECRET_KEY=your_stripe_secret_key
PORT=3000

Frontend:

cd frontend
npm install

Running the App

Start the backend server:

cd backend
npm start

The API will be available at http://localhost:3000.

Start the frontend dev server:

cd frontend
npm run dev

The app will be available at http://localhost:5173.

Optional: For frontend-only development without the Express backend, you can run a json-server mock API:

cd frontend
npm run server

This starts a mock API on http://localhost:3001.

API Endpoints

All endpoints are prefixed with /api.

Auth

Method	Endpoint	Description
POST	/api/auth/login	Authenticate user, returns JWT
POST	/api/auth/signup	Register new user

Products

Method	Endpoint	Description
GET	/api/products	List all products
GET	/api/products/:id	Get product by ID
POST	/api/products	Create a product
PUT	/api/products/:id	Update a product
DELETE	/api/products/:id	Delete a product

Categories

Method	Endpoint	Description
GET	/api/categories	List all categories
GET	/api/categories/:name	Get category by name
POST	/api/categories	Create a category
PUT	/api/categories/:name	Update a category
DELETE	/api/categories/:name	Delete a category

Orders

Method	Endpoint	Description
GET	/api/orders	List all orders
GET	/api/orders/:id	Get order by ID
POST	/api/orders	Create an order
PUT	/api/orders/:id	Update an order
DELETE	/api/orders/:id	Delete an order

Order Items

Method	Endpoint	Description
GET	/api/orderitems	List all order items
GET	/api/orderitems/:id	Get order item by ID
POST	/api/orderitems	Create an order item
PUT	/api/orderitems/:id	Update an order item
DELETE	/api/orderitems/:id	Delete an order item

Users (JWT Protected)

Method	Endpoint	Description
GET	/api/users	List all users
GET	/api/users/:id	Get user by ID
POST	/api/users	Create a user
PUT	/api/users/:id	Update a user
DELETE	/api/users/:id	Delete a user

Stripe

Method	Endpoint	Description
POST	/api/stripe/create-checkout-session	Create a Stripe Checkout session
GET	/api/stripe/session-status	Check session payment status

Transactions

Method	Endpoint	Description
GET	/api/transactions	List all transactions
GET	/api/transactions/:id	Get transaction by ID
POST	/api/transactions	Create a transaction
PUT	/api/transactions/:id	Update a transaction
DELETE	/api/transactions/:id	Delete a transaction

Project Structure

EasifyMart/
├── frontend/
│   ├── src/
│   │   ├── main.jsx              # Entry: Router → AuthProvider → CartProvider → App
│   │   ├── App.jsx               # Route definitions
│   │   ├── services/
│   │   │   ├── api.js            # Axios instance and API functions
│   │   │   ├── auth.jsx          # AuthContext provider
│   │   │   └── CartContext.jsx    # CartContext provider
│   │   ├── Header.jsx            # Navigation, search, cart badge, login toggle
│   │   ├── Footer.jsx            # Site footer with links
│   │   ├── HomePage.jsx          # Landing page with categories and hero
│   │   ├── ProductListings.jsx   # Product grid with category filtering
│   │   ├── ProductDetailsPage.jsx # Product view with variations
│   │   ├── ShoppingCart.jsx       # Cart with quantity controls and summary
│   │   ├── CheckoutProcess.jsx    # Multi-step checkout wizard
│   │   ├── Return.jsx            # Post-payment order creation
│   │   ├── UserDashboard.jsx     # Orders, wishlist, address book
│   │   ├── PopupForm.jsx         # Login/signup modal
│   │   ├── PrivateRoute.jsx      # Auth route guard
│   │   └── *.css                 # Per-component stylesheets
│   ├── index.html
│   ├── vite.config.js
│   ├── package.json
│   └── db.json                   # Mock data for json-server
├── backend/
│   ├── index.js                  # MongoDB connection and server start
│   ├── app.js                    # Express app, middleware, route registration
│   ├── controllers/
│   │   ├── authController.js     # Login and signup
│   │   ├── productController.js  # Product CRUD
│   │   ├── categoryController.js # Category CRUD
│   │   ├── orderController.js    # Order CRUD
│   │   ├── orderItemController.js # Order item CRUD
│   │   ├── userController.js     # User CRUD (JWT protected)
│   │   ├── stripeController.js   # Stripe checkout endpoints
│   │   └── transactionController.js # Transaction CRUD
│   ├── models/
│   │   ├── user.js               # User schema (email, password, addresses, wishlist)
│   │   ├── product.js            # Product schema (name, price, variations, images)
│   │   ├── order.js              # Order schema (user ref, status, total)
│   │   ├── orderitem.js          # Line items (product ref, quantity, subtotal)
│   │   ├── category.js           # Product categories
│   │   └── transaction.js        # Payment transaction records
│   ├── utils/
│   │   ├── authMiddleware.js     # JWT verification middleware
│   │   └── errorHandler.js       # Centralized error handler
│   ├── populate.js               # Database seed script
│   └── package.json
└── README.md

License

This project is licensed under the MIT License.