Angular-10 - ShoppingCart + MDBootstrap + Firebase (Realtime Database) + i18n

Developing a ShoppingCart (Ecommerce) Application using Angular-10.

Live Demo : Angular-shopping-cart

This project was generated with 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

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

2. NodeJs

   • Download Nodejs

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

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

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.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

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 file for details