Full-Stack Angular E-Commerce Application
Final Project for Route Academy - Frontend Angular Developer Course
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.
- ⚡ 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
| 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 |
- 🎨 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
- 🌍 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
📦 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
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
-
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.
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
