World Explore

World Explore is a web application that provides detailed information about countries across the globe. It offers an interactive and user-friendly interface to explore data such as population, capital city, neighboring countries, currencies, native names, languages, and more.

Table of Contents

• World Explore
  • Table of Contents
  • Features
  • Demo
  • Technologies Used
  • Installation
  • Usage
  • API
  • Deployment
  • Contributing
  • License
  • Contact

Features

• Search and Filter:

  • Search for any country using the search box at the top of the page.
  • Filter countries based on their continent.

• Country Cards:

  • The homepage displays country cards with flags, names, population, and capital cities.
  • Click on a country card to view more detailed information about the selected country.

• Responsive Design:

  • Fully responsive layout that works on desktop, tablet, and mobile devices.

• Dark Mode:

  • Toggle between light and dark modes for comfortable viewing.

Demo

View Live Demo

Preview:

Technologies Used

• Next.js - React framework for production
• React.js - JavaScript library for building user interfaces
• Tailwind CSS - Utility-first CSS framework
• TypeScript - Typed superset of JavaScript

Installation

To run this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/Wondahs/countries
   cd countries

2. Install dependencies:

   Using pnpm(RECOMMENDED):

   pnpm install

   Or, using npm:

   npm install

3. Run the development server: Using pnpm(RECOMMENDED):

   pnpm run dev

   Or, using npm:

   npm dev

4. Open your browser: Navigate to http://localhost:3000 to view the application.

Usage

1. Use the search bar to find a specific country.
2. Click on the continent filters to view countries from a particular region.
3. Click on a country card to view detailed information about that country.
4. Toggle dark mode using the switch in the navigation bar.

API

The application uses a locally hosted JSON file to provide country data. An API is implemented to read this file, parse it to JSON, and send it to the frontend for rendering. The API endpoints include:

• /api/countries: Returns all countries
• /api/countries/:id: Returns data for a specific country

Deployment

The project is deployed on Vercel. You can view the live application here.

For deploying your own instance:

1. Fork this repository
2. Sign up for a Vercel account
3. Connect your GitHub account to Vercel
4. Deploy the forked repository

Contributing

Contributions to enhance the functionality and appearance of World Explore are welcome! Here's how you can contribute:

1. Fork the repository
2. Create a new branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Please read CONTRIBUTION GUIDELINES for details on our code of conduct and the process for submitting pull requests.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contact

Github/Email - Wondahs / [email protected]

Project Link: Countries