🛒 FreshCart - Modern E-Commerce Platform

Full-Stack Angular E-Commerce Application

Final Project for Route Academy - Frontend Angular Developer Course

📌 Overview

FreshCart is a production-ready e-commerce platform built with Angular 20, PrimeNG, and Tailwind CSS. The application delivers a complete shopping experience—from browsing products and managing wishlists to secure checkout with multiple payment methods—while showcasing enterprise-grade Angular development patterns including signal-based state management, comprehensive i18n with RTL support, dynamic theming, and optimized performance architecture.

Developed as the final project for Route Academy's Frontend Angular Developer course, FreshCart demonstrates real-world e-commerce functionality through standalone components, reactive programming, and a scalable feature-based architecture designed for production environments.

💫 Interface Preview

🛠️ Tech Stack

Frontend Framework

UI & Styling

State Management & Utilities

Development Tools

🛠️ Built With

⚡ Angular 20.3.0 - Modern reactive framework with standalone components and signals
🎨 PrimeNG 20.2.0 - Enterprise UI component library with 80+ components
💨 Tailwind CSS 4.1.13 - Utility-first CSS framework for rapid UI development
🌍 ngx-translate 17.0.0 - Internationalization library with multi-language support
📊 @ngrx/signals 20.0.1 - Signal-based state management for reactive stores
🔄 RxJS 7.8.0 - Reactive programming library for async operations

✨ Core Features

🛍️	Product Catalog Browse paginated products, advanced search with filters, product details with image gallery, category & brand filtering	🛒	Shopping Cart Add/remove/update items, guest cart with localStorage sync, persistent cart state, real-time badge updates
💳	Checkout Process Cash on delivery & Stripe payment, address selector with saved addresses, order confirmation pages	❤️	Wishlist Add/remove favorite products, guest wishlist support, sync on login, visual indicators in product cards
🔐	Authentication JWT-based auth with custom token header, login/register forms with validation, auth guards for protected routes	👤	User Profile Dashboard with stats, order history & details, address management, profile & password update
🌍	Internationalization English & Arabic (472+ translations), full RTL/LTR support, runtime language switching, PrimeNG i18n sync	🎨	Theme System 4 PrimeNG presets (Fresh, Premium, Vibrant, Natural), dark/light mode toggle, runtime theme switching
🏷️	Categories & Brands Category list with subcategories, brand showcase, dedicated detail pages, filter products by category/brand	📱	Responsive Design Mobile-first with breakpoints, PrimeNG MenuBar (desktop) & Drawer (mobile), Tailwind responsive utilities
⚡	Performance Lazy-loaded feature routes, OnPush change detection, signal-based stores, optimized with computed signals	🎯	State Management Signal stores for cart & wishlist, computed properties for derived state, guest state with localStorage persistence

🎨 Theme System

🎨 4 Custom PrimeNG Presets: Fresh (Teal) • Premium (Indigo) • Vibrant (Orange) • Natural (Emerald)
🌓 Dark/Light Mode: Each theme supports both color schemes
⚡ Real-time Switching: Instant theme changes without page reload
💾 Persistent Preferences: Automatically saves user's theme choice
🔄 RTL Compatible: Works seamlessly with Arabic layout

🌐 Internationalization

🌍 Bilingual Support: English (LTR) and Arabic العربية (RTL)
📝 472+ Translations: Comprehensive language coverage
⚡ Runtime Switching: Change language without page reload
🎯 Context-Aware: Dynamic translations based on application state
💾 Persistent Selection: Saves user's language preference

🏗️ Project Structure

