Ecommerce Frontend (React)

This repository contains the frontend for an ecommerce web application built with React (Create React App), using React Router, Context API (auth/cart/search), and UI libraries like Ant Design.

Note: This project expects a separate backend (not included in this repo) for authentication, products/categories, and order management.

Features

• Browse products by category and individual product pages
• Search functionality (via a search context)
• Shopping cart (stored in localStorage)
• Authentication & authorization
  • User dashboard (profile, orders)
  • Admin dashboard (category/product CRUD, admin orders)
• Role-based routing
  • Nested dashboard route distinguishes admin vs user based on auth.user.role
• Payments UI dependency included (braintree-web-drop-in-react) (backend integration assumed)

Tech Stack

• React 18 + React Router DOM v6
• Context API for auth/cart/search state
• Axios for API calls
• Ant Design + React Icons
• React Helmet / Toast notifications

Project Structure

• client/ - React application
  • src/pages/ - route-level pages (Home, Products, Cart, Auth, Admin, User)
  • src/context/ - auth/cart/search state management
  • src/components/ - shared UI/layout components
  • src/hooks/ - custom hooks (e.g. categories)

Getting Started (Frontend)

1) Install dependencies

From the repository root:

cd client
npm install

2) Configure backend URL

This frontend uses Axios. Check any API base URL configuration in your code (commonly in an .env file or a config module). If the project currently hardcodes a base URL, update it to match your backend.

3) Run the app (development)

From client/:

npm start

Open:

• http://localhost:3000

Routes (High-level)

• / - Home
• /search - Search results
• /categories - Categories list
• /category/:slug - Category products
• /product/:slug - Product details
• /cart - Cart page

Auth:

• /register
• /login
• /forgot-password

Dashboard:

• /dashboard/user - User dashboard, orders, profile
• /dashboard/admin - Admin dashboard, create/update categories/products, admin orders

Build for Production

From client/:

npm run build

Deployment

• Deploy the client/build output to a static hosting provider.
• Ensure your frontend is configured to reach the backend API.

Troubleshooting

• If you see 401/403 errors, verify:
  • backend JWT/token validation
  • role values (auth.user.role) for admin routes
• If pages show blank data:
  • verify backend endpoints
  • verify the expected response shapes (categories/products/orders)