E-Commerce Angular Store

Fashion Clothing Store · Angular 18 · TailwindCSS + Bootstrap 5

A modern, responsive fashion clothing e-commerce storefront built with Angular 18 standalone components. Browse clothing for Men, Women, and Kids across Shirts, T-Shirts, Pants, and Shoes — with an auto-sliding ad carousel, product detail pages, cart functionality, and a polished UI.

🚀 Quick Start · 🐛 Report Bug · 💡 Request Feature

📑 Table of Contents

Click to expand

Highlights
Architecture Overview
Project Structure
Tech Stack
Features in Detail
Quick Start
Component Map
Routing
Roadmap
Contributing
License
Author

⚡ Highlights

🛍️ 3 Category Sections Complete product catalogs for Men, Women, and Kids — each with 4 subcategories: Shirts, T-Shirts, Pants, and Shoes. That's 12 product listing pages in total.	🎠 Auto-Sliding Ad Carousel Home page hero carousel with 3-second auto-advance, next/prev navigation, dot indicators, and hover-to-pause — all built with pure TypeScript, no external carousel library.
🛒 Shopping Cart Service Injectable `CartService` with `addToCart()`, `getCart()`, and `clearCart()` methods. Cart state is managed in-memory and accessible from any component.	📱 Responsive Design Dual CSS framework approach: TailwindCSS for utility-first styling + Bootstrap 5 for responsive grid and component classes. Hamburger menu for mobile navigation.
🧱 Standalone Components Built with Angular 18's modern standalone component architecture — no NgModules required. Each component declares its own imports for maximum encapsulation.	🔍 Product Details Dedicated product detail page with image display, description, pricing, Add to Cart button, and Buy Now action — navigated via route parameter `/product-list/:id`.
📸 200+ Product Images Full product image library organized by category: `men/men-shirts/`, `women/women-pants/`, `kids/kids-shoes/`, etc. — real fashion photography, not placeholders.	🏠 Featured Products Home page showcases 12 featured products in a grid with product cards displaying image, name, and price — each linking to its detail page via `viewDetails(productId)`.

🏛 Architecture Overview

The application uses Angular 18 Standalone Components with a flat component-based architecture:

┌─────────────────────────────────────────────────────────────┐
│                          APP SHELL                          │
│  AppComponent (navbar + router-outlet + footer)             │
│  ┌─────────────┐  ┌──────────────────────┐  ┌───────────┐  │
│  │   Navbar    │  │    <router-outlet>    │  │  Footer   │  │
│  │  Component  │  │                      │  │ Component │  │
│  └─────────────┘  │  ┌────────────────┐  │  └───────────┘  │
│                   │  │  HomeComponent │  │                  │
│                   │  │  Ad Carousel   │  │                  │
│                   │  │  Product Grid  │  │                  │
│                   │  └────────────────┘  │                  │
│                   │  ┌────────────────┐  │                  │
│                   │  │  Categories    │  │                  │
│                   │  │  Men / Women   │  │                  │
│                   │  │  / Kids Grid   │  │                  │
│                   │  └────────────────┘  │                  │
│                   │  ┌────────────────┐  │                  │
│                   │  │ ProductDetails │  │                  │
│                   │  │ + CartService  │  │                  │
│                   │  └────────────────┘  │                  │
│                   └──────────────────────┘                  │
└─────────────────────────────────────────────────────────────┘

Service Layer

Service	Scope	Methods	Description
`CartService`	`providedIn: 'root'`	`addToCart(product)`, `getCart()`, `clearCart()`	Global singleton managing the shopping cart state in-memory

📁 Project Structure

ecommerce-angular-store/
│
├── src/
│   ├── app/
│   │   ├── app.component.ts/html/css        # Root shell — navbar, carousel, footer, router-outlet
│   │   ├── app.routes.ts                    # Route definitions (16 routes)
│   │   ├── app.config.ts                    # App configuration + providers
│   │   ├── cart.service.ts                  # Global CartService (add/get/clear)
│   │   ├── routes.ts                        # Secondary routes file
│   │   │
│   │   ├── 🏠 home/                         # Home page
│   │   │   └── home.component.ts/html/css   # Featured products grid + ad slider + Special Offers
│   │   │
│   │   ├── 📂 Categories/                   # Category hub
│   │   │   └── Categories.component.ts/html # Category cards: Men / Women / Kids × Shirts/T-shirts/Pants/Shoes
│   │   │
│   │   ├── 🔍 product-details/              # Product detail page
│   │   │   └── product-details.component.*  # Image, description, price, Add to Cart, Buy Now
│   │   │
│   │   ├── ℹ️ about/                         # About Us page
│   │   │   └── about.component.ts/html      # Company info with images
│   │   │
│   │   ├── 🧭 navbar/                       # Navbar component
│   │   │   └── navbar.component.ts/html/css # Responsive nav with hamburger menu
│   │   │
│   │   ├── 📢 ad-slider/                    # Ad slider component
│   │   │   └── ad-slider.component.*        # Carousel sub-component
│   │   │
│   │   ├── 🦶 footer/                       # Footer component
│   │   │   └── footer.component.ts/html     # Quick Links, Services, Social Media
│   │   │
│   │   ├── 👔 men/                           # Men's product pages
│   │   │   ├── MenShirts/                   # 20 shirts with hardcoded product data
│   │   │   ├── men-tshirt/                  # T-shirts collection
│   │   │   ├── men-pants/                   # Pants collection (16 products)
│   │   │   └── men-shoes/                   # Shoes collection (18 products)
│   │   │
│   │   ├── 👗 women/                         # Women's product pages
│   │   │   ├── women-shirts/                # 19 shirts
│   │   │   ├── women-tshirts/               # T-shirts collection
│   │   │   ├── women-pants/                 # Pants collection (13 products)
│   │   │   └── women-shoes/                 # Shoes collection (9 products)
│   │   │
│   │   └── 👶 kids/                          # Kids' product pages
│   │       ├── kids-shirts/                 # 16 shirts
│   │       ├── kids-tshirts/                # T-shirts collection (10 products)
│   │       ├── kids-pants/                  # Pants collection (8 products)
│   │       └── kids-shoes/                  # Shoes collection (8 products)
│   │
│   ├── assets/
│   │   └── images/                          # 200+ product photos
│   │       ├── men/                         # men-shirts/, men-pants/, men-shoes/, men-t-shirt/
│   │       ├── women/                       # women-shirts/, women-pants/, women-shoes/, women-t-shirt/
│   │       ├── kids/                        # kids-shirts/, kids-pants/, kids-shoes/, kids-t-shirts/
│   │       ├── ad1.jpg, ad2.jpg, ad4.jpg    # Carousel ad banners
│   │       ├── logo.jpg                     # Store logo
│   │       └── aboutUs.jpeg, aboutUs2.jpg   # About page images
│   │
│   ├── index.html                           # Entry HTML
│   ├── main.ts                              # Bootstrap standalone AppComponent
│   └── styles.css                           # Global CSS imports (Tailwind directives)
│
├── angular.json                             # Angular CLI workspace config
├── package.json                             # Dependencies (Angular 18 + Tailwind + Bootstrap)
├── tailwind.config.js                       # TailwindCSS config
├── postcss.config.js                        # PostCSS with Tailwind + Autoprefixer
├── tsconfig.json                            # TypeScript compiler config
├── eslint.config.mjs                        # ESLint flat config
└── .gitignore

🛠️ Tech Stack

