ahmedhafezz111/ng-ecommerce

How ahmedhafezz111/ng-ecommerce works

ng-Ecommerce is an Angular storefront. Users enter through routed authentication or shopping pages; the shopping flow covers product and category discovery, product details, cart and wishlist management, and checkout. Page components call domain services, which make HTTP requests to the ecommerce API; auth, cart and wishlist also maintain client-side state. Routing and HTTP interceptors provide supporting application layers. The README gives no further capability detail, and unsampled components are represented only where the source index or routes document them.

Main entry points: app.routes.ts Route table · home.component.ts Catalog pages · cart.service.ts Cart service · products.component.ts Product listing

Components 29

Application shell

Route table src/app/app.routes.ts
Page layouts src/app/layouts
App shell src/app/app.component.ts
HTTP configuration src/app/app.config.ts
HTTP interceptors src/app/core/interceptors

Identity and access

Route guards src/app/core/guards
Sign-in pages src/app/pages/login/login.component.ts
Authentication src/app/core/services/auth/auth.service.ts

Catalog browsing

Catalog pages src/app/pages/home/home.component.ts
Product listing src/app/pages/products/products.component.ts
Product details src/app/pages/details/details.component.ts
Category browsing src/app/pages/categories/categories.component.ts
Brand browsing src/app/pages/brands/brands.component.ts
Product service src/app/core/services/products/products.service.ts
Category service src/app/core/services/categories/categories.service.ts
Brand service src/app/core/services/brands/brands.service.ts

Shopping and checkout

Cart page src/app/pages/cart/cart.component.ts
Wishlist page src/app/pages/wishlist/wishlist.component.ts
Checkout page src/app/pages/checkout/checkout.component.ts
Cart service src/app/core/services/cart/cart.service.ts
Wishlist service src/app/core/services/wishlist/wishlist.service.ts
Orders service src/app/core/services/orders/orders.service.ts

Shared presentation

Navigation bar src/app/layouts/navbar/navbar.component.ts
Footer src/app/layouts/footer/footer.component.ts
Search filter src/app/shared/pipes/search/search.pipe.ts
Text formatting src/app/shared/pipes/termtext/termtext.pipe.ts
Sale formatting src/app/shared/pipes/sale/sale.pipe.ts

Other components

Shopper
Ecommerce API

Connections 46

Shopper → Route table: navigates src/app/app.routes.ts
Route table → Page layouts: selects layout src/app/app.routes.ts
Route table → Route guards: checks access src/app/app.routes.ts
Route table → Sign-in pages: routes to src/app/app.routes.ts
Route table → Catalog pages: routes to src/app/app.routes.ts
Route table → Product listing: routes to src/app/app.routes.ts
Route table → Product details: routes to src/app/app.routes.ts
Route table → Category browsing: routes to src/app/app.routes.ts
Route table → Brand browsing: routes to src/app/app.routes.ts
Route table → Cart page: routes to src/app/app.routes.ts
Route table → Wishlist page: routes to src/app/app.routes.ts
Route table → Checkout page: routes to src/app/app.routes.ts
Sign-in pages → Authentication: submits credentials src/app/pages/login/login.component.ts
Authentication → Ecommerce API: sends auth requests src/app/core/services/auth/auth.service.ts
Catalog pages → Product service: loads products src/app/pages/home/home.component.ts
Catalog pages → Category service: loads categories src/app/pages/home/home.component.ts
Catalog pages → Cart service: adds cart items src/app/pages/home/home.component.ts
Catalog pages → Wishlist service: manages wishlist src/app/pages/home/home.component.ts
Product listing → Product service: loads products src/app/pages/products/products.component.ts
Product listing → Cart service: adds cart items src/app/pages/products/products.component.ts
Product listing → Wishlist service: manages wishlist src/app/pages/products/products.component.ts
Product details → Product service: loads product src/app/pages/details/details.component.ts
Product details → Cart service: updates cart src/app/pages/details/details.component.ts
Product details → Wishlist service: updates wishlist src/app/pages/details/details.component.ts
Category browsing → Category service: loads categories src/app/pages/categories/categories.component.ts
Brand browsing → Brand service: loads brands src/app/pages/brands/brands.component.ts
Cart page → Cart service: manages cart src/app/pages/cart/cart.component.ts
Wishlist page → Wishlist service: loads wishlist src/app/pages/wishlist/wishlist.component.ts
Wishlist page → Cart service: moves to cart src/app/pages/wishlist/wishlist.component.ts
Checkout page → Orders service: submits order src/app/pages/checkout/checkout.component.ts
Product service → Ecommerce API: requests products src/app/core/services/products/products.service.ts
Category service → Ecommerce API: requests categories src/app/core/services/categories/categories.service.ts
Brand service → Ecommerce API: requests brands src/app/core/services/brands/brands.service.ts
Cart service → Ecommerce API: manages cart data src/app/core/services/cart/cart.service.ts
Wishlist service → Ecommerce API: manages wishlist data src/app/core/services/wishlist/wishlist.service.ts
Orders service → Ecommerce API: submits orders src/app/core/services/orders/orders.service.ts
HTTP configuration → HTTP interceptors: registers src/app/app.config.ts
Page layouts → Navigation bar: renders src/app/layouts/auth-layout/auth-layout.component.ts
Page layouts → Footer: renders src/app/layouts/auth-layout/auth-layout.component.ts
Navigation bar → Authentication: uses identity src/app/layouts/navbar/navbar.component.ts
Navigation bar → Cart service: reads cart state src/app/layouts/navbar/navbar.component.ts
Catalog pages → Search filter: filters products src/app/pages/home/home.component.ts
Catalog pages → Text formatting: formats text src/app/pages/home/home.component.ts
Catalog pages → Sale formatting: formats sale src/app/pages/home/home.component.ts
Product listing → Search filter: filters products src/app/pages/products/products.component.ts
Product listing → Text formatting: formats text src/app/pages/products/products.component.ts

Drawn by GitDiagram on November 13, 2026 from the repository's file tree, README and source files. Read as Markdown ·