Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ikismail/angular-shoppingcart
ShoppingCart (Ecommerce) 🛒 Application using Angular10, Firebase, PWA, Drag&Drop, Materialized Bootstrap and i18n 🚀🔥👨💻
https://github.com/ikismail/angular-shoppingcart
angular angular-7 angular-shopping angular10 angular6 angular7 angular9 angularshoppingcart drag-and-drop ecommerce firebase firebase-authentication firebase-database i18n progressive-web-app pwa shopping-cart shopping-site shoppingstore
Last synced: 11 days ago
JSON representation
ShoppingCart (Ecommerce) 🛒 Application using Angular10, Firebase, PWA, Drag&Drop, Materialized Bootstrap and i18n 🚀🔥👨💻
- Host: GitHub
- URL: https://github.com/ikismail/angular-shoppingcart
- Owner: ikismail
- License: mit
- Created: 2017-12-11T11:55:51.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-03-22T12:41:38.000Z (8 months ago)
- Last Synced: 2024-10-13T02:18:14.033Z (about 1 month ago)
- Topics: angular, angular-7, angular-shopping, angular10, angular6, angular7, angular9, angularshoppingcart, drag-and-drop, ecommerce, firebase, firebase-authentication, firebase-database, i18n, progressive-web-app, pwa, shopping-cart, shopping-site, shoppingstore
- Language: TypeScript
- Homepage: https://angular-shoppingcart.firebaseapp.com/
- Size: 7.61 MB
- Stars: 619
- Watchers: 42
- Forks: 385
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Angular-10 - ShoppingCart + MDBootstrap + Firebase (Realtime Database) + i18n
[](http://hits.dwyl.io/ikismail/Angular-ShoppingCart)
[](https://github.com/ikismail/Angular-ShoppingCart/network) [](https://github.com/ikismail/Angular-ShoppingCart/stargazers)
[](https://github.com/ikismail/Angular-ShoppingCart/issues)
[](https://github.com/ikismail/Angular-ShoppingCart/blob/master/LICENSE)
[](https://angular-shoppingcart.firebaseapp.com/)
[](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Fikismail%2FAngular-ShoppingCart)
Developing a **ShoppingCart (Ecommerce) Application using Angular-10**.
**Live Demo** : [Angular-shopping-cart](https://angular-shoppingcart.firebaseapp.com/)
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.1.
## Functionalities
1. User Registration using Firebase Authentication (using Email/Password | Google Authentication )
2. CRUD Operations like
- User can add product to his cart.
- Admin can add product to the product list
- Admin can edit/delete the product.
3. Drag and Drop `Angular Drag & Drop`
- Implemented [Angular Drag and Drop CDK](https://material.angular.io/cdk/drag-drop/overview)
1. Security
- Implmented Authentication and Authorization
## Tools and Technologies
- Technology: HTML, MDBootstrap, CSS, Angular-10, Firebase, i18n, Drag & Drop, Progressive Web Application, jsPDF (to download Receipt as PDF).
- Database : Angular Firebase (Realtime Database).
#### This Projects covers all fundamentals of Angular
- Multiple Modules
- Components, Template and DataBinding
- Form Validation
- HttpClient
- Animations
- Dependency Injection
- Routing & Navigation
- Service Workers
- Pipes
- Gaurds etc..
# Installation
1. Angular CLI
- [Download Angular CLI](https://cli.angular.io/)
2. NodeJs
- [Download Nodejs](https://nodejs.org/en/download/)
3. Package Manager - NPM / Yarn
4. Clone the repository and run `npm install` if you use **npm** as package manager or `yarn install` if you use **yarn** as package manager.
5. Angular + Firebase Tutorial - [Angular + Firebase + Typescript — Step by step tutorial](https://medium.com/factory-mind/angular-firebase-typescript-step-by-step-tutorial-2ef887fc7d71)
6. Activate Firebase Authentication Providers
`Authentication -> Sign-in-method -> Enable Email/Password & Google provider`
7. Update the Firebase _(Realtime Database)_ Rules
`Database -> Rules`
```
{
"rules": {
".read":true,
".write": true
}
}
```
8. Configure your firebase configuration `src/environments/firebaseConfig.ts`
```
export const FireBaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
databaseURL: "YOUR_DATABASE_URL",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_SENDER_ID"
};
```
9. Import Products json to realtime database [Products JSON](https://github.com/ikismail/Angular-ShoppingCart/blob/master/products.json)
10. Run the Server.
## How can I support the developer ?
- Star my Github repo ⭐
- Create pull requests, submit bugs, suggest new features or documentation updates 🛠
## Screenshots:
### Home Page:
### Products Page:
### Work Board Page:
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
## Somethings wrong!!
- If you find that something's wrong with this package, you can let me know by raising an issue on the GitHub issue tracker
## License
This project is licensed under the MIT License - see the [MIT license](https://github.com/ikismail/Angular-ShoppingCart/blob/master/LICENSE) file for details