Timeblock Calendar project
October 18, 2022
“Block your time or lose it forever”
Timeblock calendar is a web application to ⚡boost⚡ your productivity by forcing you to create tasks that associate with specific time frames (the time-block method). As a result, you organize and carry out all your to-dos in a structured and SMART manner without forgetting or procrastinating.
Inspired by Elon Musk’s time-blocking method, I have long been coordinating my Google Calendar with the gamified todo app Habitica as my productivity system. However, I wish for a product that can do both, and after having found that no apps matched my wants, I decided to code up Timeblock Calendar as the perfect integration - an interactive calendar for frictionless timeblocking, and a score system for that “checked off” feeling of power and motivation.
How I built it
I built the app client-side with React.js, and the backend is handled by Express.js and MongoDB. The React.js client has a calendar and a todolist components, and communicate with the backend via HTTP requests (using
fetch). In turn, the backend connects with the MongoDB Atlas database instance through
mongoose library using a URI and exposes the
/api/scores routes for the frontend to make requests to and in turn perform the appropriate business logic to execute database create/read/update/delete operations.
On the frontend, users can add time-blocks through a form presented at “/addevent”, which submits the form data (including title, description, and start and end time) to the backend, and the backend adds new data into the MongoDB Atlas instance.
On the app’s index page, when loaded, both event and score data is fetched from the backend (concurrently through
Promise.all) to display onto the calendar through the
fullcalendar library, which also provides many built-in functionalities such as different calendar views and event card interaction. Tasks are put on the right hand-side with options to filter and check off. All filters are done client-side with JavaScipt, and state updates are “pushed” onto the database through background HTTP requests to the correct
Frontend styling was done through the
React Bootstrap library.
Another challenge was the full-stack application deployment flow. As the client and the server were effectively two different applications, I did not initally know how to effectively deploy them both together. At first I used Heroku to deploy the backend first, then use a
postbuild command to
cd into the “client” folder and
npm run start there to boot up the Client app in the same deployment. The result was two apps running on two different ports in the same Heroku dyno. However, after Heroku announces removal of their free tier, I decided to switch to Railway for my deployment. Railway uses a different strategy for deployment where there can only one app per service; therefore, I had to change my deployment plan into: building the React client first and using Express.js to serve the built static files. This way, the React code only needs to be built (not actively running), and I only need one Express.js service to host my backend route as well as serving my client-side rendering React.js Todo Calendar. I think the second strategy is a bit better, but it had also taken me some time to thoroughly understand how each of the frontend and backend technology works and how they work together.
Accomplishments that I’m proud of
I am really proud of being able to code my first original project idea into fruition by applying all the different knowledge I have acquired throughout the web dev learning journey. The project was not based on a main tutorial and had taken many hours of reading StackOverflow, and it really helped me understand full-stack application development and paved the way for my first development internship.
What I learned
- Working with React.js - creating functional components and using hooks (
useRef, etc.) in effective ways
- Working with MongoDB noSQL database through the
- Using Environment variables with .env files to protect secrets
- FIXING CORS ERRORS !!!
- Implement user register/signing so each visitor has their own Calendar
- Improve styling with a more modern CSS solution (i.e TailwindCSS, or just SCSS)
- Enhance User Experience by potentially having the Add Event form as a pop-up modal instead of new page
- Better scoring/streaking system to further incentivize users