results-summary-component

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

I'm most proud of catching a real accessibility bug — some of my text was failing WCAG contrast on the purple gradient background. I checked the actual contrast ratios instead of assuming the design was accessible by default, and fixed it while keeping the look close to the original.

This was also my first project using React without a framework like Next.js handling things for me. Breaking the UI into components (ScoreCard, Summary, SummaryItem) and rendering the score list from a data array felt natural, since I already think in single-responsibility files.

Next time, I'd decide on my CSS organization upfront (one file vs. per-component) instead of switching mid-project. I'd also like to build a better eye for spotting contrast issues myself, instead of relying on a manual check to catch them.

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

The biggest challenge was working out React and Vite's setup specifically — I've used Next.js before, but this was my first time scaffolding a plain Vite + React project without a framework handling routing/rendering for me. I had to get clear on what Vite actually does versus Next.js, and how to add it into a folder that already had Frontend Mentor's starter design files in it. I solved it by scaffolding fresh into its own folder, then manually copying over the assets instead of forcing Vite into a non-empty directory.

I also went back and forth on CSS organization — one file vs. splitting per component like I do in my vanilla JS projects. I started splitting it, decided it was overhead I didn't need yet for a project this size, and consolidated back into one file, with a plan to split it later if it grows.

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

Here's a draft — specific enough to get real feedback instead of generic comments:

A few things I'd love feedback on:

1. Component structure — I split the UI into ScoreCard, Summary, and SummaryItem. Is this the right level of granularity for a component this size, or is it over-split for something this simple?

2. Prop spreading — I used {...item} to pass all properties from my data array as props at once in SummaryItem. Is this considered good practice, or is it better to be explicit and list each prop individually for readability?

3. CSS organization — I currently have everything in one index.css file rather than splitting styles per component. At what point (project size, team size, etc.) does it actually make sense to split CSS per component in a React project?

4. Accessibility beyond contrast — I checked color contrast manually, but I'm not confident I caught everything. Are there other accessibility issues in my markup or component structure I should be looking for?