Skip to content
Submitted 3 months ago

Responsive Planets Fact Application in ReactJS

react-router, tailwind-css
P
Rohan T George•230
@19Rohan97
A solution to the Planets fact site challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I'm really proud that I was able to build the Planets Fact Site using dynamic nested routes with React Router, fully driven by JSON data without hardcoding anything.

This was the first time I worked with capturing multiple URL parameters (:planet and :section) and dynamically rendering content and images based on route changes — and it worked smoothly across different pages and sections!

I'm also proud that I handled common real-world deployment issues (like GitHub Pages asset path problems and Vercel hosting) by learning how to adjust vite.config.js and correctly structure public assets.

Seeing the project fully deployed and working responsively on desktop and mobile was a huge win!

Next time, I would:

  • Plan error handling earlier (like setting up 404 pages and user feedback messages) instead of adding them later.
  • Improve page transitions by adding animations with Framer Motion to make navigation between planets feel smoother.
  • Add dynamic SEO titles and meta descriptions (e.g., "Mercury - Planets Fact Site") using react-helmet or Vite plugins.
  • Structure data even better to allow easy expansion, like adding new planets or moons without touching core code.
  • Use lazy loading and code splitting techniques to optimize the app's loading speed.

Also, I would try to structure components for maximum reusability and future-proofing.

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

One major challenge I faced was handling dynamic routing with React Router.
Initially, I struggled with understanding how to capture multiple parameters from the URL like :planet and :section. I overcame this by carefully reading the React Router documentation and practicing with small examples before implementing the final structure.

Another challenge was deploying the app to GitHub Pages.
Since Vite builds the project assuming it is hosted at the domain root, all asset paths were broken after deployment. I resolved this by setting the correct base path inside vite.config.js and rebuilding the project with the proper configuration.

Later, when moving to Vercel, I learned that deployment is much smoother but requires handling image paths and 404s properly. I made adjustments to move static assets to the /public folder and added safety checks in my code to prevent crashes when navigating to invalid routes.

Finally, I encountered a runtime error when trying to access properties on undefined if the planet in the URL didn't match any entry in the JSON file. I solved this by adding validation checks like:

if (!currentPlanet) {
  return <div>Planet not found</div>;
}

Overall, each challenge taught me more about deployment, routing, and error handling in real-world React apps.

✅ This keeps it professional, clear, and easy for reviewers to understand your real learning journey.

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

  • Optimizing dynamic classNames with TailwindCSS:
    Currently, I'm dynamically generating some classes like bg-${planet} for button backgrounds. I would love feedback on better patterns for handling dynamic Tailwind classes safely, especially during production builds (without needing large safelists in tailwind.config.js).

  • Improving performance for image loading:
    I'm directly rendering planet images based on the selected section. I'd appreciate suggestions on how to implement lazy loading or image optimization to improve performance, especially for slower network connections.

  • Error handling and redirects:
    I added a basic check for invalid planets, but I would like guidance on best practices for clean 404 handling — for example, should I add a dedicated NotFound component and route, or handle it dynamically inside the layout?

  • Project structure improvements:
    Feedback on how to better organize components, routes, and data fetching for larger scalability (like if I wanted to add moons, stars, or satellites later).

  • SEO optimization ideas:
    Right now, the page title and meta description are static. I'd love tips on how to dynamically update SEO metadata (like "Mercury - Overview") based on the active planet and section.

✅ This way, reviewers or other developers can give you very targeted and useful feedback!

Code

Please log in to post a comment

Log in

Community feedback

  • Kim Fransson•420
    @kim-fransson

    Hi man! Nice work completing the challenge!

    Regarding SEO optimization ideas:

    If I would use react-router, I would probably try and use a pre-built hook for updating the 'favicon' and 'title' (maybe also a hook for updating description)

    Something like:

    import * as React from 'react'
import { useLocation } from 'react-router'
import { useFavicon } from 'react-use'; // if you're using `react-use`, or your own hook

function Component() {
  let location = useLocation()
  const [favicon, setFavicon] = React.useState("default.favicon");

  useFavicon(favicon);

  React.useEffect(() => {
    // Determine the favicon based on location
    let newFavicon;

    // logic to determine which favicon to set

    setFavicon(newFavicon);
  }, [location]);

  return (
    // ...
  );
}

    I like the idea to reuse the images as favicons, you probably need to resize them first. (I just took some random planets icons).

    Some hooks examples:

    Or you can try and implement them from scratch!

    All the best!

    // Kim

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