Design comparison
Solution retrospective
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
- @TedJenklerPosted 3 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@robcrockPosted 3 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