Inspiration
This is just an idea I've had for the longest time. I always wanted to focus on my development on apps that serve a real purpose, and I think that this nails it.
What it does
This makes the normally annoying process of time-blocking your day (or separating different parts of your day into "chunks" and following that as the day progresses) much easier. It shows an entire day, from 6am to 12am, on a schedule with lines showing hour long intervals and little dashes showing 15, 30, and 45 minute intervals. When an interval is active, there is a green box showing where in the day you happen to be. In order to add a block, users click the button "Add New Block" and follow the simple dialog. They input a name, an estimated duration that can be anywhere from 15 minutes to 12 hours and 45 minutes, and select any color for it that they desire. Then, the block appears in the area that displays your day. Each block is draggable on the y-axis, so it stays bounded to its container and moves smoothly. It is also in a grid allowing it to snap to said grid for every 15 minute interval. Once multiple blocks have been created, you will see a colorful and simple way to view your day. As the day progresses, you can mark a block as "done" by double clicking it. This strikes out the event name, showing that it is a completed part of your day. To delete a block, you simply click the "x" on the right side of the block.
TLDR; TimeBlock is the easiest way to control your day using the popular "time-blocking" technique.
How I built it
This project is 100% React.js at the moment. With the help of the React-Draggable library, some math-heavy CSS, and some basic JavaScript methods, this website delivers a simple and unique experience to users.
Challenges I ran into
A challenge that I am still having trouble with is having the data from where a block is dragged to saved so it can eventually be backed up to a database for a potentially large-scale number of users.
Accomplishments that I'm proud of
I am proud because it serves a real purpose. It can really improve the workflow of people's days, and I know that because I created something I had a personal need for.
What I learned
I learned a lot about the event listener, like when handling a double-click for example. Also, this project helped me get better with some CSS properties that were dependent on parent-child relationships.
What's next for TimeBlock
I will now be moving into Stage 2 of this app, where I look to create a complete back-end for it. I first need to have a way to save the last y-value of a block before the app closes to state, then once that is figured out I can connect it so an express server with a mongo db backend.
Log in or sign up for Devpost to join the conversation.