Apartment Management Application using Angular 2

Demo Link:
http://www.societyconnect.tk/loginAdmin Username : admin
Admin password : adminResident Username : A001
Resident Password : open@A001
Introduction :
Lately, I wanted to build an application using Angular 2, so just started with a simple use case to perform end to end frontend feature in Angular. While thinking where to start finding out that I can create an application for Apartment Management using Angular 2.The backend is built by my friend in Node.js and Postgres you can reach him for backend code ( https://github.com/mcsekar12 )
Angular Concepts Involved
- Authentication using Angular 2
- Role Based Authentication using Angular 2
- HTTP methods like GET,POST,DELETE,UPDATE
- Folder Structure for large Application in Angular 2
- Include Angular 2 Charts
- Add Toastr and Modal using Bootstrap 4
- Payment Gateway integrations using Instamojo
- Data sharing using Route Paraments between parent and child
- Adding Config file for API endpoints
- Passing data between parent and child components ( menu Toggle in Mobile View )
- ng2-smart-table integration
- Building Application using SASS integration in Angular 2
Story :
Lets create the use case and story. We are to build an apartment Management application. The agenda is to solve the problem of two party or roles. Every apartment has an Admin or Management Community and owners/residents.
Lets discuss what all feature admin/management Community should have in this app
- Admin should be able to create an owner/resident, Enters all inputs such as Name, Block-number, Flat-no, mobile number & resident ID. ( here resident ID acts as a primary key )
- Admin while creating an owner, can add the parking space assigned to an owner

- View all the owner and should be able to edit and delete a particular owner/resident ( View displays Resident ID Flat-no etc )

- Collect all Maintenance with the status of which owner has paid or pending.should have an access to send a private message to the particular owner.Admin should also be able to see a metric dashboard with total owners and amount collected etc.

- Every apartment has amenities and the owner can request to access the same for their guest. Once owner sends request admin should be able to see all the request
- Owners/resident raise complaints, Admin should be able to see all the complaints with details of who has sent it with a title and details & data.
- Notice board allows admin to send a message to all owners/resident. For e.g. (any events happening in the society can be shared with all owners )
- Dashboard to see the entire payments, owners, complain and request in Graph mode. A complete dashboard along with graph and metrics
Similarly every owner/resident has features, let us discuss what all to be added
- Owners/Resident will be able to book the amenities available in the apartment

- Owners/Resident can pay maintenance and check the history of payment

- A request can be made for their guest to available the club access with entry of some basic inputs
- Owner/resident can raise a complaint , which requires a title and detail description of the complaint .
- All the common information shared by the admin is seen in notice board. An owner gets to see the date of publishing the content.
- An option for the owner to sell out his parking space when interested, Since the owner can sell out his parking space, Booking for a slot can also be made with history

Features :
- A search page is created where are the parking slot is listing and owners can select the respective slots and make payment.

- All owners/resident have their respective parking slot. And it can be sold out for others to use. The time slot is separated in 4 slots.
- Based on the selected parking slot the owner will be charged and the status change to booked.

- Payments are made on instamojo. I have used dummy test card to integrate the payment

- Admin has supervision on all the booking made.
- Consists of complete dashboard with metric and graphs, Vue graph is used here which has chart.js
- Owner/Resident can make monthly maintenance and it can be tracked.
- Lot more features are included, you can play around with it once you download.
Download the source code
To have a better understanding, download the source code from GitHub and run the following command to launch the app.Hope this helps someone who is planning to build something similar or kickstart.
This project is build by using Angular Cli (https://cli.angular.io/) and ensure you have installed Angular Cli globally . Once you download the code from Github , do the following steps in command
cd project
npm install
ng serve ( run on localhost:4200 )