E-Commerce Platform - Client

An Angular 21 frontend for an e-commerce platform with product catalog, shopping cart, user authentication, and admin dashboard.

---

🚀 Tech Stack

• Angular 21 - Frontend framework
• Bootstrap - UI components and styling
• Meilisearch - Product search
• RxJS - Reactive programming
• Signals - State management

---

✨ Features

Customer Features

• 🔐 User authentication (login, register, password reset)
• 📧 Email verification
• 🔍 Product search with Meilisearch
• 🏷️ Category filtering with counts
• 🛒 Shopping cart (localStorage)
• 📦 Checkout process with shipping info
• 📋 Order history and details
• 👤 User profile management
• 🖼️ Product image gallery

Admin Features

• 📊 Dashboard with statistics
• 📦 Product management (CRUD + images)
• 🏷️ Category management
• 🏢 Supplier management
• 🏭 Warehouse management
• 📦 Inventory management
• 🚚 Order processing (pending → processing → shipped → delivered)

---

🔑 Key Services

• AuthService - Authentication, CSRF tokens, user state
• CatalogService - Product search with Meilisearch
• CartService - Shopping cart (localStorage + signals)
• OrderService - Order creation and history
• AdminService - Admin operations (CRUD, order processing)

---

🛡️ Security

• CSRF protection via HTTP interceptor
• Cookie-based authentication
• Route guards for protected pages
• Admin role-based authorization

---

📁 Project Structure

src/
├── app/
│  ├── core/                  # Core services and guards
│  │  ├── guards/             # Route guards
│  │  ├── interceptors/       # HTTP interceptors
│  │  └── services/           # Core services
│  │
│  ├── features/              # Feature modules
│  │  ├── auth/               # Authentication
│  │  ├── catalog/            # Product catalog
│  │  ├── cart/               # Shopping cart
│  │  ├── checkout/           # Checkout process
│  │  ├── order-confirmation/
│  │  ├── orders/             # Order history
│  │  ├── profile/            # User profile
│  │  └── admin/              # Admin dashboard
│  │     ├── dashboard/
│  │     ├── products/
│  │     ├── categories/
│  │     ├── suppliers/
│  │     ├── warehouses/
│  │     ├── inventory/
│  │     └── orders/
│  │
│  └── shared/                # Shared utilities
│     ├── constants/
│     ├── models/
│     └── services/
│
├── assets/                   # Static files
└── environments/             # Environment configs

---

🏁 Getting Started

Prerequisites

• Node.js (18+)
• Angular CLI (optional)
• Meilisearch (backend requirement)

---

Installation

1. Clone the repository

git clone https://github.com/yourusername/ecommerce-client.git
cd ecommerce-client

---

2. Install dependencies

npm install

---

3. Configure environment

Edit src/environments/environment.development.ts:

export const environment = {
  production: false,
  apiUrl: 'https://localhost:7053',
  meiliUrl: 'http://localhost:7700',
  meiliApiKey: 'secret-key'
};

---

4. Run the development server

ng serve

Navigate to:

http://localhost:4200

---