Version: 1.0
Prepared By: Aro Barath Chandru B
Date: 28=02-2025
- Introduction
- Tech Stack
- Project Structure
- Environment Setup
- State Management
- Routing and Navigation
- Components and Pages
- API Services
- Authentication and Authorization
- Admin Panel
- Styling and UI
- Deployment Guide
- Future Enhancements
- Conclusion
The HexaMart Frontend is a React-based single-page application (SPA) that provides users with a seamless shopping experience. It integrates with the FastAPI backend to handle authentication, product browsing, cart management, order processing, and an admin panel for managing products and orders.
This documentation explains the structure, components, API integrations, and UI flow of the frontend in depth.
- Framework: React.js (with React Router for navigation)
- State Management: Context API (for authentication and global state)
- UI Library: Tailwind CSS
- HTTP Client: Axios (for API communication)
- Authentication: JWT (JSON Web Token)
- Routing: React Router
- Deployment: Vercel
The frontend follows modular architecture for better maintainability.
frontend/
│── src/
│ ├── components/ # Reusable UI components
│ │ ├── Navbar.jsx # Navbar with user authentication handling
│ │ ├── Footer.jsx # Footer component
│ │ ├── ProtectedRoute.jsx # Protects admin routes
│ ├── context/ # Global context
│ │ ├── AuthContext.jsx # Authentication state management
│ ├── pages/ # Different screens/pages
│ │ ├── Home.jsx # Product listing
│ │ ├── Login.jsx # User login page
│ │ ├── Register.jsx # User registration page
│ │ ├── Cart.jsx # Cart management
│ │ ├── Checkout.jsx # Payment processing
│ │ ├── Orders.jsx # View orders
│ │ ├── Profile.jsx # User profile management
│ │ ├── AdminDashboard.jsx # Admin panel
│ │ ├── ManageProducts.jsx # Admin product management
│ │ ├── ManageOrders.jsx # Admin order management
│ ├── services/ # API communication logic
│ │ ├── authService.js # Handles authentication API calls
│ │ ├── productService.js # Handles product API calls
│ │ ├── orderService.js # Handles order API calls
│ │ ├── cartService.js # Handles cart API calls
│ ├── styles/ # Styling and CSS
│ │ ├── navbar.css # Styles for navbar
│ │ ├── home.css # Styles for home page
│ ├── AppRoutes.jsx # Centralized route handling
│ ├── App.js # Main React component
│ ├── index.js # Entry point for React application
│── package.json # Project dependencies
│── README.md # Project documentation
npm installREACT_APP_API_BASE_URL = "http://127.0.0.1:8000"
npm startWe use the Context API for handling authentication and global state.
- Stores user authentication status and token.
- Exposes login(), logout(), and isAdmin.
- Stores JWT token in localStorage.
import { createContext, useState, useContext } from "react";
const AuthContext = createContext(null);
export const AuthProvider = ({ children }) => {
const [token, setToken] = useState(localStorage.getItem("token"));
const [user, setUser] = useState(JSON.parse(localStorage.getItem("user")));
const login = (userData, accessToken) => {
setUser(userData);
setToken(accessToken);
localStorage.setItem("user", JSON.stringify(userData));
localStorage.setItem("token", accessToken);
};
const logout = () => {
setUser(null);
setToken(null);
localStorage.clear();
};
return (
<AuthContext.Provider value={{ user, token, login, logout }}>
{children}
</AuthContext.Provider>
);
};
export const useAuth = () => useContext(AuthContext);Handles the frontend routes and protects certain admin routes.
import { Routes, Route } from "react-router-dom";
import Home from "../pages/Home";
import AdminDashboard from "../pages/AdminDashboard";
import ProtectedRoute from "../components/ProtectedRoute";
const AppRoutes = () => {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route
path="/admin"
element={
<ProtectedRoute>
<AdminDashboard />
</ProtectedRoute>
}
/>
</Routes>
);
};
export default AppRoutes;Each page has its own component, making the UI modular and reusable.
- Displays navigation links dynamically based on user authentication.
const Navbar = () => {
const { token, logout } = useAuth();
return (
<nav>
<Link to="/">Home</Link>
{token ? (
<>
<Link to="/cart">Cart</Link>
<Link to="/orders">Orders</Link>
<button onClick={logout}>Logout</button>
</>
) : (
<Link to="/login">Login</Link>
)}
</nav>
);
};
export default Navbar;const AdminDashboard = () => {
return (
<div>
<h1>Admin Panel</h1>
<Link to="/admin/products">Manage Products</Link>
<Link to="/admin/orders">Manage Orders</Link>
</div>
);
};
export default AdminDashboard;We use Axios for API requests.
import axios from "axios";
export const login = async (credentials) => {
const response = await axios.post("/auth/login", credentials);
return response.data;
};export const getProducts = async () => {
const response = await axios.get("/products/");
return response.data;
};- JWT Authentication (Token stored in localStorage)
- Protected Routes (Admin Dashboard restricted)
- Role-Based Access Control (Admin can access extra features)
- Manage Products (Add, Update, Delete)
- Manage Orders (Update order status)
- Tailwind CSS used for responsive UI.
- Reusable components for buttons, forms, and tables.
npm run build
vercel deploy- Dark Mode Support
- Live Chat Support
- Wishlist Feature
The HexaMart frontend is fully responsive, modular, and scalable. It seamlessly integrates with the backend and provides an intuitive user experience.