Skip to content
Submitted 4 months ago

Quiz App Solution

#react#tailwind-css#typescript#next
Robert Crocker•410
@robcrock
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Frontend Quiz app
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud of taking the lead to refactor this code to use useReducer instead of useState hooks scattered all over the app. I also think I did a decent job completing the challenge to spec.

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

Managing the state was much more complicated than I anticipated.

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

I would love feedback on my use of useReducer and the tailwind style on the option buttons.

Community feedback

  • Teodor Jenkler•3,860
    @TedJenklerPosted 4 months ago

    Hi Robert,

    Nice project! I noticed a few areas for improvement:

    Responsiveness: Unfortunately, your project isn’t responsive at all. A simple way to make your game playable on all devices would have been to adopt a mobile-first approach. Think of it like building a structure—if you start with the 100th floor, it’s difficult to make the rest stable. Designing for mobile first ensures that your project will work on all devices, even if it may look a bit off on larger screens, rather than breaking entirely as it does now. After 900px, the quiz breaks, making it unplayable on some devices.

    Tailwind CSS: While mobile-first isn’t mandatory in standard CSS, Tailwind CSS is a mobile-first framework. It might be worth looking into for your next project.

    Project Structure: Your project is very nested, making it hard to find things. Best practice is to keep your folders organized with a single level of nesting—for example, have one folder for components, another for pages, one for hooks, and so on. Over-nesting can make it difficult for others (and yourself) to navigate your code.

    Overall, your project looks good in desktop mode, and everything works. I hope this feedback is helpful!

    Best, Teodor

    0
    Robert Crocker•410
    @robcrockPosted 4 months ago

    @TedJenkler I really appreciate the feedback. I totally forgot about making this one responsive. I got distracted with all of the state management. This was the last challenge in the JS Learning track before getting to move to CSS. I will be sure to be more cognizant of building for other platforms in those challenges. Thank you again!

    1

Please log in to post a comment

Log in with GitHub

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