🛒 Angular E-commerce Demo

Project Goal: A simple front-end e-commerce application built with the Angular framework for listing products and managing cart functionality.

📌 Features Product Listing (/products page)

Display product image, name, price, available quantity, and minimum order quantity.

Add to cart with different quantities, respecting minOrderAmount.

When added, the availableAmount decreases automatically.

Cannot order more than the available stock.

Cart Page (/cart page)

Display cart contents with product quantities.

Calculate total quantity and price.

Remove products from the cart and restore their availability.

General

Responsive design for all screen sizes.

Clean, reusable code using Angular 20 syntax.

Modern SCSS variables and typography system (Urbanist font, spacing and color scale).

📦 Tech Stack

Angular 20 (standalone components, signals, computed)

TypeScript 5

SCSS (variables, BEM-style class naming)

API: https://63c10327716562671870f959.mockapi.io/products

State management: Signals (ProductStore, CartStore)

⚡ Usage / Installation Clone the Project git clone cd angular-ecommerce-demo

Start the Application ng serve

🧩 State Management ProductStore

Handles product listing from the API.

Main functions: loadProducts(), decrementProductAmount()

CartStore

Stores cart state, handles quantity and total calculations.

Main functions: addToCart(), updateQuantity(), removeFromCart(), clearCart()

📐 Styling

SCSS variables (variables.scss)

Color system, spacing scale, typography, font-family

BEM naming convention for components

Responsive grid in all lists (auto-fit + minmax)

✅ Remaining / To-Do

Unit and e2e tests (Jest/Karma + Cypress)

Detailed documentation of functionalities