Countries App

The Countries App is a web application that allows users to explore detailed information about different countries, including weather forecasts, news headlines and view country images. It integrates various third-party APIs and Firebase authentication and database for a seamless user experience.

Features

• Search and Filter Countries: Browse a list of countries with options to search by name and filter by region.
• Save/remove countries to/from Favourites: Save a country to a list of Favourites powered by Firestore database.
• Country Details: View detailed information about each country, including population, language, capital, currency and more.
• Weather Forecast: Get current weather data in a selected country capital and a 3-day weather forecast using the OpenWeather API.
• Latest News: Read the latest news headlines and summaries related to the country, fetched from the News API.
• Image Gallery: View pictures of the country fetched from the Unsplash API.
• Firebase Authentication: Sign up, log in, and authenticate users with Firebase.

Technologies Used

• React: For building the user interface.
• React Bootstrap and Bootstrap: For styling and responsive layout.
• Bootstrap Icons: For modern icons.
• React Router: For website routing.
• Redux: For state management.
• Axios: For handling API requests.
• Firebase: For authentication and database.
• REST Countries API: For country data.
• OpenWeather API: For weather forecasts.
• News API: For fetching news articles.
• Unsplash API: For fetching images.
• Currency Converter API: For currency exchange rates.
• React Hot Toast: For notifications.
• React Scroll-to-Top: For a scroll-to-top component.

Screenshots

Getting Started

Prerequisites

• Node.js (version 14 or above)
• npm or yarn (for managing packages)
• API Keys: You will need API keys for:
  • Firebase
  • OpenWeather API
  • News API
  • Unsplash API

Installation

1. Clone the repository:

   git clone https://github.com/alrammahi-mariia/countries-app.git
   cd countries-app

2. Install dependencies:

   npm install

   or, if you're using yarn:

   yarn install

3. Set up the environment variables: Create a .env file in the root directory and add your API keys:

   VITE_FIREBASE_API_KEY=your_firebase_api_key
   VITE_UNSPLASH_API_KEY=your_unsplash_api_key
   VITE_WEATHER_API_KEY=your_openweather_api_key
   VITE_NEWS_API_KEY=your_news_api_key
   

4. Set up Firebase:

   • Create a Firebase project and enable authentication with email and password.
   • Set up Firestore database.

5. Run the development server:

   npm run dev

   or, if you're using yarn:

   yarn dev

6. Open the application in your browser: Navigate to http://localhost:5173 to view the app.

Contributing

Contributions are welcome! Please fork the repository, create a new branch, and submit a pull request.

License

This project is licensed under the MIT License.

Credits

This project was developed as part of the React Advanced course at Business College Helsinki. Thanks to our course instructor, Martin Holland, for the guidance and support throughout the course!