Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive website done using React/NextJS (SSG), Tailwind, Storybook

@jadurani

Desktop design screenshot for the Planets fact site coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


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 :)

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord