Angular-9 - FT Symbol Shop + MDBootstrap + Firebase (Realtime Database) + i18n

Developing a NFT Symbol Shop (Ecommerce) Application using Angular-9.

Live Demo : NFT Symbol Shop

This project was generated with Angular CLI version 9.1.3.

Tutorial how it works NFT Symbol info.pptx

In the root we can use private key as qr code

prKeyExample.png

For testing the app or use own. In the file only qr code of the private key in the page https://spreadzp.github.io/symbol-ecommerce/users you can use Symbol address

TDNS2KQNITF5DZGA3FXONKGVU6YBXEWKTOUGXQY

or past own address to input

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

10. Run the Server.

Deploy GitHub Pages

npm run deploy-gp

Screenshots:

convert -delay 100 -loop 0 *.png animation.mpeg

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