Responsive Space Tourism

Community feedback

• 

  Fakorede Olamide•180

  @fsp3012Posted 12 months ago

  Thanks for the review

  0
• 

  Vlad•240

  @vladmeePosted over 1 year ago

  Great work! Your solution is complex, demonstrating effective use of React templating, Tailwind classes, and data fetching from JSON. Here are just a few small things you can improve on:

  1.I noticed your tabs don't showcase an active state. It's important to highlight the user's selection, right? This could be done by adding a conditional class to your button element, like so:

  className={`${index === value ? 'border-b-2' : ''} other-classes`}
  

  2.Your mobile menu doesn't seem to close after a user navigates elsewhere. Luckily, you already have a handleClick function that can remedy this. Simply invoke it when the Link element is clicked:

  <Link 
  onClick={handleClick}
  className="md:hover:border-b-2 pb-5" to="/">
  00 HOME
  </Link>
  

  3.I've noticed extensive use of the !important directive in your CSS. Keep in mind, this should ideally be a last resort, typically when styling a third-party element where its code is inaccessible. Given that you're using Tailwind and custom CSS, it's unlikely to be necessary. To rectify this, I suggest removing all instances of !important, then addressing any design inconsistencies that arise. This might even involve stripping back the classes and rebuilding the elements' styling, which could be a great learning experience.

  I must compliment your proficiency with Tailwind. You clearly have a good understanding of its classes and the final result is excellent. Your handling of React is great too. Despite this being a small project, the structure is well organized. Keep up the good work!

  0