GeoVault is a modern, responsive web application that allows users to explore detailed information about countries worldwide, including population, capital, region, languages, and flags.The app includes interactive features such as search, filtering, sorting (using array higher-order functions), country comparison, and a dark/light mode toggle to enhance user experience.
Built using HTML, Vanilla JavaScript, and Tailwind CSS, the application fetches real-time data from the REST Countries API to display key details such as population, capital, region, languages, and flags.
GeoVault focuses on providing a smooth user experience through dynamic features like search, filtering, and sorting, all implemented using JavaScript array higher-order functions (filter, sort, map, etc.).
The goal of this project is to demonstrate strong fundamentals of API integration, DOM manipulation, and modern UI design, while building a practical and visually appealing data-driven application.
| API | Purpose | Auth Required |
|---|---|---|
| REST Countries | Country data (population, area, region, capital, languages, currencies) | β |
-
Country Info Card β Displays population, region, capital, languages, currency
-
Search Functionality β Implemented using
Array.filter() -
Filtering System β Region, subregion, population filters using chained
filter() -
Sorting Options β Name, population, area using
Array.sort() -
Comparison Panel β Compare up to 2 countries side-by-side
-
Dark/Light Mode β Toggle for better user experience
- JavaScript (Vanilla JS) β Core logic
- REST Countries API β Country data
- CSS (Custom Styling) β UI design
filter()β Search & filteringsort()β Sorting datamap()β Rendering UIfind()β Compare logic
| Milestone | Description | Deadline |
|---|---|---|
| M1 | Setup & planning | 23 March |
| M2 | API integration | 1 April |
| M3 | Features implementation | 8 April |
| M4 | Deployment & polish | 10 April |
Mrinal
GitHub: @mrinal-create