Countries App

Fun app for the geography lovers!

This is a final project for a React Advanced course at Business College Helsinki. The main purpose was to practice the usage of React Redux, React Redux toolkit and Firebase authentication :)

This app displays all countries and territories from the REST Countries API, which can be filtered and sorted. The app uses Firestore Authentication to let users register, log in and log out.

Each country has a detailed info page, with embedded Google Maps and weather data.

Users can favourite countries, and see them separately on a favourites page. The favourites are saved to Firestore Database along with the basic user data.

Live page

markusvjh-countries-app.netlify.app

If you don't want to make a new account, you can log in as '[email protected]' with the password 'password'.

Local machine setup

If you want to set up the project on your local machine instead, you need to:

• clone the repository

• create a .env file in the root of the project with the necessary api keys for google api, openweather and firebase (.env.example)

• run npm install

• run npm start

Technologies used

• HTML
• JS
• CSS
• Bootstrap
• React
• React Router Dom
• React Redux and React Redux Toolkit
• Firebase authentication
• Firestore Databse

Acknowledgement

Guidance by our teacher @martin-holland

Countries API REST Countries

Google maps API for country maps

Unsplash.com for cool images for countries

OpenWeather API for weather data for capital cities

Background image by Clker-Free-Vector-Images at Pixabay

Desktop Video

countries.desktop.mp4

Mobile Video

countries-mobile.mp4