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
            ...

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

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

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

briangor/Angular-ShoppingCart