An open source NodeJS & ReactJS project for tracking the time of hourly workers.
I built this application because it seems like a need for many small businesses with hourly
workers — a way to quickly and easily assign tasks and allow workers to receive the project and
location information they need, as well as clock in and out.
Although such software exists, I was unable to find an open source NodeJS version, so I decided to
create one to better understand the process of building it in NodeJS & ReactJS.
Although I previously had a demo running, at some point I accidentally uploaded some changes which
github's dependabot service updated to different npm package versions, breaking the project.
So, I decided to remove the live demo.
You can see how the app functions via the .gif videos below.
The main purpose of the project was simply to learn ReactJS and improve NodeJS skills
My goal was to design the application with minimalism in mind.
• The user interface is based on opening and closing of viewports, which are hidden
within and selected from the "Dashboard" menu button.
• Each viewport is simply a box with a close button in the upper right corner. The user
can open as many viewports as they want in order to create the "dashboard" or set of viewports they
want to see.
• The viewports also help to maintain a sense of visually modularity in the application.
This makes it easy to introduce new viewports, each with their own independent functionality, such as
data charts, tabular data, or other data visualizations or business processes such as project quotes.
The main design frameworks used are bulma and bootstrap.
The idea behind this project is simply to provide various modules for providing business data, to
small businesses. In this initial version of the project, the administrator can view timesheets on a
table and a map, add new database rows for locations, projects, and employee activities, as well as
edit and delete data. The timesheets time and map are updated in real time whenever an employee clocks
in or out.
An idea for expansion of this project would be to incorporate other business applications with
modules alongside the modules of this employee tracking system. One example I've though about is a
basic property management application— with the system provided here, an administrator can track
the work of their maintenance technicians, gardeners, and property managers for example. With this
foundation, additional modules could be added for setting up customer accounts (perhaps even do so
with an API for a CRM, or shared DB), and monitoring rental payments, as well as a dashboard for
tenants to view and pay their rent, and a scheduling system so that customers can schedule maintenance
visits.
Other future modules might include an internal company news feed, a messaging system for
communication about projects, charts to display worktime logged, expense tracking, or even
video/IoT-related modules such as receipt scanning, warehouse monitoring, or equipment scanning.
I will be turning this project into a basic SaaS (multi-tenant monthly
subscription app), which will involve a few more steps, including:
• Admin user account layer for multi-tenant access — I'll create an "accounts"
table, and use its ID as a prefix on the other tables in the system. In this way, each account will
have its own set of database tables, keeping it separate from other accounts (the "timesheets" table
becomes "account2_timesheets" for admin account number 2, for example).
• Brandable-pages — the account holder will be able to upload their logo, select
brand colors to use as website main colors, and set up a few pages, such as a public facing landing
page about the company, a list of jobs available to apply to, and private company pages for internal
company information. From this area, employees will login to their accounts, within the administrator
company's account
• An email verification step for all users — this will be a simple url query, set
up with a hash code and user email address to be queried and matched against the database.
• A dashboard for managers — A cross between the employee and admin dashboards,
where project managers can assign activities to and communicate with their team, as well as generate
quotes for customers.
• A subscription system
• A flashy promo page
Once all of that is done, I can add on new business modules.