/react-countries-bootstrap

Weather app built in React

Primary LanguageJavaScript

Weather App made with React

With this app you can browse through small informative country cards, and by clicking them each one will take you to a new page with its capital's city weather status and forecast. There's also a posibility to save your favourties and access at the "Favourites" section.

The data is facilitated by the One Call API from OpenWeather and the RESTFul API from Rest Countries.

This is a project done for the Web Development program @Helsinki Business School (Oct 2023). The main focus was gettting acquinted with Redux and the implemention of robust authentication tools, like the ones Google's Firebase provided for this project.

Live page

Try it Here!

Technologies

  • Reactjs
  • React Redux and React Redux Toolkit​​​​​​
  • Bootstrap
  • Google Firebase (Authentication, and Cloud Firestore)

Set up

git clone https://github.com/hiphip12/react-countries-bootstrap.git
cd react-countries-bootstrap

add .env file with your private keys/ids (follow env.example)

npm install
npm start

Credits

The assignment, inital codebase and guidance were provided by Martin Holland during Sep/Oct 2023 @Helsinki Business College.

Authentication backend & data storage provided by Google's Firebase

Weather data was provided by the One Call API from OpenWeather

Country data was provided by the RESTFul API from Rest Countries

Images provided by unsplash.com

Favicon is from unicode.org (code U+1F326)

Screenshots

Home page:

Desktop

alt text

Mobile

alt text

Resgitration & Log In pages:

Desktop

alt text

Mobile

alt text

Countries & Favourites pages:

Desktop

alt text

Mobile

alt text

Weather Forecast page:

Desktop

alt text

Mobile

alt text

No weather info page

alt text