Skip to content

A single-page Weather App integrated with OpenWeather's API to find out the current weather in over 200,000 cities.

License

Notifications You must be signed in to change notification settings

dattphan15/imdex-weather

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Imdex Weather

Imdex Weather is a single-page weather app built with React and ExpressJS.

Live Demos

React Client Demo

GraphQL Demo

Swagger API Documentation

imdex-weather

Description

Using the OpenWeather API, the Imdex Weather app allows users to search over 200,000 cities to see what the weather is like for the city being searched. Users can view details such as the Temperature, Humidity, and Description of the weather (Sunny, Cloudy, Rain, etc.)

Getting Started

Dependencies

  • Node ^14.19.2
  • React ^17.0.0
  • ExpressJS ^4.18.1
  • Axios ^0.27.2
  • PostgreSQL ^8.7.3

Database Setup

The Imdex Weather app uses PostgreSQL as the database hosted on AWS RDS. The RDS instance was deleted on July 3rd but can be restored through using the last snapshot in AWS RDS.

OpenWeather API Key

  1. Create an .env in the /backend directory where you'll be providing the required API key.

  2. Obtain the Current Weather API key from OpenWeather API. Place the API key in the .env file you created in the backend.


Backend Setup

  1. Open your terminal and install all backend dependencies while in the main /backend directory.
npm install
  1. Run psql as postgres user
psql --u postgres
  1. Once psql is launched, create a Database named imdex, then switch to the imdex database.
postgres=# CREATE DATABASE imdex;
postgres=# /c imdex;
  1. Insert Users Database schema
imdex=# \i db/schema/01_users.sql
  1. Open your terminal and navigate to your /backend folder then run the server.
npm start
  1. To access the Swagger API Docs, visit this url.
http://localhost:3001/api-docs/  

swagger-api

  1. To access the GraphQL interface, visit this url.
http://localhost:3001/graphql

ex. query, returns user username, and city.

{
  user(id:6) {
    username,
    city
  }
}

graphQL


Frontend Setup

  1. Install all frontend dependencies while in the main /frontend directory.
npm install
  1. Launch the frontend client.
npm start
  1. Lastly, visit the website on your localhost and start searching cities.
http://localhost:3000/

Authors

Kevin Phan

Version History

See release history

  • v2.0.1 release
    • Styling improvements using Material UI.
    • Add Logout.
    • See commit change
  • v2.0.0 release (major update)
    • Added frontend components for Login/Register, Navbar.
    • Search bar redesign.
    • Refactor backend user queries.
    • See commit change
  • v1.0.0 initial release
    • Initial, lightweight release with a simple search bar to use the OpenWeather API.
    • Swagger API documentation setup.
    • GraphQL setup.
    • See commit change

License

This project is licensed under the MIT License - see the LICENSE.md file for details