Sports Equipment E-Commerce Platform Final Year Project

• Secure admin login in this final year project
• Admin role-based access
• Dedicated admin sidebar layout
• Admin dashboard
• View total products
• View total orders
• View total users
• View revenue
• View recent orders
• View customer name
• View order total
• View order status
• View order date
• Quick action links
• Store summary widget
• Category management
• Create category
• Auto-generate slug from category name
• View searchable category table
• View category name
• View category slug
• View created date
• Update category name and slug
• Delete category with confirmation
• Product management
• Create product
• Add product name
• Add product slug
• Add product price
• Select category
• Add product image URL
• Add product description
• View product table
• View product thumbnail
• View category badge
• View price
• Search products
• Filter products by category
• Update product details
• Delete product with confirmation
• Order management
• View all orders
• Search orders
• Filter orders by status
• View status filter pills
• Update order status
• Move order from Pending to Delivered or Cancelled
• Delete order with confirmation
• Expand order rows
• View ordered items
• View order totals
• View shipping address
• User management
• View all users
• View avatar
• View email
• View role
• View join date
• Search users
• Filter users by role
• Update user name
• Update user role as user or admin
• Delete user
• Prevent deleting own account

The admin panel includes dashboard, categories CRUD, products CRUD, orders management, and users management.

• Professional landing page in this final year project
• Hero banner with shop call-to-action
• Trust badges for COD, fast delivery, and genuine products
• Shop-by-category grid
• Featured products section
• Store stats section
• Why choose us section
• Signup call-to-action
• User registration
• User login
• JWT authentication
• Auto-login after registration
• Product search
• Search products by name
• View product results grid
• Empty state when no result is found
• Category browsing
• Category hero banner
• Breadcrumb navigation
• Filtered product listing by sport category
• Product detail page
• Large product image
• Product price
• Product description
• Category badge
• Quantity selector
• Add to cart
• Toast notification after adding to cart
• Trust badges for shipping, COD, and genuine product
• Shopping cart
• View all cart items with thumbnails
• Update quantity using plus/minus controls
• Remove cart items
• View order summary
• View subtotal
• View free shipping
• View total
• Proceed to checkout
• Cart persistence in localStorage
• Checkout page
• Protected checkout route
• Pre-filled name and email from account
• Add phone number
• Add shipping address
• Cash on Delivery payment method
• Review order summary
• Place order through API
• Clear cart after order placement
• My Orders page
• View user order history
• Expand order cards
• View order status badges
• View order progress timeline
• View ordered items
• View shipping address
• Profile page
• View account overview
• Update display name
• Change password with confirmation
• Link to order history
• Admin users can access admin panel link

The storefront includes landing page, authentication, product discovery, cart, checkout, order history, and profile modules.

• Full-stack MERN architecture in this final year project
• React 18 frontend
• Vite 5 build tool
• React Router 6
• Tailwind CSS 3
• Axios API client
• Context API for Auth, Cart, and Toast state
• Node.js backend
• Express 4 REST API
• MongoDB database
• Mongoose 8 ODM
• JWT authentication with 30-day expiry
• bcryptjs password hashing
• CORS support
• Bearer token authentication
• User and admin roles
• Client-side cart in localStorage
• Orders stored as Booking documents
• Admin guards
• Seed data support
• Demo users
• Demo products
• Demo categories
• Demo sample orders
• Production build support

The technology stack includes React, Vite, React Router, Tailwind CSS, Axios, Context API, Node.js, Express, MongoDB, Mongoose, JWT, bcryptjs, and CORS.

Technology Used

Step 1: Create backend environment file

Create backend/.env:

PORT=5000

MONGODB_URI=mongodb://localhost:27017/sports_ecommerce

JWT_SECRET=your_super_secret_jwt_key

[email protected]

ADMIN_PASSWORD=Admin@123

CLIENT_URL=http://localhost:5173,http://localhost:5174

Optional frontend .env:

VITE_API_BASE=http://localhost:5000/api

The backend environment includes port, MongoDB URI, JWT secret, admin credentials, and allowed frontend origins.

Step 2: Start MongoDB

mongod

Step 3: Start backend

cd backend

npm install

npm run dev

Backend starts at:

http://localhost:5000

Step 4: Seed database

Open a separate terminal:

cd backend

npm run seed

The seed command creates the admin account, demo users, 5 categories, 24 products, and 8 sample orders.

Step 5: Start frontend

cd frontend

npm install

npm run dev

Frontend starts at:

http://localhost:5173

Admin panel:

http://localhost:5173/admin

The project runs backend on port 5000 and frontend on port 5173.

Seed Data

Running npm run seed inserts:

Categories include:

• Cricket
• Football
• Tennis
• Badminton
• Gym & Fitness

The seed command resets categories, products, demo users, and orders each time, while preserving the admin account if it already exists

Admin Account

Demo User Accounts

Password for all demo users:

User@123