Time-tracking dashboard using React, TailwindCSS and Vite

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

I made it to behave like it was fetching the data from an API with the help of tanstack query and added a skeleton component that will display while the data is still being fetched.

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

I had a small issue with how to dynamically add a class based on the activity type(e.g. "work") and I have created css variables for each specifically like in

className={bg-${activities?.title}}

, so I can correctly display the correct icon for each activity component. As it is, I have seen the issue that Tailwind has no way of understanding string concatenation or interpolation and instead scans your source files as plain text. So I have come up with the solution like indicated here: Always map props to static class names

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

Any feedback will be greatly appreciated! Thanks!