Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

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

next, react, tailwind-css, typescript
Jadurani Davalos•220
@jadurani
A solution to the Planets fact site challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Jadurani Davalos's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License