Awesome Open Source
Awesome Open Source

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

HitCount GitHub forks GitHub stars GitHub issues License: MIT npm Twitter

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

Live Demo : Angular-shopping-cart

This project was generated with Angular CLI version 10.0.1.


  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.
  1. Drag and Drop Angular Drag & Drop
  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..


  1. Angular CLI

  2. 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": {
        ".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. For Admin Role Register or SignIn with Google Auth

    your registered data will be saved inside the firebase clients table.

                -createdOn: "1542046725"
                -email: "<<YOUR_REGISTERED_EMAIL_ID>>"
                -isAdmin: false      <--- Change this to true

    Now you can able to access the Admin Privileges like Creating Product, Removing Product, etc..

  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 ๐Ÿ› 


Home Page:

Alt text

Products Page:

Alt text

Work Board Page:

Alt text

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.


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


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

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (11,641)ย 
angular (1,313)ย 
firebase (491)ย 
pwa (343)ย 
ecommerce (224)ย 
i18n (223)ย 
drag-and-drop (135)ย 
progressive-web-app (125)ย 
shopping-cart (72)ย 
angular7 (68)ย 
firebase-database (63)ย 
angular6 (57)ย 
angular9 (39)ย 
firebase-authentication (35)ย 
angular10 (27)ย