Currently the project is down because of Heroku's service update. I'll be reploying through render.

I wanted to develop the backend first when starting this project. I used Express for the server and MySQL for the database. My primary way of development up to this point was using Heroku. I had to do some digging since MySQL didn't have a service like MongoDB for hosting the database on the cloud.

I learned that Heroku had an add-on called ClearDB MySQL which could store my data. This was my solution to getting storage for my database. I could now move onto Entity Relationship Diagrams. Planning how your data is related is essential.

When tracking time there were two main components, the category that time was going into and the capturing of time itself. For example, when I track time I have a category for Coding and Work. I then add time to the relevant category. This process I wanted to model.

As shown in the diagram, we have a table for categories and logs. The categories have a one-to-many relationship with the logs. This mean that each category can have multiple logs, but each log can have a reference to only one category. This was enough to get started on implementing the server.

Express was set to listen for requests. My code was separated into three parts: app, routes, and controllers. The app was the main express application. We added all of our middlewares inside of this file. The routes file setup what routes we'd be using. Controllers contained the code to control what would happen when a specific route is requested. It's main function was to interact with the database.

To interact with the database I installed a package called mysql. I could write out the SQL queries now. With this power, I created CRUD operations for categories and logs. A user could create, read, update, and delete categories and logs.

On the client side, I used React with TypeScript and React Router for routing. The main problem to solve on the client was giving properly formatted data to the server. MySQL has a particular format for dates and without this formatting dates won't be stored properly.

I created inputs in order to validate everything that the user was giving me. This was done on two fronts through HTML validation and JavaScript validation. This validation made sure that the everything from year to seconds was within the valid range. Even leap years are validated!

The log would be sent to the database and the frontend would be updated when the data was captured. This was all done for manual log creation though. The othe form of log creation was running the timer on the main page. When you hit the submit button, your time will be added as a log to the category that you choose.

When deploying the application this process went pretty smoothly. As soon as the server was ready I deployed it. I just had to ensure that CORS headers were set. The backend was deployed to Heroku and the frontend to Netlify.