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.
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.
13. Dark Mode:
- The app supports dark mode too!!
14. Mobile Responsive:
- The app is 100% mobile responsive as well!!
Full Admin Dashboard Screenshot =>
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 🍻!!