TechShop Frontend

Professional React + TypeScript frontend for an e-commerce laptop store, with separate customer and admin experiences.

Tech Stack

• React 19 + TypeScript
• Vite 7
• React Router 7
• Ant Design 5
• Tailwind CSS 4 + SCSS
• Axios
• ESLint (TypeScript + React rules)

Key Features

• Customer storefront with product listing and detail pages
• Product search, filter, sorting, and pagination
• Cart management (add, update quantity, empty cart)
• Checkout flow and order submission
• User authentication (register/login/logout)
• Order history for authenticated users
• Admin user management
• Admin product management (create/delete)
• Protected admin routes

Project Structure

src/
  components/
    admin/
    auth/
    client/
  context/
  modal/
  pages/
    admin/
    auth/
    client/
  services/
  styles/

Routing Overview

• / - Client home
• /products - Product listing
• /products/:id - Product detail
• /cart - Shopping cart
• /checkout - Checkout
• /thanks - Order confirmation
• /orders - User orders
• /login - Sign in
• /register - Sign up
• /admin - Admin dashboard (protected)
• /admin/users - Admin users (protected)
• /admin/products - Admin products (protected)

Getting Started

Prerequisites

• Node.js 22+ (CI uses Node 22)
• npm

Installation

npm install

Environment Variables

Create a .env file in the project root:

VITE_API_BASE_URL=your_api_base_url_here

Run in Development

npm run dev

The app will start on Vite's local dev server (typically http://localhost:5173).

Available Scripts

• npm run dev - Start development server
• npm run build - Type-check and create production build
• npm run lint - Run ESLint
• npm run preview - Preview production build locally

API Integration

• Axios instance is configured in src/services/axios.ts.
• Base URL is read from VITE_API_BASE_URL.
• JWT access token is read from localStorage and attached as Authorization: Bearer <token>.
• API functions are organized in src/services/api.ts.

CI

GitHub Actions workflow (.github/workflows/ci.yml) runs on pull requests and pushes to main:

• Install dependencies (npm ci)
• Lint (npm run lint)
• Build (npm run build)

Deployment

This project is suitable for deployment on Vercel, Netlify, or any static hosting platform that supports Vite builds.

Build command:

npm run build

Output directory:

dist/