https://github.com/stefanelli990/country-app
A straightforward web application that allows users to search for information about countries. The app provides details such as the country's name, capital, population, and more.
https://github.com/stefanelli990/country-app
composition frontend-mentor iconify pinia rest-countries-api restcountries-api tailwindcss vue vue-router vueuse
Last synced: 3 months ago
JSON representation
A straightforward web application that allows users to search for information about countries. The app provides details such as the country's name, capital, population, and more.
- Host: GitHub
- URL: https://github.com/stefanelli990/country-app
- Owner: stefanelli990
- Created: 2023-11-05T21:23:05.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-04-21T10:30:33.000Z (over 1 year ago)
- Last Synced: 2025-06-30T10:03:52.494Z (4 months ago)
- Topics: composition, frontend-mentor, iconify, pinia, rest-countries-api, restcountries-api, tailwindcss, vue, vue-router, vueuse
- Language: Vue
- Homepage: https://harmonious-babka-904b55.netlify.app/
- Size: 676 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor Challenge: Country App
This project is a solution to the [Country App challenge](https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca) from Frontend Mentor. The goal of this challenge is to build a country information app that consumes a REST Countries API and allows users to search for countries, view details about them, and toggle between light and dark color themes.
You can view a live demo of the project **[here](https://harmonious-babka-904b55.netlify.app)**.
## Features:
- **Search Functionality:** Users can easily search for countries by entering the country name in the search bar.
- **Country Details:** Display comprehensive information about the selected country, including its capital, population, area, and more.
- **Country Comparison:** Compare countries side by side, allowing users to see informations about selected countries.
- **Responsive Design:** The app is designed to work seamlessly on various devices, ensuring a pleasant user experience.
- **Dark Mode:** Enjoy a visually comfortable experience with the option to switch to Dark Mode.
## Technologies Used:
- **Vue.js** for building the frontend of the application.
- **Tailwind CSS** for styling and layout design.
- **Pinia** for state management.
## Installation
To run this project locally, follow these steps:
1. Clone the repository.
2. Install the required dependencies using `npm install`.
3. Start the development server with `npm run dev`.
4. Open your browser and navigate to `http://localhost:5173` to use the app.