🖥️ CS02 Computer Store - Frontend

Modern e-commerce frontend for PC components and custom PC building

📋 Overview

CS02 Computer Store is a comprehensive e-commerce web application for a computer components and custom PC building store. The application is themed around WSO2 brand colors (orange #FF7300) and provides a complete shopping experience for computer enthusiasts.

Key Features

Product Catalog - Browse pre-built PCs and individual components
Custom PC Builder - 8-step wizard with compatibility checking
BuilderBot AI - AI-powered chat assistant for build recommendations
Shopping Cart & Wishlist - Full cart and wishlist management
User Account - Profile, orders, addresses, payment methods
Admin Dashboard - Complete store management

🛠️ Technology Stack

Component	Technology	Version
Framework	Next.js (App Router)	16.0.5
UI Library	React	19.2.0
Language	TypeScript	^5
Styling	Tailwind CSS	^4
State Management	Zustand	^5.0.8
HTTP Client	Axios	^1.13.2
Animations	Framer Motion	^12.23.24
Icons	Lucide React	^0.548.0
3D Graphics	Three.js, React Three Fiber	^0.181.0
Font	Inter (Google Fonts)	-

Design System

Primary Color: WSO2 Orange (#FF7300)
Dark Mode: Class-based switching with system preference detection
Responsive: Mobile-first with md: tablet and lg: desktop breakpoints

📁 Project Structure

frontend/
├── app/
│   ├── globals.css          # Global styles and Tailwind imports
│   ├── layout.tsx           # Root layout with providers
│   ├── page.tsx             # Homepage
│   ├── not-found.tsx        # 404 page
│   ├── 500/                 # Server error page
│   ├── about/               # About page
│   ├── account/             # User account pages (12+)
│   ├── admin/               # Admin dashboard (17+)
│   ├── blog/                # Blog listing and posts
│   ├── builder-quiz/        # System builder quiz
│   ├── builderbot/          # AI chat assistant
│   ├── cart/                # Shopping cart
│   ├── checkout/            # Checkout flow
│   ├── compare/             # Product comparison
│   ├── components/          # Reusable React components
│   ├── contact/             # Contact page
│   ├── deals/               # Deals and promotions
│   ├── faq/                 # FAQ page
│   ├── financing/           # Financing options
│   ├── gallery/             # Community build gallery
│   ├── login/               # Login page
│   ├── signup/              # Registration page
│   ├── order-confirmation/  # Order success page
│   ├── pc-builder/          # 8-step PC builder
│   ├── pre-builts/          # Pre-built PCs
│   ├── privacy/             # Privacy policy
│   ├── product/             # Product details
│   ├── returns/             # Returns policy
│   ├── search/              # Search results
│   ├── stores/              # Store locations
│   ├── system-requirements/ # System requirements checker
│   ├── terms/               # Terms of service
│   ├── testimonials/        # Customer testimonials
│   ├── trade-in/            # Trade-in program
│   ├── warranty/            # Warranty info
│   └── wishlist/            # Wishlist page
├── lib/
│   ├── api/                 # API client configuration
│   ├── data/                # Static data and types
│   └── store/               # Zustand state stores
├── public/                  # Static assets
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── next.config.ts

🚀 Pages/Routes

Core E-Commerce (15+ pages)

Route	Description
`/`	Landing page with Hero, Categories, Featured Products
`/pre-builts`	Pre-built PC systems listing
`/product/[category]`	Components category overview
`/product/[category]/[subcategory]`	Dynamic category pages with filters
`/product/[id]`	Product details with specs, reviews
`/search`	Search results page
`/cart`	Shopping cart
`/wishlist`	Wishlist management
`/compare`	Side-by-side product comparison (max 4)
`/checkout`	4-step checkout process
`/order-confirmation/[id]`	Order success page

Advanced Features

Route	Description
`/pc-builder`	8-step PC builder wizard with compatibility checking
`/builderbot`	AI chat interface for build recommendations
`/builder-quiz`	Multi-step system builder quiz
`/gallery`	Community build gallery
`/gallery/[id]`	Build detail pages

User Account (12+ pages)

Route	Description
`/account`	Profile dashboard
`/account/orders`	Order history
`/account/track`	Order tracking (visual timeline)
`/account/addresses`	Saved addresses CRUD
`/account/payment-methods`	Payment methods CRUD
`/account/reviews`	User reviews management
`/account/builds`	Saved PC builds
`/account/invoices`	Download invoices
`/account/notifications`	Notifications inbox
`/account/rewards`	Loyalty rewards and tiers
`/account/recently-viewed`	Browsing history
`/account/settings`	Account settings

Admin Dashboard (17+ pages)

Route	Description
`/admin`	Dashboard with KPIs, recent orders, low stock alerts
`/admin/orders`	Orders management
`/admin/products`	Products management
`/admin/stock`	Stock management with quick-edit
`/admin/reviews`	Review moderation
`/admin/analytics`	Revenue charts, top products
`/admin/settings`	Store settings
`/admin/categories`	Category management
`/admin/customers`	Customer list
`/admin/promotions`	Discount codes and deals
`/admin/invoices`	Invoice tracking
`/admin/stores`	Store locations management
`/admin/rma`	Returns management
`/admin/support`	Support tickets
`/admin/inventory-alerts`	Low stock alerts
`/admin/bulk`	Bulk import/export
`/admin/abandoned-carts`	Abandoned carts tracking

Static/Marketing Pages

Route	Description
`/about`	Company mission, values, story
`/contact`	Contact form with map
`/privacy`	Privacy policy (GDPR/CCPA)
`/terms`	Terms of service
`/returns`	Returns policy
`/faq`	FAQ accordion
`/deals`	Deals and promotions
`/blog`	Blog listing with categories
`/testimonials`	Customer testimonials
`/financing`	Payment plans and financing
`/gift-cards`	Gift cards (placeholder)

🔧 Configuration

Environment Variables

Variable	Required	Default	Description
`NEXT_PUBLIC_API_URL`	No	`http://localhost:8080`	Backend API gateway URL

next.config.ts

const nextConfig = {
  output: 'standalone',
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: '**' },
    ],
  },
}

