Countries in the world
Project Description
Countries of the world is a Frontendmentor.io challenge project I built using Nextjs and ChakraUI. It's a react web application that integrates with the REST Countries V2 API to pull country data, thereby allowing users to search for countries, filter countries by regions, and view details for each country.
Stack:
NextJSChakra UILibraries:
Chakra UIAxiosRedux ToolkitReact-selectCSS ModulesCode:
RepositoryLive:
LiveDesign Process
This project was built with NextJs and react libraries such as Redux Toolkit for app-wide state management, React-select for handling the drop-down select menu and styling it since you can not style a select element's children, Axios for making http requests, NProgress for progress bar, Use-local-storage for handling dark & light mode, Framer motion filter animations, and so on.
Challenges
The major challenge i had while working on this project was handling the fetched data. The API returned two objects with the same objectId so I had to filter one out. As simple as that sounds, trust me it took me time to work my way around it. Another problem was styling the react-select component. In the end it was worth getting to grips with it, because I then got to learn about Style props. The API doesn't support pagination and that causes the app to lag a little as the data returned is quite large
Future Improvements
The dark mode and light mode do not sync well. I guess i didn't make use of the use-storage library the right way. I hope to change with chakra. I also will add extra animations to make the app engaging and less boring.