Time Tracking Dashboard

Portfolio Project

This is the second Frontend Mentor project that I completed. As far as design replication goes, it was not a challenging project for me as I have worked with Grid and Flexbox a good deal at this point. The challenge was to recreate the design and allow users to switch between Daily, Weekly and Monthly views. In addition to that, a JSON file was provided which could be used to import the data instead of having it hardcoded.

I non only wanted to use JSON, but I wanted to ensure that if the JSON was imported in a different order than the card elements on the page, that the card elements would stay in the same order and the data would not be assigned to the incorrect card.

To make that happen, I created some data validation filters to compare the card title to the category in the JSON.

This project wasn't complex enough to warrant a framework, but I did want to use SCSS to keep my code a bit cleaner. While I could have simply compiled my SCSS using the terminal, I wanted to use a tool that would auto reload any changes I made. I though Webpack would be just the right tool for this job. It took a bit of work to set Webpack up, but once that was in place, the development and deployment were quite easy.