📦 State Management

Zustand Stores (`lib/store/`)

Store	Purpose	Persistence
`themeStore.ts`	Dark/light mode toggle	✅ localStorage
`userStore.ts`	User auth, addresses, payment methods, notifications	✅ localStorage
`cartStore.ts`	Shopping cart items with stock validation	✅ localStorage
`wishlistStore.ts`	Wishlist items	✅ localStorage
`compareStore.ts`	Product comparison (max 4)	✅ localStorage
`productStore.ts`	Products, categories, orders, reviews, saved builds	❌
`orderStore.ts`	Order creation and fetching	❌
`adminStore.ts`	Admin dashboard metrics	❌

🔌 API Integration

API Client (`lib/api/client.ts`)

Uses Axios with base URL from NEXT_PUBLIC_API_URL
Request interceptor: Adds JWT Bearer token from localStorage
Response interceptor: Handles 401 unauthorized errors

Backend Endpoints Used

Category	Endpoints
Auth	`/api/auth/login`, `/api/auth/register`
Users	`/api/users/me`, `/api/users/me/addresses`, `/api/users/me/payment-methods`
Products	`/api/products`, `/api/products/{id}`, `/api/products/categories`
Cart	`/api/cart`, `/api/cart/items`, `/api/cart/clear`
Orders	`/api/orders`, `/api/orders/{id}`
Wishlist	`/api/wishlist`, `/api/wishlist/builds`
AI	`/api/ai/builder-bot`
Analytics	`/api/analytics/dashboard`, `/api/analytics/top-products`

🏃 Getting Started

Prerequisites

Node.js 20.9.0+

Recommend using nvm (Node Version Manager):

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# Restart terminal or source ~/.bashrc
nvm install 20
nvm use 20

