/Angular4-ClientManagementSystem

A single page application for client management system with authentication, full CRUD functionality, developed using Angular 4 for front-end and Google's firebase for backend. The application is hosted on firebase.

Primary LanguageTypeScript

Angular4-Client Management System

A client panel/ client management system - a single page application with full CRUD functionality, developed using Angular 4 for front-end and Google's firebase for backend.

Firebase gives cloud NoSQL database along with authetication methods. User will be able to login, manage their client. All the clients will have basic information and balance they owe. Settings component => to disable registration for the whole system
The application is hosted on firebase https://clientmanagementsystem-d52ad.firebaseapp.com

To login =>
Email: ankita.patil@gmail.com
Password: 123456

Firebase Setup

1.Go to https://firebase.google.com/ and log in
2. Go to console -> Add Project
3. Enable authentication => Sign in method => Set the status of provider - "Email/Password" to enable
4. Database - all the clients will be stored here. You have to have client.json
Make the database public by changing the rules
5.Adding initial user to the firebase => Go to authentication -> Add user

Bootstrap the project 
npm install bootstrap@4.0.0-alpha.6 jquery tether --save

Include the bootstrap path in "styles" and jquery, tether, bootstrap javascript file path in "scripts" in angular-cli.json

Generating components

Command

ng g component FOLDER_NAME/NAME_Of_The_Component
  1. Dashboard
  2. Inside Dashboard, Client component will be there
  3. Inside Client component, there are client details
  4. Component to add clients
  5. Component to edit clients
  6. Navigation bar
  7. Sidebar
  8. Login
  9. Register
  10. Settings
  11. A component for page not found, if we try to go a route that doesn't exist

Set up the routes in app.module.ts

Once this is done, setup the router oulet in main app.component.html

Implementing firebase with angular

npm install firebase angularfire2 --save

npm install angular2-flash-messages --save
## CRUD operations

Login, Authentication and Access Control

Only admin will have option to register. Users other than admin will not see Register option
Setting to disable the register option

Changing the database rules -> We need to be authenticated in order to read and write the data

Now, if you go to application, you will not see any data because permission is denied

Clients will be shown only to the people that are logged in

Implementing auth guard for routes

Implementing User Registration


Building the project,

ng build --target=production --environment=prod

After successful build, all the compiled files are stored in dist folder.