⛅ Weather App ⛅

Made in React, constructed with create-react-app, utilizing OpenWeatherMap's API.

☀️ See Live ☀️

📖   Lessons Learned

  My second react project, after the mandatory to-do list!
  The main focus here was to make external API calls to pull weather infomation from a third party site.

  I got more comfortable using Hooks rather than class based components.
  It removes the hassle of binding to 'this' constantly. Using setState method with props makes state management simpler & elegant.

  I started off with a simple CSS layout then modified to a flexbox display with a left page and right page component.
  The left page delivers the main information and the right contains the search bar & extra information.

 This application tested my skills in adapting & optimizing a responsive web page to fit on mobile screens.
  After a bit of tweaking I settled on a simple vertical mobile view design where the right page fits under the left like a stack of cards.

🔮   Future Features

• 📅   3-Day / Week view
• 🌡️   Celsius to Fahrenheit converter
• 🧭   Compass for wind direction
• 🏙️   More dynamic backgrounds

🚀   Deployment

Deployed with Github Pages

🔨   Get Started

From your command line, first clone this repo:

# Clone this repository
$ git clone https://github.com/ginoleeswan/weather-app-basic/

# Go into the repository
$ cd weather-app-basic

# Remove current origin repository
$ git remote remove origin

Install

npm install

Usage

npm run start

Run tests

npm run test

✍️   Author

👤 Gino Swanepoel

  Twitter: @mrginolee
  Github: @ginoleeswan
  LinkedIn: @ginoswanepoel

❤️   Show your support

Give a ⭐️ if this project helped you!