Flipkart Clone - Angular 16 + NgRx

A full-featured e-commerce web application built with Angular 16 and NgRx, inspired by Flipkart. This project demonstrates state management, component-based architecture, and reactive programming using Angular.

Features

• NgRx State Management: Handle global application state efficiently with NgRx.
• Angular Material UI: Clean and responsive user interface using Angular Material.
• Responsive Design: Mobile-first approach, ensuring optimal user experience across devices.
• Product Listing & Details: Dynamic product listings with detailed views.
• Shopping Cart: Add/remove products to/from the cart with real-time updates.
• Order Summary & Checkout: Integrated order summary and checkout process.
• Lazy Loading: Improved performance with lazy-loaded modules.
• Routing: Seamless navigation using Angular's routing module.

Tech Stack

• Angular 16
• NgRx for state management
• Tailwind CSS for styling
• Angular Material for UI components
• Owl Carousel for interactive product displays
• TypeScript for type-safe development

Installation

To get a local copy up and running, follow these steps.

Prerequisites

• Node.js v20.15.0
• pnpm v9.x
• Angular CLI 16.x

Installation Steps

1. Clone the repository:

   git clone https://github.com/shiv-source/flipkart-clone-ngrx-angular-16.git
   cd flipkart-clone-ngrx-angular-16

2. Install dependencies:

   pnpm install

3. Start the development server:

   pnpm start

   The app will be running at http://localhost:4200/.

Available Scripts

In the project directory, you can run:

• pnpm start: Runs the app in development mode. Open http://localhost:4200 to view it in your browser.
• pnpm build: Builds the app for production to the dist/ folder.
• pnpm watch: Watches files for changes and automatically rebuilds the project in development mode.
• pnpm test: Launches the test runner.
• pnpm prettier:check: Checks if all files follow the Prettier formatting rules.
• pnpm prettier:fix: Automatically fixes formatting issues based on Prettier rules.

Folder Structure

• src/ - This is where the Angular code resides.
  • app/ - Core application logic and components.
  • assets/ - Static assets such as images and styles.
  • environments/ - Configuration settings for different environments (development, production).

Contributing

Contributions are welcome! Feel free to fork the repository and submit pull requests.

Live Demo

Check out the live version of the project: Flipkart Clone

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contact

Shiv Kumar - hello@shivkumar.me

Project Link: https://github.com/shiv-source/flipkart-clone-ngrx-angular-16