Skip to content
Submitted 2 months ago

Rest Countries Api using React and Tailwind

fetch, react, swr, tailwind-css, vite
P
Kamran Kiani•2,780
@kaamiik
A solution to the REST Countries API with color theme switcher 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? What I'm most proud of
  • Successfully implementing a responsive, accessible dark mode that persists across sessions
  • Creating a clean component architecture with proper separation of concerns
  • Building an efficient search and filter system that works across multiple data points
  • Implementing proper error handling and loading states for a better user experience
What I would do differently
  • Add more comprehensive error boundaries for better error handling
  • Consider using TypeScript from the start for better type safety
What challenges did you encounter, and how did you overcome them? Challenges encountered and solutions

  1. Border Countries Data Fetching

    • Challenge: Needed to make multiple API calls to get border country names
    • Solution: Implemented bulk fetching using SWR and proper loading states
    const { data: borderCountries } = useSWR(
  () => borders?.length > 0 
    ? `https://restcountries.com/v3.1/alpha?codes=${borders.join(',')}`
    : null,
  fetcher
);

  2. Navigation History

    • Challenge: Back button wasn't working as expected with nested routes
    • Solution: Used useNavigate(-1) for proper browser history integration

  3. Form State Management

    • Challenge: Deciding where to place search/filter state
    • Solution: Lifted state to parent component while keeping form logic encapsulated
What specific areas of your project would you like help with? Areas I'd like help with

  1. Performance Optimization

    • Best practices for reducing unnecessary re-renders
    • Strategies for optimizing API calls and caching

  2. State Management

    • When to use Context vs. Props vs. State Management Libraries
    • Better patterns for managing complex state

  3. Accessibility

    • Ensuring the application meets WCAG standards
    • Improving keyboard navigation and screen reader support
Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Kamran Kiani's solution.

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