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

User Registration using Firebase Authentication (using Email/Password | Google Authentication )
CRUD Operations like

User can add product to his cart.
Admin can add product to the product list
Admin can edit/delete the product.

Drag and Drop Angular Drag & Drop

Implemented Angular Drag and Drop CDK

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

Angular CLI
- Download Angular CLI
NodeJs
- Download Nodejs
Package Manager – NPM / Yarn
Clone the repository and run npm install if you use npm as package manager or yarn install if you use yarn as package manager.
Angular + Firebase Tutorial – Angular + Firebase + Typescript — Step by step tutorial
Activate Firebase Authentication Providers
Authentication -> Sign-in-method -> Enable Email/Password & Google provider
Update the Firebase (Realtime Database) Rules
Database -> Rules
```
{
"rules": {
    ".read":true,
    ".write": true
}
}
```

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"
};

For Admin Role Register or SignIn with Google Auth
your registered data will be saved inside the firebase clients table.

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

<p>
  Now you can able to access the Admin Privileges like <code>Creating Product, Removing Product, etc..</code> </li> 
  
  <li>
    Run the Server.
  </li></ol> 
  
  <h2 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-how-can-i-support-the-developer-" class="anchor" aria-hidden="true" href="#how-can-i-support-the-developer-"></a>How can I support the developer ?
  </h2>
  
  <ul dir="auto">
    <li>
      Star my Github repo ⭐
    </li>
    <li>
      Create pull requests, submit bugs, suggest new features or documentation updates 🛠
    </li>
  </ul>
  
  <h2 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-screenshots" class="anchor" aria-hidden="true" href="#screenshots"></a>Screenshots:
  </h2>
  
  <h3 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-home-page" class="anchor" aria-hidden="true" href="#home-page"></a>Home Page:
  </h3>
  
  <h3 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-products-page" class="anchor" aria-hidden="true" href="#products-page"></a>Products Page:
  </h3>
  
  <h3 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-work-board-page" class="anchor" aria-hidden="true" href="#work-board-page"></a>Work Board Page:
  </h3>
  
  <h2 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-development-server" class="anchor" aria-hidden="true" href="#development-server"></a>Development server
  </h2>
  
  <p>
    Run <code>ng serve</code> for a dev server. Navigate to <code>http://localhost:4200/</code>. The app will automatically reload if you change any of the source files.
  </p>
  
  <h2 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-code-scaffolding" class="anchor" aria-hidden="true" href="#code-scaffolding"></a>Code scaffolding
  </h2>
  
  <p>
    Run <code>ng generate component component-name</code> to generate a new component. You can also use <code>ng generate directive|pipe|service|class|guard|interface|enum|module</code>.
  </p>
  
  <h2 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-build" class="anchor" aria-hidden="true" href="#build"></a>Build
  </h2>
  
  <p>
    Run <code>ng build</code> to build the project. The build artifacts will be stored in the <code>dist/</code> directory. Use the <code>-prod</code> flag for a production build.
  </p>
  
  <h2 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-running-unit-tests" class="anchor" aria-hidden="true" href="#running-unit-tests"></a>Running unit tests
  </h2>
  
  <p>
    Run <code>ng test</code> to execute the unit tests via <a rel="nofollow noopener" target="_blank" href="https://karma-runner.github.io">Karma</a>.
  </p>
  
  <h2 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-running-end-to-end-tests" class="anchor" aria-hidden="true" href="#running-end-to-end-tests"></a>Running end-to-end tests
  </h2>
  
  <p>
    Run <code>ng e2e</code> to execute the end-to-end tests via <a rel="nofollow noopener" target="_blank" href="http://www.protractortest.org/">Protractor</a>.
  </p>
  
  <h2 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-further-help" class="anchor" aria-hidden="true" href="#further-help"></a>Further help
  </h2>
  
  <p>
    To get more help on the Angular CLI use <code>ng help</code> or go check out the Angular CLI README.
  </p>
  
  <h2 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-somethings-wrong" class="anchor" aria-hidden="true" href="#somethings-wrong"></a>Somethings wrong!!
  </h2>
  
  <ul dir="auto">
    <li>
      If you find that something&#8217;s wrong with this package, you can let me know by raising an issue on the GitHub issue tracker
    </li>
  </ul>
  
  <h2 dir="auto">
    <a rel="nofollow noopener" target="_blank" id="user-content-license" class="anchor" aria-hidden="true" href="#license"></a>License
  </h2>
  
  <p>
    This project is licensed under the MIT License &#8211; see the MIT license file for details<br />
  </p>