nssilva / 95014-Weather

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

View a working deployment of this app on Heroku

Screenshots

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.

Languages/Framework/Libraries

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

About

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


Languages

Language:HTML 44.2%Language:JavaScript 42.2%Language:CSS 13.5%