Category	Technology	Version	Purpose
Framework	Angular	18.2	Component-based SPA framework
Language	TypeScript	5.5	Type-safe JavaScript
Styling	TailwindCSS	3.4	Utility-first CSS framework
UI Library	Bootstrap	5.3	Responsive grid + components
Routing	@angular/router	18.2	Client-side navigation
Reactive	RxJS	7.8	Observable-based data streams
PostCSS	PostCSS + Autoprefixer	8.4	CSS processing pipeline
Tooltips	@popperjs/core	2.11	Bootstrap tooltip positioning
Linting	ESLint + typescript-eslint	9.11	Code quality enforcement
Testing	Karma + Jasmine	6.4 / 5.2	Unit testing framework
Build	Angular CLI	18.2.3	Dev server, build, scaffolding

🎯 Features in Detail

🏠 Home Page

Hero Ad Carousel — 3 promotional banners with auto-slide (3s interval), prev/next arrows, dot indicators
Special Offers section
Featured Products Grid — 12 product cards with image, name, price, and "View Details" click navigation
Responsive layout adapting to mobile/tablet/desktop

📂 Category Navigation

Category Hub — Visual grid with Men, Women, and Kids sections
Each section shows 4 subcategory links: Shirts, T-Shirts, Pants, Shoes
Animated category cards with hover effects

👔👗👶 Product Listing Pages (12 pages)

Each of the 12 product pages features:

Hardcoded product arrays with id, name, price, imageUrl, and description
Product cards in a responsive grid layout
Hover effects on product images
Sorting/filtering by price (ascending/descending/default)
Click-to-view product details

Category	Shirts	T-Shirts	Pants	Shoes
Men	20 products	11 products	16 products	18 products
Women	19 products	14 products	13 products	9 products
Kids	16 products	10 products	8 products	8 products

🔍 Product Details

Full-page product view with large image display
Product name, description, and formatted price
Add to Cart button → triggers CartService.addToCart() with confirmation alert
Buy Now button → navigates to checkout flow
404 redirect for invalid product IDs

🛒 CartService

@Injectable({ providedIn: 'root' })
export class CartService {
  private cart: Product[] = [];
  addToCart(product: Product): void   // Push product into cart
  getCart(): Product[]                // Return all cart items
  clearCart(): void                   // Empty the cart
}

🧭 Navigation

Desktop: Horizontal navbar with Home, Categories, About, Contact links
Mobile: Hamburger toggle menu with animated show/hide (isMenuOpen state)
Active route highlighting with RouterLinkActive

🦶 Footer

Three-column layout: Company Description, Quick Links, Services
Social media links: Facebook, Twitter, Instagram
Clean layout with consistent brand styling

🚀 Quick Start

Prerequisites

Requirement	Minimum Version	Download
Node.js	18.x	nodejs.org
npm	9.x	Bundled with Node.js
Angular CLI	18.x	`npm install -g @angular/cli`

Step-by-Step Setup

# 1. Clone the repository
git clone https://github.com/Jaser1010/ecommerce-angular-store.git
cd ecommerce-angular-store

# 2. Install dependencies
npm install

# 3. Start development server
ng serve
# or
npm start

# 4. Open in browser
# Navigate to http://localhost:4200

💡 Tip: The app auto-reloads when you modify source files.

Other Commands

# Run unit tests
ng test

# Build for production
ng build

# Lint code
ng lint

🗺️ Component Map

graph TD
    A[AppComponent] --> B[NavbarComponent]
    A --> C[RouterOutlet]
    A --> D[FooterComponent]
    
    C --> E[HomeComponent]
    C --> F[CategoriesComponent]
    C --> G[ProductDetailsComponent]
    C --> H[AboutComponent]
    
    F --> I[MenShirtsComponent]
    F --> J[MenTshirtComponent]
    F --> K[MenPantsComponent]
    F --> L[MenShoesComponent]
    
    F --> M[WomenShirtsComponent]
    F --> N[WomenTshirtsComponent]
    F --> O[WomenPantsComponent]
    F --> P[WomenShoesComponent]
    
    F --> Q[KidsShirtsComponent]
    F --> R[KidsTshirtsComponent]
    F --> S[KidsPantsComponent]
    F --> T[KidsShoesComponent]
    
    G --> U[CartService]
    
    style A fill:#DD0031,color:white
    style U fill:#3178C6,color:white

