Country Explorer is a lightweight web app designed to help users search, filter, and explore detailed information about countries around the world. Whether you're brushing up on geography, preparing for travel, or just curious about global data, this tool offers a fast and intuitive way to discover countries by name or region. Built for clarity and ease of use, Country Explorer empowers users to interact with global data in a meaningful way.
Link to project: Country Explorer
Tech used: TypeScript, HTML, CSS
This project was built using TypeScript for type-safe logic and modular structure, HTML for semantic layout, and CSS for styling. It integrates with the REST Countries API to fetch real-time country data including flags, population, region, capital, and more.
Users can:
- Search for a country by name using the search bar
- Filter countries by continent/region
- Click on a country to view more details on a dedicated
detail.htmlpage - Toggle between light and dark mode for a personalized viewing experience
The interface is optimized for clarity and mobile responsiveness, making it easy to use across devices.
This project deepened my understanding of:
- Fetching and handling external API data with TypeScript
- Dynamically filtering and rendering content based on user input
- Implementing dark/light mode toggling using CSS and JavaScript
- Structuring modular, maintainable code with clear separation of concerns
- Designing intuitive user interfaces with semantic HTML and responsive CSS
Country Explorer reflects the power of simple tools built with purpose. It’s a foundation for more advanced educational platforms and interactive data visualizations to come.