Rest Countries Explorer built using React, Vite, and Tailwind CSS

What are you most proud of, and what would you do differently next time? 🌟 What You Can Be Proud Of

• Precise deployment with GitHub Pages, including handling tricky routing issues with BASE_URL and nested paths
• Maintaining custom CSS class names (like Blue950) exactly as intended, even when I tried to meddle 😅
• Implementing dark mode, region filtering, search, and border navigation flawlessly—and not just functionally, but with polished responsiveness
• Debugging like a pro, tracking down everything from broken links to MIME errors to CORS issues

This wasn’t just coding—it was full-stack problem-solving, from dev to deployment.

---

🔁 What You Might Do Differently Next Time

• Set up the base path and routing structure earlier, so less rework is needed when deploying
• Use environment-specific configs, like a .env.production to streamline the BASE_URL logic
• Consider using useNavigate() for smoother navigation without nesting <Link>s, especially for back buttons
• Add a README earlier in the project, documenting decisions as they evolve to make handoff and submission smoother

What challenges did you encounter, and how did you overcome them? 💥 Challenges Faced & How I Solved Them

1. Routing errors on deployment
When deploying to GitHub Pages, I encountered broken routes and nested path issues like /country/Afghanistan/country/Iran....
→ I resolved this by configuring BrowserRouter with the correct basename using import.meta.env.BASE_URL, and adjusted <Link> paths to be absolute where necessary.

2. Incorrect asset loading paths
Initially, assets like main.jsx and index.css failed to load on GitHub Pages due to mismatched URLs.
→ I updated vite.config.js to set the base path to my repository name and ensured index.html used relative paths (/src/main.jsx) that Vite rewrote correctly on build.

3. CORS and MIME-type issues during local file testing
Trying to open index.html directly (via file://) led to browser blocks and script failures.
→ I switched to serving the project with npm run dev for development and npm run preview for testing builds.

4. ClassName overwrites affecting dark mode styling
Early on, auto-formatting tools or helper suggestions changed custom class names like Blue950, breaking dark mode.
→ I maintained strict control over class names and double-checked that none of my custom Tailwind tokens were overwritten.

5. GitHub Pages deployment confusion
At first, the live URL didn't appear in the Pages settings.
→ I ensured the dist/ folder was pushed correctly using the gh-pages package, and verified Pages settings pointed to the correct branch and folder.

What specific areas of your project would you like help with? 🔍 Areas I’d Love Feedback On

1. Routing Strategy with basename
I used BrowserRouter with basename={import.meta.env.BASE_URL} to handle GitHub Pages routing. Are there best practices I’ve missed here, especially for avoiding nested path issues in multi-page apps?

2. Link Navigation in Nested Views
My border country links were originally relative and caused broken URLs. I fixed them using absolute paths like /country/${name}. Is this the best approach, or would useNavigate() or other methods be more elegant?

3. Vite + GitHub Pages Deployment Workflow
I configured Vite with a base field and used gh-pages for deployment. I’d love insight into whether this setup could be simplified or improved for larger projects.

4. Styling Strategy in Tailwind
I use custom colors like Blue950/Grey50 and a custom dark mode via Context. I’d appreciate any feedback on how to improve readability, reusability, or scalability of my utility-first approach.

5. Code Structure and Separation
Currently, components and pages are in a flat src/ layout. Should I be refactoring into feature-based folders or splitting out logic like filtering/search into custom hooks?