Component Library Overview
Relevant source files
The following files were used as context for generating this wiki page:
- README.md
- frontend/src/components/Layout/Header.jsx
- frontend/src/components/Layout/Footer.jsx
- frontend/src/components/Route/ProductCard/ProductCard.jsx
- frontend/src/components/Route/ProductDetailsCard/ProductDetailsCard.jsx
- frontend/src/components/Products/ProductDetails.jsx
- frontend/src/components/Shop/CreateProduct.jsx
- frontend/src/components/Admin/Layout/AdminSideBar.jsx
- frontend/src/components/Shop/Layout/DashboardSideBar.jsx
- frontend/src/components/Wishlist/Wishlist.jsx
- frontend/src/static/data.js
- frontend/src/pages/FAQPage.jsx
The frontend of this E-Commerce platform is built using a modular and feature-driven React component library. The components are organized logically based on their domain and functionality, such as Layout, Products, Shop, and Admin. This structure promotes reusability and maintainability across the application.
The library heavily utilizes react-redux for state management, react-router-dom for navigation, and tailwindcss for styling, creating a responsive and interactive user experience. Components are designed to be self-contained units that fetch data from the Redux store and dispatch actions to modify the application state.
Core Structure and Styling
The component library resides in the frontend/src/components/ directory. It is organized into subdirectories, each corresponding to a specific feature or user role. This separation of concerns simplifies development and navigation within the codebase.
Sources: README.md
This diagram illustrates the high-level directory structure of the component library.
Sources: README.md
Styling is primarily handled by the TailwindCSS utility-first framework. Components are styled using className attributes with Tailwind classes. For some shared, reusable style definitions, a styles.js file is used, which exports style objects that can be embedded in component class strings.
Sources: frontend/src/pages/FAQPage.jsx:4, frontend/src/components/Layout/Footer.jsx:9
Layout Components
Layout components form the main structure of the application's UI, providing consistent headers, footers, and navigation across different pages.
| Component | Description | Key File |
|---|---|---|
Header | The main application header. Includes logo, search bar, navigation, cart/wishlist icons, and user profile. It is responsive and adapts for mobile views. | frontend/src/components/Layout/Header.jsx |
Footer | The application footer. Contains a newsletter signup, contact information, various site links, and a copyright notice. | frontend/src/components/Layout/Footer.jsx |
AdminSideBar | A vertical navigation bar for the admin dashboard, providing links to manage orders, sellers, users, products, and more. | frontend/src/components/Admin/Layout/AdminSideBar.jsx |
DashboardSideBar | A vertical navigation bar for the seller dashboard. It includes links for managing products, orders, events, and finances. | frontend/src/components/Shop/Layout/DashboardSideBar.jsx |
Header Component
The Header is a complex component responsible for top-level navigation and user actions. It uses the useSelector hook to access isAuthenticated, isSeller, cart, and wishlist states to conditionally render UI elements. It also manages the state for the search bar and the visibility of the Cart and Wishlist side panels.
Sources: frontend/src/components/Layout/Header.jsx:11-20
The header's structure includes distinct sections for desktop and mobile views, ensuring a responsive design.
This diagram shows the logical parts of the Header component.
Sources: frontend/src/components/Layout/Header.jsx
Product-Related Components
These components are central to the e-commerce experience, handling the display and interaction with products.
Product Display Flow
Users can view product details through two main pathways: a quick-view modal or a full-detail page. The ProductCard component serves as the entry point for both.
This flowchart illustrates the user journey from a product grid to viewing product details.
Sources: frontend/src/components/Route/ProductCard/ProductCard.jsx:118-122, 131-136
Component Comparison: ProductDetails vs. ProductDetailsCard
While both components display product information, they serve different purposes.
| Feature | ProductDetailsCard (Modal) | ProductDetails (Page) |
|---|---|---|
| Context | Quick view from a product list. | Full, dedicated product page. |
| Image Display | Single primary image. | Image gallery with selectable thumbnails. |
| Description | Truncated with a "see more" link. | Full product description in a dedicated tab. |
| Reviews | Shows average rating only. | Displays a list of individual user reviews in a tab. |
| Shop Info | Shows shop name and average rating. | Detailed shop info, including join date and total products, in a tab. |
Sources: frontend/src/components/Route/ProductDetailsCard/ProductDetailsCard.jsx, frontend/src/components/Products/ProductDetails.jsx
User Interaction Components
These components facilitate key user actions like creating products, managing wishlists, and submitting reviews.
Create Product Form
Sellers use the CreateProduct component to add new items to their shop. The component is a form that collects all necessary product details and dispatches a Redux action to create the product.
| Field Name | Description | Required |
|---|---|---|
name | The name of the product. | Yes |
description | Detailed description of the product. | Yes |
category | Product category, selected from a dropdown. | Yes |
tags | Comma-separated tags for searchability. | No |
originalPrice | The original price before any discount. | No |
discountPrice | The final selling price. | Yes |
stock | The number of items available. | Yes |
images | Product images (multiple can be uploaded). | Yes |
Sources: frontend/src/components/Shop/CreateProduct.jsx:62-198
Wishlist and State Management
The Wishlist component is a side panel that displays items a user has saved. Its state is managed by Redux. The following diagram shows the sequence of events when a user adds an item to their wishlist from a ProductCard.
This sequence diagram demonstrates the unidirectional data flow when adding an item to the wishlist.
Sources: frontend/src/components/Route/ProductCard/ProductCard.jsx:81-85, frontend/src/components/Wishlist/Wishlist.jsx:10-14
Static Data Integration
Several components rely on static data defined in frontend/src/static/data.js. This file centralizes data that does not change frequently, such as navigation links and product categories, making it easy to update.
navItems: Used by theNavbarcomponent to render the main navigation links in theHeader.categoriesData: Used in theCreateProductform to populate the category selection dropdown.brandingData: Used on the homepage to display key service offerings like "Free Shipping".
Sources: frontend/src/static/data.js:2-15, 175-217, frontend/src/components/Shop/CreateProduct.jsx:116-122, frontend/src/components/Layout/Header.jsx:128