Frontend Application Architecture
Relevant source files
The following files were used as context for generating this wiki page:
The frontend of the E-Commerce platform is a modern single-page application (SPA) built with React. It provides a dynamic and responsive user interface for customers, sellers, and administrators. The architecture is designed to be modular and scalable, leveraging a component-based structure, centralized state management with Redux, and a declarative routing system.
This architecture ensures a clear separation of concerns, making the application easier to develop, maintain, and test. It communicates with a backend API server to handle data persistence, business logic, and user authentication.
Sources: README.md
Core Technologies
The frontend application is built upon a foundation of widely-adopted libraries and frameworks. The primary dependencies are listed in package.json.
| Technology | Purpose |
|---|---|
react | Core UI library for building components. |
react-router-dom | Client-side routing for navigation. |
redux, react-redux | Global state management. |
@reduxjs/toolkit | Official, opinionated toolset for Redux. |
axios | HTTP client for API communication. |
tailwindcss | Utility-first CSS framework for styling. |
@material-ui/core | UI component library. |
socket.io-client | Real-time communication (e.g., chat). |
stripe, paypal | Payment processing integrations. |
chart.js | For rendering charts in dashboards. |
Sources: frontend/package.json
Project Structure
The frontend/src directory is organized to separate concerns, making the codebase navigable and maintainable.
This diagram shows the main directories within frontend/src/ and their relationships.
components/: Contains reusable React components, further organized by feature or domain (e.g.,Layout,Products,Shop,Admin). This promotes reusability and modular design.pages/: Holds top-level components that correspond to specific routes (e.g.,ProductsPage.jsx,FAQPage.jsx). These components often compose smaller components from thecomponents/directory.redux/: Manages the application's global state. It is divided intoactionsandreducersfor different state slices like user, products, and cart.routes/: Defines the application's routing configuration, mapping URL paths to their corresponding page components.styles/: Contains global styles and style-related configurations.server.js: A configuration file that exports the backend server URL, allowing for easy configuration between development and production environments.
Sources: README.md, frontend/src/components/Products/ProductDetails.jsx:6
State Management with Redux
Global application state is managed by Redux, using Redux Toolkit for a more efficient and modern setup. This provides a single source of truth for data that needs to be shared across many components, such as user authentication status, shopping cart contents, and product lists.
Redux Store Structure
The Redux store is composed of several reducers (slices), each managing a specific part of the application's state.
This diagram illustrates the main slices of the Redux store, as inferred from useSelector hooks in various components.
Sources: frontend/src/components/Products/ProductDetails.jsx:13-16, frontend/src/components/Wishlist/Wishlist.jsx:12, frontend/src/components/Admin/AdminDashboardMain.jsx:11-12
Data Flow
The application follows a standard unidirectional data flow. Components read data from the store using the useSelector hook and dispatch actions to update the state using the useDispatch hook. Asynchronous operations, like API calls, are handled by Redux Thunks.
The following sequence diagram shows how a product is added to the wishlist.
Routing
Client-side routing is managed by react-router-dom. The application defines routes for public access, authenticated users, sellers, and administrators.
Route Categories
- Public Routes: Accessible to all users (e.g.,
/,/products,/login,/sign-up). - Protected Routes: Require user authentication (e.g.,
/profile,/checkout). - Seller Routes: Specific to the seller dashboard (e.g.,
/dashboard,/dashboard-products). - Admin Routes: Specific to the admin dashboard (e.g.,
/admin/dashboard,/admin-sellers).
The following diagram shows a simplified view of the routing structure.
Component Architecture
The UI is built using a hierarchical component structure. This promotes reusability and separation of concerns.
Component Types
- Page Components: Top-level components that define the structure of a page (e.g.,
ProductsPage.jsx). They fetch data and pass it down to child components. - Layout Components: Provide the general structure of the application, such as
Header.jsx,Footer.jsx, andAdminSideBar.jsx. - Feature/UI Components: Smaller, reusable components that encapsulate a specific piece of UI or functionality, such as
ProductCard.jsx,Ratings.jsx, orWishlist.jsx.
Example: Products Page Composition
The ProductsPage is a good example of component composition.
This diagram illustrates how ProductsPage.jsx assembles various layout and UI components to build the final view.
Sources: frontend/src/pages/ProductsPage.jsx:8-13
API Communication
The frontend communicates with the backend via a RESTful API. axios is the primary HTTP client used for making these requests.
API Endpoint Configuration
The base URL for the backend API is defined in a central file (frontend/src/server.js) and imported where needed. This allows for easy switching between different environments (e.g., local development, production). The backend API routes are prefixed with /api/v2/.
Sources: frontend/src/components/Products/ProductDetails.jsx:6, backend/app.js:63-73
Data Fetching Flow
Data fetching is typically initiated within a component's useEffect hook or in response to a user event. For shared data, this process is encapsulated within a Redux Thunk action.
The following sequence diagram shows the process of a user sending a message to a shop owner from a product page.
This flow demonstrates how components use axios to interact with the backend and handle the response to update the UI or navigate the user.
Sources: frontend/src/components/Products/ProductDetails.jsx:62-72