Original Blog Post Link Written By Me => https://webbrainsmedia.com/blogs/business-management-system

Hey everyone 👋

I am open sourcing my first freelancing project which is this business management system for a canadian painting company. Today, all his company's day to day operations which includes Payrolls, Expenses, Invoices generation, Estimates generation, Time Tracking, Production Calendar, client emailing etc... are managed by this system. So, yeah it's not a toy project and it's not a simple CRUD app either 😅 as its been used actively in real life scenerio 😉.

I am open sourcing this project because i want to help other developers who are struggling to get their first freelancing client or first dev job. I want to help them by providing a ready to use project which they can use to show their skills to their clients or future employers and get their first client or first dev job.

This project is built using ReactJS + Material UI for client side, firebase DB for data storage, firebase auth for authentication, firebase nodejs functions for Backend APIs and is hosted on Firebase Hosting.

You can view the project demo here on this Demo Link

Admin Login Credentials =>

Email: admin@example.com
Password: password

Steps to run this project locally:

Run yarn to install deps.
Setup firebase and install firebase CLI
Login into firebase CLI
Run yarn start to run the client
Run yarn serve to run firebase functions

.env File Example

REACT_APP_FIREBASE_API_KEY=xxxxxxxxxxxxxxxx
REACT_APP_FIREBASE_AUTH_DOMAIN=xxxxxxxxxxxxxxxx
REACT_APP_FIREBASE_PROJECT_ID=xxxxxxxxxxxxxxxx
REACT_APP_FIREBASE_STORAGE_BUCKET=xxxxxxxxxxxxxxxx
REACT_APP_FIREBASE_MESSAGE_SENDER_ID=xxxxxxxxxxxxxxxx
REACT_APP_FIREBASE_APP_ID=xxxxxxxxxxxxxxxx
REACT_APP_SYSTEM_USER_ID=xxxxxxxxxxxxxxxx


REACT_APP_DEV_FIREBASE_API_KEY=xxxxxxxxxxxxxxxx
REACT_APP_DEV_FIREBASE_AUTH_DOMAIN=xxxxxxxxxxxxxxxx
REACT_APP_DEV_FIREBASE_PROJECT_ID=xxxxxxxxxxxxxxxx
REACT_APP_DEV_FIREBASE_STORAGE_BUCKET=xxxxxxxxxxxxxxxx
REACT_APP_DEV_FIREBASE_MESSAGE_SENDER_ID=xxxxxxxxxxxxxxxx
REACT_APP_DEV_FIREBASE_APP_ID=xxxxxxxxxxxxxxxx
REACT_APP_DEV_SYSTEM_USER_ID=xxxxxxxxxxxxxxxx

All Project Features Listed Below:

1. Authentication Screen:

The login system uses the firebase auth for user authentication.

2. Profile Screen:

This screen shows basic user profile details.

User can update his profile details from this screen.

3. User Groups Panel:

This panel allows the admin to create new user groups (jobs) and edit all the privileges of each user group (job) such as which path this user group can access or which graph or any specific data is visible to them.

The user after signing up for the first time has to select his user group (job) from the list of jobs available in the system and only after approval from the admin, User can access the privileges of that selected user group (job).

4. Live Events Logs Panel:

This panel shows details of all the live events logs of the system in real time.

5. Sales and Revenue Graphs Panel:

This panel shows the Sales and Revenue graphs in real time. You can also Toggle the graph in the dynamic business quarters format.

6. Salaries and Expenses Panel:

This panel shows details of all the calculated salaries and expenses for a particular time period in real time. You can also click on any card to get the detailed view.

7. Data Visualization Panel:

This panel visualizes some crucial business data in the form of graphs.

8. Multiple Data Searching Panels:

The user search panel allows to search for any user details or to show all user details in the system. You can also approve or disapprove assigned job for any user from this panel.

The Expense search panel allows to search for any Expense details for a particular time period. You can also approve or disapprove any expense by any user from this panel.

The Time Tracking search panel allows to search for any user's time logs for a particular time period.

This panel allows you to search for the generated estimates.

This panel allows you to search for the generated invoices.

9. Time Tracking Tool For Employees:

This tool allows employees to log their login and logout time for a particular day. Employees can also add any expenses they have made onbehalf of the company for reimbursement and when the admin approves the expenses, the amount gets add up in their calculated payroll for the week.

10. Estimate Generator:

This tool allows the admin to generate custom estimate pdf for the clients. The admin can also send the generated estimate to the client via email in the app itself.

11. Invoice Generator:

This tool allows the admin to generate custom invoice pdf for the clients. The admin can also send the generated invoice to the client via email in the app itself.

12. Client's Project Lifecycle:

Please checkout the flow diagram below to understand what goes on in the whole project lifecycle. I have also attatched all the tabs and tools that are used in the whole process.

![Client's Project Lifecycle](https://webbrainsmedia.com/static/126b5beeb8d623f61aa175559fa93c05/f79fa/client-project-lifecycle.png 'Client's Project Lifecycle')