All solutions

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

I used the NextUI accordion component. Their library is based on TailwindCSS so I loved it immediately

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

The trickiest part was to go through the customisation of the NextUI component but I managed by going through their docs

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

The background image looks good on the two screen sizes set for the challenge, but I'd love to improve it on a medium screen. Any ideas?

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

I was able to create a perfectly responsive page and to make the form consistent with the data.

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

The biggest challenge was having to use a button to control the form that was not inside the scope of the form itself. I used the useRef hook to control the form but it was not as straightforward as using Formik.

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

I tried the make every component as reusable as possible. However, I'm afraid I might have repeated some code for the sake of simplifying things. For example, the sidebar for desktop and the topbar for mobile are very similar. How could I have make this better?

Great way to practice data fetching and stat management. I'm not sure if this is the best way to use the useEffect hook as there is a slight delay on loading.

I love Tailwind CSS but sometimes its limitations can be a pain in the neck. Tailwind doesn't support dynamic classes out of the box. I was hoping to make the progress bar width dynamically adjustable based on the storage left but I had to resort to use the style attribute in JSX instead. Overall a great challenge to practice CSS positioning 😍

Customising validation is a great thing. No one wants to see the browser's default message. The problem is that it's not as easy as it should be. Once again, Tailwind came to the rescue with some great handling of CSS pseudo classes like :invalid and :placeholder-shown. Let me know your thoughts :)

I had never built a mobile menu as a sidebar like that and my grid knowledge was a bit rusty. Any tips on how to make it better? Very keen to hear how that grid can be optimised.

It was my first time using Tailwind outside of a framework (I usually combine it with Next.js) and the installation was not very straightforward. Any tips on how to integrate Tailwind more easily for simpler projects? I also applied style to the body directly, is that something or not really recommended? I appreciate the feedback :)