ReactJs

Hi 👋 Good job for your project

Your solution looks a lot different than the original design.

Your ThemeContext and CountryContext could be in seperate files, (usually in a context folder).

When we click on a border in the list (in the details page), it does nothing (user should be redirected to the border country details page)

Prioritize using semantic tags instead of div when you can.

Your details page can glitch and show "country not found". I recommend checking useParams().

Good luck 👍

Hi Kaddesh,

I don't agree with the previous feedback; you've done a great job. Your use of a custom select component instead of the standard <select> and <option> shows a solid understanding of frontend development. To improve, consider adding subtle animations and adjusting the width for a more refined look.

The grid needs a bit more work around the 1100px breakpoint, as it doesn't scale perfectly. Dark mode isn't fully functional yet, but you're on the right track. Great job using only context; it's impressive! However, I recommend learning Redux Toolkit for managing state in larger projects.

While semantic HTML is good for accessibility, it doesn't significantly impact SEO in client-side rendered apps like React. If SEO is important, consider using Next.js for better performance.

Keep up the great work!

Best, Teodor

Very nicely done! But remember semantic HTML still applies even in react! So make sure instead of wrapping every component in divs use elements like <main>, <section>, and <select> for the dropdown!

Keep up the good work, your code does show you know a good bit about react :)