All solutions

Hey folks!

Done with implementing the multi-step form challenge with NextJS. I managed the form natively as a refresher (I'll use a library like reach-hook-forms next time 🤣) and managed the app state via React's reducer and context.

Feedback on the the UI and the code is most welcome :)

This is the first project where I've done static site generation :)

Work flow:

1. Set up the project architecture and conventions
2. Convert the design system (from figma) into tailwind configurations
3. Build the components (component-first development)
4. Set up the layout with fixed data
5. Dynamically load the data from the data.json file

Areas I'm not sure of/not very ok with:

1. There were lots of custom tailwind values here and there in the tsx files, in particular, the font sizes differ according to the screensize. Ideally, this is already laid out in the corresponding figma file's design system. As the sizes are a bit arbitrary and are in fixed pixels, I decided not to fully rely on the tailwind.config.js file

2. The NextJS docs for static site generation mentions "creating a top-level directory" for data fetching (see: https://nextjs.org/learn/basics/data-fetching/blog-data). I didn't follow this and instead created a directory from within src/ so that I can still use the custom types I've prepared when fetching the data from the data.json file.

3. I didn't supply a fixed height and width for the images -- I think the images should follow their original size. I also used the native <img> tag instead of Next's Image /> tag since the latter requires me to supply values for the height and width. I'm not sure how to handle that and I keep getting warnings during build that I just keep ignoring. I'd appreciate anyone's opinions on this matter :)

Hi everyone!

I just finished the pomodoro app using NextJS and TailwindCSS.

This is my first NextJS project and my first React project in a while. This is also the first time I've tried using Storybook and I find that component-based development can be tedious at first but keeps my app more easier to tweak, independent of the other use cases.

Through this project I've familiarized myself with:

1. React's hooks: useState and useContext
2. Storybook
3. NextJS - project structure, next fonts
4. Hosting and Deployment via Vercel
5. Animations with SVG

As I've had a lot of firsts in this project, I'd appreciate any feedback you have, whether it's in accessibility or code structure or anything you see that I can further learn and improve :)

Thank you!