Giter VIP home page Giter VIP logo

jijiben / angular-shoppingcart Goto Github PK

View Code? Open in Web Editor NEW

This project forked from ikismail/angular-shoppingcart

0.0 2.0 0.0 5.53 MB

ShoppingCart (Ecommerce) πŸ›’ Application using Angular7, Firebase, PWA, Materialized Bootstrap and i18n πŸš€πŸ”₯πŸ‘¨β€πŸ’»

Home Page: https://angular-shoppingcart.firebaseapp.com/

License: MIT License

JavaScript 1.39% TypeScript 50.87% Shell 0.09% HTML 37.03% CSS 10.62%

angular-shoppingcart's Introduction

Angular7 - ShoppingCart + MDBootstrap + Firebase + i18n

HitCount License: MIT npm

Developing a ShoppingCart (Ecommerce) Application using Angular7.

Live Demo : Angular-shopping-cart

This project was generated with Angular CLI version 7.0.3.

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.
  1. Security
  • Implmented Authentication and Authorization

Tools and Technologies

  • Technology: HTML, MDBootstrap, CSS, Angular-7, Firebase, i18n, Charts, Progressive Web Application, jsPDF (to download Receipt as PDF).
  • Database : Angular Firebase.

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

  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 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. Run the Server.

Screenshots:

Home Page:

Alt text

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

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.

Contribution:

  • Contibutors are most welcome.

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

angular-shoppingcart's People

Contributors

ikismail avatar angular-cli avatar

Watchers

James Cloos avatar jihane benkoulouch avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.