Explore country data with ease in this interactive project built with Vue 3 and the Composition API using TypeScript. Designed to pull data from the REST Countries API, this application offers a visually rich and responsive experience in both light and dark modes. We've prioritized a polished, user-friendly interface to provide seamless browsing and information access for each country.
- Homepage Display: All countries are presented right on the homepage, showcasing key details fetched directly from the REST Countries API.
- Search & Filter Options: Users can search by name with typo tolerance and filter by region, making it easy to pinpoint specific countries.
- Detailed Country View: Each country links to a dedicated page with in-depth details and clickable options for viewing neighboring countries.
- Light/Dark Mode Toggle: Effortless switching between light and dark themes for an accessible experience.
- Sorting Options: Countries can be sorted by population or name, offering a flexible browsing experience.
- Responsive Design: Carefully crafted to look and perform well on all screen sizes, meeting both mobile and desktop requirements.
- Performance-Driven Enhancements:
- Lazy loading for images and list items to optimize loading speeds.
- URL query synchronization for maintaining filter and sort states.
- Fallback and error handling to provide a smooth experience.
Throughout the project, we adhered to best practices and used the latest technologies to maximize performance and deliver a high-quality user experience. The application leverages Vuetify for a consistent and elegant UI, and we’ve optimized code structure and interactions to ensure intuitive and efficient usability.
Our primary focus was to meet the exact requirements without extending beyond scope. However, there's ample potential for additional features, refinements, and improvements to further enhance functionality and prevent potential issues.