REST-Countries-API

Solution retrospective
I’m most proud of getting the entire REST Countries API app up and running using React, Vite, and React Router, then deploying it successfully on GitHub Pages. It was a great learning experience figuring out how routing works in single-page apps hosted on subdirectories.
If I could do anything differently, I’d set up deployment and routing considerations earlier in the project. I only realized late that GitHub Pages requires special handling for routes and assets, which led to a lot of backtracking.
What challenges did you encounter, and how did you overcome them?One major challenge was getting React Router to work correctly with GitHub Pages. I encountered a white screen issue due to incorrect configuration of basename in createBrowserRouter. After research and help from the community, I learned that I had to use the history package to create a custom history object and pass it to the router.
Another challenge was making sure that refreshing a route like /country/:name didn't result in a 404. I solved this by copying index.html to 404.html in the dist/ folder post-build, which is a known workaround for GitHub Pages and SPA routing.
What specific areas of your project would you like help with?I’d love feedback on how I structured my routing logic — is using createBrowserRouter with history the best approach for GitHub Pages, or would a HashRouter have been more straightforward?
Are there better strategies to handle 404s or route refreshes in a Vite + React Router setup?
Is my project structure (components, pages, assets) scalable and maintainable if I want to expand the app in the future?
I’d also appreciate performance tips for working with larger APIs or handling errors in a more user-friendly way.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Fikerte-T
hi @Bunchydo
Congratulations!!! You did a great job with this app.
I am learning myself, but to answer some of your questions
- Regarding component structure and scalability,
<div className="nav"> <span className="nav-title">Where in the world?</span> <span className="theme" onClick={() => document.body.classList.toggle("light-mode")} > <span className="-theme-icon">☾</span> Dark Mode </span> </div> </div>
You can put this code in a separate component like Header.jsx and render it whenever you need it. Or in Router like this
<Router> <Header /> <Routes> <Route path= '/' element={<HomePage />} /> <Route path='/detail/:name' element = {<CountryDetail />}/> </Routes> </Router>
so that it displays whichever route you're on. Also for the search and select filters
- Handling 404 errors
You can create a new component called
NotFound
or whatever you like, with a link to go back home,
export default function NotFound() { return ( <div> <h1>Page Not Found</h1> <Link to="/">Go back home</Link> </div> ); }
and define a route for it, that catches all 404
<Route path="*" element={<NotFound />} />
Hope it helps. Keep going, happy coding
Marked as helpful
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