A Frontend Mentor challenge I tackled in my spare time 👨💻. This was a great opportunity to A) Challenge myself to learn some technologies / methodologies that I haven't been exposed to professionally and B) Utilize them all to build something small-scale with attention to detail and great UX.
Fetching, loading, and error states are managed by a custom useFetch hook. <Loader /> incorporates a spinner indicating data fetch is in progress. If an API error occurs, an <ErrorMessage /> component is shown and prompts the user to try again.
User's can run a blazing fast client-side search for a specific country or they can use the dropdown filter to select groups of countries by region.
Using the Styled Components library's <ThemeProvider /> component and a custom useTheme hook, the user can toggle between dark & light themes. The selected theme is also persisted to Local Storage and is retained after page refresh.
A combination of CSS Grid, Flexbox, and media queries keep things responsive across all devices.
The entire desktop application is accessible via keyboard navigation. Following accessibility guidelines, properties have been added to HTML elements to allow screen readers to assist users with visual impairments.
tab~ navigates forwardsshift + tab~ navigates backwardsenter~ Clicks on a link or buttonspace~ Used to toggle the "region" filter
Used sparingly but purposefully, these help: guide the user's attention, communicate state changes, and (hopefully) increase engagement.
- React v17
- React Router v5
- Styled Components v5
- React Hooks
- React Router
- Styled Components
- Data Fetching, Searching, and Filtering
- CSS Grid
- CSS Flexbox
- CSS Mixins
- Keyframe Animations
- Microinteractions
- Theme switching
- Web Accessibility
- Keyboard Navigation
- Responsive design
- Icon design
This project was bootstrapped with Create React App.