📦 FreshCart
 ┣ 📂 src
 ┃ ┣ 📂 app
 ┃ ┃ ┣ 📂 core                    # Core functionality
 ┃ ┃ ┃ ┣ 📂 constants             # App-wide constants
 ┃ ┃ ┃ ┣ 📂 guards                # Route guards (auth, guest)
 ┃ ┃ ┃ ┣ 📂 interceptors          # HTTP interceptors
 ┃ ┃ ┃ ┣ 📂 layout                # Layout components (header, footer)
 ┃ ┃ ┃ ┣ 📂 models                # Core data models
 ┃ ┃ ┃ └ 📂 services              # Core services (API, theme, i18n)
 ┃ ┃ ┣ 📂 features                # Feature modules
 ┃ ┃ ┃ ┣ 📂 auth                  # Authentication
 ┃ ┃ ┃ ┣ 📂 products              # Product catalog
 ┃ ┃ ┃ ┣ 📂 cart                  # Shopping cart
 ┃ ┃ ┃ ┣ 📂 checkout              # Checkout process
 ┃ ┃ ┃ ┣ 📂 wishlist              # User wishlist
 ┃ ┃ ┃ ┣ 📂 categories            # Category browsing
 ┃ ┃ ┃ ┣ 📂 brands                # Brand browsing
 ┃ ┃ ┃ ┣ 📂 profile               # User profile
 ┃ ┃ ┃ └ 📂 home                  # Home page
 ┃ ┃ ┣ 📂 shared                  # Shared components & utilities
 ┃ ┃ ┃ ┣ 📂 components            # Reusable components
 ┃ ┃ ┃ ┣ 📂 pipes                 # Custom pipes
 ┃ ┃ ┃ ┣ 📂 validators            # Form validators
 ┃ ┃ ┃ └ 📂 utils                 # Utility functions
 ┃ ┃ ┣ 📂 theme                   # PrimeNG theme presets
 ┃ ┃ ┣ 📜 app.config.ts           # App configuration
 ┃ ┃ ┣ 📜 app.routes.ts           # Route configuration
 ┃ ┃ └ 📜 app.ts                  # Root component
 ┃ ┣ 📂 assets                    # Static assets
 ┃ ┣ 📂 environments              # Environment configs
 ┃ └ 📜 styles.scss               # Global styles
 ┣ 📂 public
 ┃ ┗ 📂 i18n                      # Translation files
 ┃   ┣ 📜 en.json                 # English translations
 ┃   └ 📜 ar.json                 # Arabic translations
 ┣ 📜 angular.json                # Angular CLI config
 ┣ 📜 package.json                # Dependencies
 ┣ 📜 tailwind.config.js          # Tailwind configuration
 └ 📜 tsconfig.json               # TypeScript config

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

Node.js: v18.0.0 or later
npm: v9.0.0 or later (comes with Node.js)
Angular CLI: v20.3.3 or later
```
npm install -g @angular/cli
```

Installation

Clone the repository

git clone https://github.com/MohamedV0/angular-ecommerce.git

Navigate to the project directory
```
cd angular-ecommerce
```
Install dependencies
```
npm install
```
Start the development server
```
npm start
# or
ng serve
```
Open your browser

Navigate to http://localhost:4200/

Note: The backend API is already configured and provided by Route Academy at https://ecommerce.routemisr.com/api/v1. No additional API configuration or keys are required.

🎓 Learning Outcomes

This project demonstrates proficiency in:

✅ Angular Framework - Advanced concepts and patterns
✅ TypeScript - Strong typing and modern features
✅ State Management - Signals and RxJS
✅ Component Design - Reusable, composable architecture
✅ Responsive Design - Mobile-first approach
✅ Internationalization - Multi-language support
✅ Theming - Advanced customization
✅ API Integration - RESTful services
✅ Form Handling - Reactive forms with validation
✅ Routing - Lazy loading and guards
✅ Performance - Optimization techniques
✅ Accessibility - WCAG compliance

Developed by Mohamed Ashraf as part of Route Academy - Frontend Angular Developer Course

Name		Name	Last commit message	Last commit date
Latest commit History 64 Commits
.vscode		.vscode
Docs/ui-screenshots		Docs/ui-screenshots
public		public
src		src
.editorconfig		.editorconfig
.gitignore		.gitignore
.postcssrc.json		.postcssrc.json
README.md		README.md
angular.json		angular.json
package-lock.json		package-lock.json
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.spec.json		tsconfig.spec.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

🛒 FreshCart - Modern E-Commerce Platform

📌 Overview

💫 Interface Preview