Giter VIP home page Giter VIP logo

ngx-shop's Introduction

NgxShop

A Food shop app built with Angular and Firebase. This project is for learning purpose only. Demo: https://ngx-shop.web.app

This project is based on the final project of The Complete Angular Course Beginner to Advanced course with updated features and libraries.

Getting started

1. Clone this project to your local machine

  • Run the command git clone https://github.com/nhaancs/ngx-shop.git

2. Setup Firebase configs, realtime database and authentication

  • Create a Firebase project in Firebase console
  • Add a new web app for this project
  • Inside the web app you will find the firebase configs. For example:
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};
  • Copy the config values to src/environments/firebase-configs.sample.ts file and rename this file to firebase-configs.ts
  • In Firebase console, create a Realtime Database in test mode.
  • In Firebase console, choose Authentication and enable Google provider so we can login with Google account in the app

3. Run the project

  • Run the command npm install
  • Then run ng serve
  • Open the browser at http://localhost:4200 and login with your Google account
  • At this time you can browse arround the app as a normal user, but there are no data available yet

4. Manually set admin role

  • Go to the Realtime Database section in Firebase console
  • Under the node users will have 1 user that is the account that you just logged in. Under this user node, add the child node isAdmin with value true
  • Now go back to the browser and you are now admin. You can add more categories, products and manage orders.

Still have questions?

For any futher questions, just creat a new issue. Thank you.

ngx-shop's People

Watchers

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