This repository contains the source code for the frontend of a feature-rich, modern e-commerce platform. It is built using the latest web technologies, focusing on performance, scalability, and a great user experience. This project was developed as a final year university project.
The frontend is designed to work with a corresponding .NET Core Web API backend.
This platform provides a complete e-commerce experience with a wide range of features for both customers and administrators.
- Product Catalog: Browse products by category, with support for dynamic filtering and sorting.
- Product Details: View detailed product information, including descriptions, technical specifications, and customer reviews.
- Shopping Cart: A fully persistent shopping cart with functionality to add, update, and remove items, managed globally with Zustand.
- Favorites/Wishlist: Users can save products to multiple named wishlists for future reference.
- Order Management: Users can view their complete order history, check the status of each order (Pending, Shipped, Delivered), and see detailed item breakdowns.
- Product Review System: Authenticated users can submit ratings and written reviews for products they have purchased.
- Secure Authentication: JWT-based authentication with
HttpOnlycookies for secure session management. - User Dashboard: A central sidebar provides easy access to orders, favorites, profile settings, and more.
- Account Management: Users can sign up, log in, and log out securely.
-
AI Image Generation with Multi-Layer Caching: The platform integrates a powerful feature for generating images from text prompts using a Stable Diffusion model.
- Smart Caching: To optimize performance and reduce redundant, costly API calls, a multi-layer caching strategy is implemented. When an image is requested, the system first queries a high-speed Redis cache. If it's a miss, it checks a persistent database cache. The Stable Diffusion model is only invoked if the image is absent from both caches.
- Dockerized Redis: The Redis cache runs within a Docker container, ensuring a consistent and isolated environment for development and deployment.
- Frontend Integration: This functionality is exposed to users on pages like
MyFollowedStores/page.tsx, where they can input prompts to generate visuals. The request is handled by a dedicated/api/ImageCacheNext.js API route.
-
Gamified Loyalty Program with Python Microservice: A unique loyalty program enhances user engagement.
- Integration: Users can access the game via the
loyalty-program/page.tsxpage, which triggers a/api/run-gameendpoint. - Decoupled Architecture: This Next.js API route communicates with a separate, Python-based microservice. This microservice contains the game's logic, and its decoupled nature allows it to be developed, scaled, and maintained independently from the main frontend application.
- Integration: Users can access the game via the
- Responsive Design: Fully responsive layout built with Tailwind CSS, ensuring a seamless experience on all devices.
- Interactive UI: Modern UI elements like a mega menu for navigation, overlays, and modals for non-disruptive user interactions (e.g., sorting, signing in).
- Global State Management: Centralized state management using Zustand for cart, user session, and favorites, ensuring a consistent state across the application.
- Notifications: User feedback through success and error messages for actions like adding items to the cart.
| Category | Technology / Library |
|---|---|
| Framework | Next.js 13+ (App Router) |
| Language | TypeScript |
| UI Library | React 18 |
| Styling | Tailwind CSS |
| State Management | Zustand |
| Data Fetching | Axios |
| UI Components | Custom Components, Radix UI Primitives |
| Authentication | Custom JWT-based context (AuthContext.tsx) |
| Linting/Formatting | ESLint, Prettier |
The project follows a feature-oriented directory structure, organized for scalability and maintainability.
/
├── app/ # Next.js App Router: Pages, API Routes, and Layouts
│ ├── (auth)/ # Route group for authentication pages
│ ├── api/ # BFF API Routes (e.g., for AI/game integration)
│ ├── my-orders/ # Example of a user-specific page
│ └── layout.tsx # Root layout
│ └── page.tsx # Main entry page
├── components/ # Reusable UI components (e.g., Sidebar, ProductGrid)
│ ├── icons/ # SVG icons
│ ├── navigation/ # Navigation components like NavigationBar
│ ├── overlay/ # Modal/Overlay components
│ └── sidebar/ # Main sidebar
├── contexts/ # React contexts (e.g., AuthContext)
├── services/ # Centralized API service for backend communication
├── stores/ # Zustand store definitions (cartStore, userStore, etc.)
├── public/ # Static assets (images, fonts)
└── ... # Configuration files (next.config.js, tailwind.config.ts)
Follow these instructions to get the project up and running on your local machine for development and testing purposes.
-
Clone the repository:
git clone https://github.com/your-username/FinalYearProject_Frontend.git cd FinalYearProject_Frontend -
Install dependencies:
npm install # or yarn install # or pnpm install
-
Set up environment variables: Create a
.env.localfile in the root of the project and add the necessary environment variables. Start by copying the example file:cp .env.example .env.local
Then, fill in the values in
.env.local. A typical variable would be:NEXT_PUBLIC_API_BASE_URL=http://localhost:5000/api -
Run the development server:
npm run dev # or yarn dev # or pnpm dev
The application should now be running on http://localhost:3000.
This README provides a comprehensive overview of the project. For more specific details, please refer to the source code and inline comments.