Gantt Chart Scheduler

A unique way to schedule employees

Overview

Context:
As a Team Leader at Target, I was looking for a visual way to see who was at work and when each day. Thats when the idea for this project was born, similar to creating a schedule, I wanted a way to see when people were arriving and leaving.
Role:
I created this project myself, and the project is still in the beta phase with bare minimum function.
Tools Used:
HTML, CSS, JS, Bootstrap 5, Jekyll, Github

TL;DR

Problem:
At work I always wanted a way to visualize who on my team was currently at work and what they were working on. I needed a clean way to visualize what was going on, especially when our team can consist of 20 people at once at certain points.
Solution:
To solve this I started working on this website. While this website is still in beta, the goal is to create a place where I can see everyone on my team, what their current task is, and visualize who I can call for when I need backup.

Base Design

Gantt Chart with people's names
So far I have a basic layout for how I want the site to look, and I don't plan on adding mobile functionality for a period of time until everything with the main app is working.

Github

Github page with files and deployments
Similar to my portfolio site, I chose to host this one on Github Pages as well. This was because it's very easy to build and have people immediately be able to test and use the app, with no hosting cost to me.

Features

Four red arrows pointing at current buttons
Demonstrating clicking, deleting, and moving users
Currently the feature set is somewhat limited. Thus far I have created a form that allows the user to add people. This form will reject bad data inputs ensuring only good data. The 4 red arrows demonstrate what items are currently clickable. The actual shifts themselves can be selected with a responsive design. Then the user can decide to delete that user as required. There is also a clear all button for easy reset. On top of that shifts themselves can be dragged to adjust the time. Lastly, whenever any user is updated, it will save that data locally so when the page is reloaded, the data is preserved!

Future plans

In the future I want to implement the following features: Import/Export, Drag and drop users, Scale height by viewport height, 12 or 24 hour time, UI overhaul, Editable users, Display shift time, and Current time. Don't forget to star the project as I'll continue to work and improve this. In the mean time please visit it and try it out!