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

Results Summary Page using React+Typescript+Vite

@Poyoanon

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my solution made using React+Typescript+Vite with the help of Tailwind for styling, as I figured it would be a much more interesting challenge than purely only using HTML/CSS. This would be my 2nd time using React, Typescript and Tailwind, and my first time using Vite to quickly build this project for me, and Vercel to host my projects.

Challenges I faced during this project

  • While figuring out how to dynamically populate the content based on the provided JSON was simple enough, I was pretty much somewhat inexperienced with some of the intricacies relating to Typescript and having to specify every single type being used from the JSON, so I had to quickly figure out why it was blasting errors at me.
  • The biggest problem I came across was having to deal with Tailwind. I'm still very shaky about making responsive design for mobile, as I had to undo my mindset of designing for desktop sized screens first, when I needed to do it the other way around to firstly target mobile sized devices then moving on to the next breakpoint.
  • I also had a few problems figuring out how to use Tailwind's grid columns and how to make them stack vertically, but after reading through documentation, it was easy to figure out that they also include flex columns as an option.
  • I was most unsure of how to put the content vertically centered on the screen, and had to resort to just setting an arbitrary margin my-44 just to make it somewhat centered on the screen. Would love to see if someone could tell me how to do such a thing in Tailwind!

I think I'm pretty confident with my React code as it was extremely simple and barebones, but I'm open to feedback, of course. I'm a bit less confident about my Tailwind code and I was wondering how I could do better on that regard.

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