npm or yarn
Backend services running (see Backend README)

Development

# Navigate to frontend directory
cd frontend

# Install dependencies
npm install

# Start development server
npm run dev

# Open http://localhost:3000

Production Build

# Build for production
npm run build

# Start production server
npm start

Docker

# Build Docker image
docker build -t cs02-frontend .

# Run container
docker run -p 3000:3000 \
  -e NEXT_PUBLIC_API_URL=http://api-gateway:8080 \
  cs02-frontend

Available Scripts

npm run dev      # Development server with hot reload
npm run build    # Production build
npm run start    # Start production server
npm run lint     # Run ESLint
npm run prepare  # Setup Husky git hooks

✅ Features - Completion Status

Feature Category	Status	Items
Core E-Commerce	✅ 100%	Product listing, search, cart, wishlist, checkout
PC Builder	✅ 100%	8-step wizard, compatibility checking, save builds
BuilderBot AI	✅ 100%	Natural language parsing, recommendations
User Account	✅ 100%	12/12 pages (profile, orders, addresses, rewards, etc.)
Admin Dashboard	✅ 100%	17/17 pages (orders, products, stock, analytics, etc.)
Static Pages	✅ 100%	About, contact, privacy, terms, FAQ, returns
Error Pages	✅ 100%	404, 500, 403
Dark Mode	✅ 100%	Class-based switching, persistence
Responsive Design	✅ 100%	Mobile, tablet, desktop breakpoints
Stock Awareness	✅ 100%	System-wide out-of-stock handling

Overall Completion: ~95% ✅

❌ Not Implemented / Future Enhancements

Feature	Priority	Notes
Gift cards purchase page	Low	Placeholder exists
Trade-in form page	Low	Link exists, page needed
Warranty registration page	Low	Link exists, page needed
Unit/integration tests	Medium	Jest/React Testing Library
E2E tests	Medium	Playwright/Cypress
Real image optimization	Low	Currently placeholders
PWA support	Low	Service worker, offline

🔗 Related Services

API Gateway - Backend entry point (port 8080)
User Identity Service - Authentication
Product Catalogue Service - Products
Shopping Cart Service - Cart/Wishlist
AI Service - BuilderBot

📝 Notes

Frontend runs on port 3000
Requires backend API Gateway on port 8080
Uses Next.js App Router (not Pages Router)
Standalone output mode for Docker deployment
Theme toggle persists in localStorage
Auth token stored in localStorage
Demo credentials available for testing

Name		Name	Last commit message	Last commit date
Latest commit History 88 Commits
.github/workflows		.github/workflows
.husky		.husky
app		app
lib		lib
public		public
scripts		scripts
.env.example		.env.example
.gitignore		.gitignore
.nvmrc		.nvmrc
Dockerfile		Dockerfile
FINAL_BUILD_SUMMARY.md		FINAL_BUILD_SUMMARY.md
PROJECT_STATUS.md		PROJECT_STATUS.md
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
sonar-project.properties		sonar-project.properties
tailwind.config.ts		tailwind.config.ts
test-theme.html		test-theme.html
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

🖥️ CS02 Computer Store - Frontend

📋 Overview

Key Features

🛠️ Technology Stack

Design System

📁 Project Structure

🚀 Pages/Routes

Core E-Commerce (15+ pages)

Advanced Features

User Account (12+ pages)

Admin Dashboard (17+ pages)

Static/Marketing Pages

🔧 Configuration

Environment Variables

next.config.ts

📦 State Management

Zustand Stores (lib/store/)

🔌 API Integration

API Client (lib/api/client.ts)

Backend Endpoints Used

🏃 Getting Started

Prerequisites

Development

Production Build

Docker

Available Scripts

✅ Features - Completion Status

Overall Completion: ~95% ✅

❌ Not Implemented / Future Enhancements

🔗 Related Services

📝 Notes

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Zustand Stores (`lib/store/`)

API Client (`lib/api/client.ts`)

Packages