Timetracker project

ReactJS | ExpressJS | NodeJS | SASS | PostgreSQL

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

Design

Goals for user interface

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.

Purpose and ideas for expansion

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.

Next steps

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.