Awesome Open Source
Awesome Open Source

rwa-trivia app

See it in action:

This is part of building a new app for my series - Real World Angular @ https://blog.realworldfullstack.io/

Part 0: From zero to cli-ng

Part 1: Not another todo list app

Part 2: It's a Material world

Part 3: Form Formation

Part 4: State of my SPA

Part 5: Light my fire

Part 6: 3Rs ... Rules, Roles & Routes

Part 6.1: Upgrading to 4.0.0-rc.2

Part 7: Split my lazy loaded code

Part 8: Just Ahead of In Time

Part 9: Unit Testing

Part 9.1: More Unit Testing

Part 9.2: Even More Unit Tests

Part 10: Angular 4 upgrade

Part 11: Gameplay with Angular

Part 12: Cloud Functions for Firebase

Part 13: Elasticsearch on Google Cloud with Firebase functions

Part 14: Faceted search with Elasticsearch and Angular Material data-table

Part 15: Incorporate Material UI design into the app

Part 16: Migrating from Firebase to Firestore

Part 17: Bulk upload and User profile settings using firebase cloud storage

Part 18: Revisiting ngrx - Splitting store into feature modules, using action classes, selectors & router-store

Part 19: Ready Player Two - Two player game play, computing stats, dashboard and other features

Part 20: Angular, ngrx & cli version 6 - Upgrading Angular, cli, ngrx, material & RxJS to version 6

Part 21: Service Workers (Progressive Web App) with Angular

Part 22: Angular Testing with Protractor, Jasmine and Jest

Part 23: Server side rendering with Angular universal

Part 24: Angular workspace

Part 25-a: NativeScript, Angular and Firebase

Quick Installation Instructions

  • Install cli globally (version should match the one in package.json)

npm install -g @angular/[email protected]

  • Install npm packages

npm install

  • Setup your firebase instance @ https://firebase.google.com/

  • Setup providers in Firebase Authentication

  • Use the firebase configuration information and plug it in src/environment.ts

  • Import src/db.json to your firebase database instance to get the initial set of test data

  • Run the application using ng serve

ng serve

  • Add yourself as a user using the application. Ensure you are added as a user in Authentication tab of firebase console.

  • Add your user id as an admin in the firebase database (admins need to be added manually) -

Set: users/<user id>/roles/admin: true

  • Use firebase-rules.json file to setup the firebase rules for your database

  • Serve the application again. Ensure you have admin privileges

ng serve

Deploy to Firebase Server

  • Install firebase tools globally

npm install -g firebase-tools

  • Authenticate with your firebase credentials

firebase login

  • Setup firebase hosting configuration for the application, using "dist" instead of public as the public folder name

firebase init

  • Create a build

ng build

  • Serve up the app using firebase server locally

firebase serve

  • Deploy Site to firebase

firebase deploy --only hosting

  • Setup firebase functions - creates functions folder and installs dependencies

firebase init

  • Deploy functions to firebase

npm run deploy-functions

Testing

  • Test the application using

ng test



Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (305,149
Command Line (131,872
Angular (55,112
Redux (29,243
Firebase (22,406
Material (15,817
Elasticsearch (11,422
Series (9,430
Google Cloud Platform (5,689
Material Design (4,759
Firestore (2,974
Angular Cli (2,307
Angular Material (1,392
Ngrx (1,373
Cloud Storage (843
Firestore Database (240
Angular Universal (180
Nativescript Angular (31
Cloud Function For Firebase (19