Time Tracking Dashboard

What are you most proud of, and what would you do differently next time?

Built with. 🔨

• HTML & CSS.
• TypeScript.
• Zod - To validate the data received from the server (a JSON file in this case).
• Motion (formerly Framer Motion) - Used for some small initial load animations.
• Vite.

Features. ✨

• Built according to the ARIA Tab Patterns guide.

Notes. 📌

• I think this project should have been done using a framework like React. If so, it would have been faster to get done, with much more cleaner code and will be easier to maintain.
• Since i went the vanilla way, the first problem i saw was that i would have to repeat the same card markup 18 times (6 cards into 3 panels) inside my HTML. To avoid this, initially i generated the markup with JavaScript. So i would have the markup for one card in JS, and then once the data was retrieved and validated i would loop over the data and create all the card markup and append it to the DOM. This was working fine but since the cards were not in the initial HTML when the page was rendered, there was this annoying layout shift that happened when the cards were later added using JavaScript.
• There were few options to counter this like showing a loading state until the data was retrieved and the cards were generated, but i eventually ended up hard coding all the card markup in the HTML. So now once the data is retrieved, only the hour values are updated using JS.
• I left the initial solution where the cards were dynamically generated in it's own branch - solution/dynamic-card-generation

What specific areas of your project would you like help with?

Any feedback is appreciated!