KICKS - Full Stack E-Commerce (Client + Server)

KICKS is a full-stack shoe e-commerce project with:

• a React + Vite frontend (client)
• a Node.js + Express + MongoDB backend (server)

It includes user auth, product browsing, cart and checkout flow, profile management, and admin management modules.

Tech Stack

Frontend

• React (Vite)
• React Router
• Context API
• Tailwind CSS
• Axios
• React Hook Form + Yup
• Recharts

Backend

• Node.js
• Express
• MongoDB + Mongoose
• JWT auth
• Express Validator

Folder Structure

Kicks/
├── client/   # Frontend app (Vite + React)
├── server/   # Backend API (Express + MongoDB)
└── README.md

Prerequisites

• Node.js 18+
• npm 9+
• MongoDB Atlas URI or local MongoDB instance

Environment Setup

Create a server/.env file:

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_secure_jwt_secret
JWT_EXPIRE=30d
NODE_ENV=development

Create a client/.env file:

VITE_API_URL=http://localhost:5000/api

Installation

From the project root, install dependencies in both apps:

cd server
npm install

cd ../client
npm install

Running the Project

Use two terminals.

Terminal 1 - Backend

cd server
npm run dev

Server runs on: http://localhost:5000

Terminal 2 - Frontend

cd client
npm run dev

Client runs on: http://localhost:5173

Optional: Seed Sample Data

cd server
npm run seed

Default Demo Credentials

Admin

• Email: admin@kicks.com
• Password: admin123

User

• Email: kaushal@example.com
• Password: password123

API Base URL

Frontend uses this value from client/.env:

VITE_API_URL=http://localhost:5000/api

Scripts

Server (server/package.json)

• npm run dev - start API server
• npm run start - start API server
• npm run seed - seed database

Client (client/package.json)

• npm run dev - start Vite dev server
• npm run build - production build
• npm run preview - preview build
• npm run lint - run ESLint