ordy/ng-dashbordy

A user management dashboard based on Angular and Firebase.

An Angular interface to create, read, update and delete Firestore users

About the project

Dashbordy is one of my personal pet projects developed in Angular, using Firebase as a backend and deployed on Heroku. The main scope of the project was to implement and design a single page application to perform common CRUD operations on Firestore users documents. It was also a mean to further build up my Angular knowledge and get familiar with new environments like PrimeNG and SCSS.

Firestore

• The users are stored on Firebase in a collection of documents. The ID of every document refers to their respective UID in the the Firebase Authentication database.

Angular

• The Angular application comes with a login page to prevent unauthorised read and writes. Make sure to modify your Firebase security rules to allow users with an admin role.

• The columns can be sorted and the input box will filter the search results on matching name, email or city.

• A modal window to create new users or edit existing ones.

Heroku

To prevent sharing Firebase API key and ID's on a public repository, the setEnv.ts script will generate them before the build command and production deployement using evironment variables from Heroku.

in package.json:

"config": "ts-node ./src/assets/scripts/setEnv.ts"
"build": "npm run config -- --environment=prod && ng build --prod"

Requirements

To locally build and run an Angular project, you will have to setup the development environements which requires the Angular CLI and a compatible Node.js version.

First follow the instructions on nodejs.org to install Node.js on your operating system.

You can then use the npm package manager that comes with Node.js to install the Angular CLI.

npm install -g @angular/cli

This project was first generated using Angular CLI version 10.2.0.

Clone the repository

git clone https://github.com/ordy/ng-dashbordy

Instructions if you need to install git: git-scm

Building the project

In your cookingdom directory, run:

npm install

This will fetch all the required dependencies from package.json to run the application.

Run a development server

Run npm start to run the app on a local dev server. Then navigate to http://localhost:4200/ to load the app. The page will automatically reload if you change any of the source files.

Running unit tests

Run ng test to execute the unit tests via Karma.

Make sure to set autoWatch: false, singleRun: true in karma.conf.js if you are going to run the tests on a Continous Itergration service.