Business Management System

Hey everyone 👋

I am open sourcing my freelancing project by which i was able to earn $5000+ in just 2 months of work, and that too when i just started working for a full time web dev job for Rs 35000/month in year 2020 (after failing for 4 consecutive years (2015-2019) of giving medical entrance examination and then, doing a 6 months web dev internship for Rs 15000/month stipend).

This just shocked me and made me reliased the power of freelancing and how much money you can earn by doing freelancing.

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.

I created this 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 😉.

You can view the project source code here on this Github Link

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

All Project Features Listed Below:

1. Authentication Screen:

  • The login system uses the firebase auth for user authentication.

Authentication Screen

2. Profile Screen:

  • This screen shows basic user profile details.

Profile Screen

  • User can update his profile details from this screen.

Edit Profile 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.

User Groups Panel

Edit User Groups Panel

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).

User Info Row

Edit User Job

4. Live Events Logs Panel:

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

Live Events Logs Panel

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.

Sales Days Graph Panel

Sales Days Graph Custom Range Panel

Revenue Days Graph Panel

Revenue Days Graph Custom Range Panel

Sales Quarter Graph

Revenue Quarter Graph

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.

Salary and Expenses View

Salary and Expenses Detail View

7. Data Visualization Panel:

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

Estimates Visualization

Invoices Visualization

Business Visualization

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.

User Search 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.

Expense Search Panel

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

Time Track Search Panel

  • This panel allows you to search for the generated estimates.

Estimate Search Panel

  • This panel allows you to search for the generated invoices.

Invoice Search Panel

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.

Time Tracker Tool

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.

Estimate Generator

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.

Invoice Generator

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

Funnel Menu Drawer

Estimates Requests Tab

Leads Assigned Tab

Appointment Scheduled Tab

Estimates Draft Tab

Estimates Sent Tab

Estimates Sold Tab

Estimates Lost Tab

Estimates Scheduled Tab

Invoices draft Tab

Invoices Sent Tab

Invoices Paid Tab

Clients Tab

Production Calendar

13. Dark Mode:

  • The app supports dark mode too!!

Dark Mode

14. Mobile Responsive:

  • The app is 100% mobile responsive as well!!

Mobile Responsive

Full Admin Dashboard Screenshot =>

Admin Dashboard

Thanks for reading this far. I hope you liked the app. If you have any suggestions or feedback, please feel free to reach out to me.

Cheers 🍻!!

Subscribe To Get Instant Updates On Release Of New Blogs And Courses

We Respect Your Privacy. Your Email Will Never Be Shared.