A modern, responsive, and fully-featured E-Commerce web application built with Angular 21. This project demonstrates a scalable architecture, standalone components, lazy loading, and modern web development best practices.
- 🔐 User Authentication: Secure login and registration functionality.
- 📦 Product Catalog: Browse products with detailed views.
- 🛒 Shopping Cart: Add, edit, and remove items from the cart seamlessly.
- 💳 Checkout Flow: Streamlined and secure checkout process.
- ⚡ Lazy Loading: Optimized performance with route-based lazy loading.
- 📱 Responsive Design: A beautiful, mobile-first UI experience.
- Framework: Angular 21.1.0
- Language: TypeScript
- Reactivity: RxJS
- Testing: Vitest for blazing-fast unit tests.
The project follows a feature-based scalable architecture:
src/
├── app/
│ ├── core/ # Singleton services, interceptors, and guards.
│ │ ├── guards/
│ │ ├── interceptors/
│ │ └── services/
│ ├── features/ # Feature modules (Lazy Loaded).
│ │ ├── auth/ # Login & Registration.
│ │ ├── cart/ # Shopping cart management.
│ │ ├── checkout/ # Checkout process.
│ │ ├── home/ # Landing page & dashboard.
│ │ └── products/ # Product catalog and details.
│ ├── layout/ # Shared UI layouts.
│ │ ├── footer/
│ │ └── header/
│ └── shared/ # Reusable UI components, pipes, and models.
│ ├── components/
│ ├── models/
│ ├── pipes/
│ └── product-card/
└── environments/ # Environment-specific configurations (dev vs prod).
Follow these instructions to set up the project locally.
Ensure you have the following installed:
- Node.js:
v24.xor higher - npm:
v11.xor higher (The project uses npm v11.6.2) - Angular CLI: Install globally via
npm install -g @angular/cli@21.1.0
-
Clone the repository:
git clone https://github.com/adsrikanth11/angular-ecommerce-app.git cd angular-ecommerce-app -
Install dependencies:
npm install
The application uses Angular environments to manage different configurations (like API endpoints) for development and production.
src/environments/environment.development.ts: Used for local development (ng serve).src/environments/environment.ts: Used for production (ng build).
Make sure to check or update the apiUrl in these files to point to your backend.
Run the development server sequentially:
npm start
# or
ng serveNavigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.
Compile the project for production:
npm run build
# or
ng buildThe build artifacts will be stored in the dist/ directory.
Execute unit tests utilizing the Vitest test runner:
npm test
# or
ng testContributions, issues, and feature requests are welcome! Feel free to check out the issues page.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open-source and available under the terms of the MIT License.
Generated and maintained with ❤️ by Srikanth Ambal Dhage