Weather app created with ReactJS that provides 5 day forecast for any US zipcode

95014-Weather-App

A weather app created with ReactJS that gives a simple 5 day weather forecast for any zipcode in the US. OpenWeatherAPI provides the forecast information, while Zip-Code API was used for the zipcode look up and validation. Material UI was used for components like the card and search bar.

This project was bootstrapped with Create React App.

Important Notes

Still working on documentation

Motivation

The app was born out of curiosity! I wanted to play around with ReactJS and build something by myself. This is my first project using React. The animated text that loads at the beginning of the screen was done with the help of a HTML/CSS tutorial, just for added fun and experimentation.

What This Project Helped Me With:

  • Better understanding of states and components in React
  • How to create a search bar with React
  • How to access API endpoints
  • Working with JSON format data
  • How to properly store API keys in environment variables
  • Introduction to animating SVG images with CSS

Possible Future Changes:

  • Displaying more detailed weather information through a card that expands to show more information
  • Better UI design

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

Screenshots

Languages/Framework

Javascript, ReactJS, MaterialUI, HTML/CSS

API Reference

Current Weather Data from OpenWeather
5 day / 3 hour Forecast Data from Open Weather
Zip Code Data
Weather Icons

Download Details:

Author: cathielin

Source Code: https://github.com/cathielin/95014-Weather

#reactjs #react #javascript

Weather app created with ReactJS that provides 5 day forecast for any US zipcode
55.75 GEEK