ShopSystem (Lab04 Shopping Cart)

An Angular (v19) shopping cart / mini shop system with authentication, role-based access (Admin), and a cart flow. UI uses Bootstrap 5.

Project name in code: lab04-shopping-cart
Angular CLI: 19.1.6

---

Features

• Authentication

  • Default users:
    • Admin: admin / admin
    • User: user / user
  • Users are stored in localStorage.
  • Current session is stored in localStorage (currentUser).

• Role-based routing

  • /admin is protected and only accessible by the admin user.
  • /home is protected and accessible by authenticated users.

• Shopping cart

  • Product listing (example products)
  • Add product to cart
  • Increase/decrease quantity, remove items
  • Purchase checks the current user's balance

---

Tech Stack

• Angular 19
• TypeScript
• RxJS
• Bootstrap 5

---

Getting Started

1) Install dependencies

npm install

2) Run the app (development)

npm start
# or
ng serve

Then open:

• http://localhost:4200/

---

Useful Scripts

From package.json:

npm start       # ng serve
npm run build   # ng build
npm run watch   # ng build --watch --configuration development
npm test        # ng test

---

Routes

Defined in src/app/app-routing.module.ts:

• /login – Login page
• /signup – Signup page
• /home – Product list (requires login)
• /admin – Admin panel (requires admin)
• / – redirects to /login

---

Notes / Data Storage

This project uses localStorage for persistence:

• users: stored user list
• currentUser: current logged-in user

To reset the app state, clear the site storage in your browser (Application/Storage tab).

---

Build

npm run build

Build output:

• dist/lab04-shopping-cart

---

License

This repository is for educational/lab purposes. Add a license if you plan to distribute.