🛤️ Routing

Path	Component	Description
`/`	`HomeComponent`	Landing page with carousel + featured products
`/Home`	`HomeComponent`	Alias for home
`/Categories`	`CategoriesComponent`	Category hub with Men/Women/Kids
`/Categories/MenShirts`	`MenShirtsComponent`	Men's shirts catalog
`/Categories/MenTshirt`	`MenTshirtComponent`	Men's t-shirts catalog
`/Categories/MenPants`	`MenPantsComponent`	Men's pants catalog
`/Categories/MenShoes`	`MenShoesComponent`	Men's shoes catalog
`/Categories/WomenShirts`	`WomenShirtsComponent`	Women's shirts catalog
`/Categories/WomenTshirts`	`WomenTshirtsComponent`	Women's t-shirts catalog
`/Categories/WomenPants`	`WomenPantsComponent`	Women's pants catalog
`/Categories/WomenShoes`	`WomenShoesComponent`	Women's shoes catalog
`/Categories/KidsShirts`	`KidsShirtsComponent`	Kids' shirts catalog
`/Categories/KidsTshirts`	`KidsTshirtsComponent`	Kids' t-shirts catalog
`/Categories/KidsPants`	`KidsPantsComponent`	Kids' pants catalog
`/Categories/KidsShoes`	`KidsShoesComponent`	Kids' shoes catalog
`/product-list/:id`	`ProductDetailsComponent`	Product detail page
`/about`	`AboutComponent`	About the store

🗺️ Roadmap

✅ Completed

🔜 Coming Soon

🔐 User Authentication — Login/Register with JWT or Firebase Auth
💳 Checkout Flow — Complete checkout with payment integration (Stripe/PayPal)
🛒 Cart Page — Dedicated cart page with quantity adjustment and total calculation
🔎 Search & Filter — Global product search with advanced filtering (size, color, price range)
🗄️ Backend API — Connect to a real REST API instead of hardcoded product data
❤️ Wishlist — Save favorite products for later
📱 PWA Support — Progressive Web App for offline browsing
🧪 E2E Tests — Cypress or Playwright end-to-end testing
🐳 Docker — Containerized deployment

🤝 Contributing

Contributions are welcome! Fork the repo, create a feature branch, and submit a Pull Request.

git checkout -b feature/amazing-feature
git commit -m "feat: add amazing feature"
git push origin feature/amazing-feature

📄 License

Distributed under the MIT License.

👤 Author

Jaser Kasim
_{Software Engineer}

If you found this project helpful, consider giving it a ⭐

Built with ❤️ using Angular 18 and TypeScript

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
src		src
.editorconfig		.editorconfig
.gitignore		.gitignore
README.md		README.md
angular.json		angular.json
eslint.config.mjs		eslint.config.mjs
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.spec.json		tsconfig.spec.json

Jaser1010/ecommerce-angular-store

Folders and files

Latest commit

History

Repository files navigation

E-Commerce Angular Store

Fashion Clothing Store · Angular 18 · TailwindCSS + Bootstrap 5

📑 Table of Contents

⚡ Highlights

🏛 Architecture Overview

Service Layer

📁 Project Structure

🛠️ Tech Stack

🎯 Features in Detail

🏠 Home Page

📂 Category Navigation

👔👗👶 Product Listing Pages (12 pages)

🔍 Product Details

🛒 CartService

🧭 Navigation

🦶 Footer

🚀 Quick Start

Prerequisites

Step-by-Step Setup

Other Commands

🗺️ Component Map

🛤️ Routing

🗺️ Roadmap

✅ Completed

🔜 Coming Soon

🤝 Contributing

📄 License

👤 Author

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages