Time Tracking Dashboard with Next.js, Tailwind, Storybook, Vitest

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

1. Having learned a lot from my previous project, the newsletter form, this time I took the opportunity to consolidate what I had learned. As I was finishing the project, I discovered that fonts need to be applied separately in Storybook. I learned that if the fonts are different, it can cause confusion as the appearance in Storybook might differ from the actual project.

2. I tried using useSWR. Instead of importing the data.json provided by the challenge as a static file, I used the API functionality provided by Next.js to fetch it. This allowed me to retrieve data easily and conveniently without using useEffect. Also, I found its simple usage to be very efficient in progressing with the project. A similar library is tanstack-query, which seems to have more features than useSWR and could be useful for managing complex server states.

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

The Figma design system for this project was somewhat unfriendly from a developer's perspective. There were inconsistencies in line heights, meaningless 1-2px measurements, and odd pixel values. The oversized profile image also made precise clicking difficult. While ideally, design systems would be perfectly organized for developers, including component names and color designations aligned with industry standards like Tailwind CSS, this isn't always the case in real-world projects. Despite these frustrations, I overcame these challenges by completing the project, recognizing that as a professional, I need to deliver results even in less-than-ideal circumstances. In a work environment, communication would be key to addressing these issues.

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

Any tips related to this project are welcome.