My Results summary component using reactjs, vite and tailwind

Solution retrospective
I'm most proud of the fact that I was able to build a working project using React, especially since it was my first time working with the framework. It felt great to take on something unfamiliar and see it through to completion. One thing I would do differently next time is spend more time planning the overall component structure and project organization before jumping into coding. I realized that having a clear architecture from the beginning can make development much smoother and help avoid unnecessary rewrites later on.
What challenges did you encounter, and how did you overcome them?One of the biggest challenges I faced was understanding the architecture of a React application—how components communicate, how to manage state, and how to properly fetch and display data from an API. At first, it was overwhelming, but I reached out for help and got support from someone more experienced in React. With their guidance and some additional self-learning, I was able to understand how things fit together and started applying the concepts more confidently.
What specific areas of your project would you like help with?I would really appreciate more guidance on using React Hooks effectively. While I understand the basics of useState and useEffect, I still find it a bit confusing when to use certain hooks and how to manage more complex state or side effects. Learning best practices around hooks and how to structure components that use them would really help me improve and write cleaner, more maintainable code in future projects.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @bccpadge
Hi John Andrew San Victores!
👏 Fantastic job on the project! Your work is really coming together beautifully.
Just a quick tip for your
<div>
using flexbox—removingheight:100vh
will help avoid a fixed height restriction. Instead, addingmin-h-dvh
ensures a minimum height while keeping things flexible.Best practices for heading tags:
It's always a good idea to use heading tags in chronological order for better accessibility and structure:<h1>
– Could be the Result Summary Component withsr-only
for improved screen reader support.<h2>
– Your Results<h3>
– Summary
Also, for the
<button>
, make sure to add :focus-visible states so that users who navigate with a keyboard can access your website smoothly. This improves usability and accessibility!Additionally, icons in this project are decorative and don’t need alt text. Instead, you can leave the alt attribute blank and add
aria-hidden="true"
to ensure screen readers skip them.To improve your code structure use a
ul
to group the image, text content. Here is an example:<ul> <li> <div> <img src="./assets/images/icon-reaction.svg" alt="" aria-hidden="true" /> <h3 >Reaction</h3> </div> <p ><span> 80 </span> / 100</p> <ul>
This will enhance structure and semantic clarity while maintaining accessibility.
Closing thoughts: Your attention to detail and commitment to accessibility make a huge difference! Keep refining your skills and implementing best practices—you're on a great path. Looking forward to seeing what you build next! 🚀
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