Frontend Mentor - REST Countries API

This is a solution to the REST Countries API challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Screenshot

Links

• Solution URL: https://github.com/rodolfomayora/rest-countries.git
• Live Site URL: https://rest-countries-app-swart.vercel.app/

My process

• RC0: Proyect Configuration
• RC1: Assets Definition
• RC2: View Navigation Configuration
• RC3: Layout and Container Component
• RC4: Header Component
• RC5: SearchCountry Component
• RC6: RegionFilter Component
• RC7: CountryPreview Component
• RC8: Redux and Redux Saga configuration"
• RC9: API Integration and Search Country using input field
• RC10: Normalized reducer countries data
• RC11: CountryList Component (section)
• RC12: Improve Layout and fix country data
• RC13: Filter Countries by Region
• RC14: CountryFilters Component
• RC15: Dinamyc route configuration for Country Detail
• RC16: Improve performance and UX of SearchCountry
• RC17: BackButton Component
• RC18: BorderCountryButton Component
• RC19: CountryDetail Component
• RC20: Improve performance with List Virtualization (windowing)
• RC21: Solve reload country detail page issue
• RC22: Update README.md
• RC23: Improve UX for RegionFilter
• RC24: 404 Page Component

Built with

• ReactJS
• TypeScript - JavaScript Superset
• Redux - Global State Management Pattern
• Redux-Saga - Redux Side Effect Manager
• SASS - CSS Pre-procesor
• CSS Modules - For Scoped styles
• List Virtualization - windowing
• Semantic HTML5 markup
• Flexbox
• Mobile-first workflow

development techniques for performance improvement

• debouncing
• Windowing (List Virtualization)

Author

• Website - https://rodolfo-mayora-pereda.vercel.app
• LinkedIn - https://www.linkedin.com/in/rodolfo-mayora-pereda
• Frontend Mentor - https://www.frontendmentor.io/profile/rodolfomayora