Skip to content
This repository has been archived by the owner on Nov 12, 2022. It is now read-only.

Just a small demo to show how to use Angular + Firebase + Google Material Design together.

License

Notifications You must be signed in to change notification settings

tarlepp/angular-firebase-material-demo

Repository files navigation

Angular/Firebase/Material - Demo

MIT licensed Build Status codecov Dependency Status devDependency Status

Table of Contents

What is this

Just a small demo to show how to use Angular2 + Firebase + Google Material Design together. Currently this demo application contains following features:

  • Social media login (Facebook, Twitter, Google+ and GitHub)
  • Personal 'Todo' item list
  • Chat with other users

Demo

Demo of this application can be found from https://fir-todo-v3.firebaseapp.com/.

QR code to demo application

Used libraries, guides, etc.

Libraries

Guides

Other resources

Installation

First of all you have to install npm and node.js to your box. Installation instructions can be found here.

Note that node.js 6.x is required.

$ git clone https://github.com/tarlepp/angular2-firebase-material-demo.git
$ cd angular2-firebase-material-demo

# install the project's dependencies
$ npm install

# fast install (via Yarn, https://yarnpkg.com)
$ yarn install  # or yarn

Configuration

See /src/app/config/config.ts_example file and copy it to /src/app/config/config.ts file and make necessary changes to it. Note that you need a Firebase account to get all necessary config values.

Firebase

To get Firebase running as it should first you need to make new Firebase application. Which you can create easily from their website https://firebase.google.com/.

After you have created new application you need to make some security rules for the used data storage. Below is configuration that this demo application uses, so you can use the same within your application.

{
    "rules": {
      "messages": {
          ".write": "auth !== null",
          ".read": "auth !== null"
      },
      "todos": {
        "$uid": {
          // grants write access to the owner of this user account whose uid must exactly match the key ($uid)
          ".write": "auth !== null && auth.uid === $uid",
          // grants read access to any user who is logged in with Facebook
          ".read": "auth !== null && auth.uid === $uid"
        }
      }
    }
}

These rules ensure that 'todo' items are show only to user who made those. Also chat messages requires that user is logged in to read / write those.

Development

To start developing in the project run:

$ npm start
# OR
$ ng serve

Then head to http://localhost:4200 in your browser.

Tests

Unit tests

To run tests run:

$ npm test
# OR
$ ng test

e2e tests

To run tests run:

$ npm run e2e
# OR
$ ng e2e

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.

Author

Tarmo Leppänen

License

The MIT License (MIT)

Copyright (c) 2016 Tarmo Leppänen

About

Just a small demo to show how to use Angular + Firebase + Google Material Design together.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published