Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shiv-source/flipkart-clone-ngrx-angular-16
Flipkart clone with ngrx in angular 16
https://github.com/shiv-source/flipkart-clone-ngrx-angular-16
angular-16 dynamic-components dynamic-forms ecommerce flipkart flipkart-clone ngrx
Last synced: 17 days ago
JSON representation
Flipkart clone with ngrx in angular 16
- Host: GitHub
- URL: https://github.com/shiv-source/flipkart-clone-ngrx-angular-16
- Owner: shiv-source
- License: mit
- Created: 2024-09-11T14:14:25.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-09-13T19:23:24.000Z (4 months ago)
- Last Synced: 2024-09-15T02:26:04.975Z (4 months ago)
- Topics: angular-16, dynamic-components, dynamic-forms, ecommerce, flipkart, flipkart-clone, ngrx
- Language: TypeScript
- Homepage: https://flipkart.shivkumar.me
- Size: 498 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```bash
git clone https://github.com/shiv-source/flipkart-clone-ngrx-angular-16.git
cd flipkart-clone-ngrx-angular-16
```
2. Install dependencies:
```bash
pnpm install
```
3. Start the development server:
```bash
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](https://flipkart.shivkumar.me)
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Contact
Shiv Kumar - [[email protected]](mailto:[email protected])
Project Link: [https://github.com/shiv-source/flipkart-clone-ngrx-angular-16](https://github.com/shiv-source/flipkart-clone-ngrx-angular-16)