Time Tacking Dashboard

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

I'm proud of the fact that I used one component for all the activities cards. it allowed me to have practice with creating a generic component that will show different content based on it's props.

I'm also proud of the fact that I typed my state using a union of string literal types to avoid typos and unrecognised values.

I also noticed from this project that the more you want type safety the more work you need to put in. I took the easy road in some cases by using generic types such as string. I'd like to think more about what's needed in terms of typing in the next projects.

What challenges did you encounter, and how did you overcome them?

Making one component for the activities cards was a bit challenging. I had to generate all info from the props and grab the correct icon and show the right prefix for the previous time period.

For the icons I used a vite plugin that allow you to import the svg icons as React component and created an object with activity names as keys and the icons as the values. A similar pattern was done for the prefix but in this case it was the time periods names rather than the activities names.

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

I'd like feedback around the structure of my code , my typing and readability of the code base.

I'm very interested in finding out if other developers find my code base readable, understandable and follows best practices.

As always any feedback / criticism is welcomed!

Thank you for viewing my solution!