ForecastNow 🔆

🌐 Site

Features

A full stack weather app to generate a concise weather report of any city of the world:

• Using 'country-state-city' library, select any city of the world to check weather for

• Fetch current weather conditions of any city which includes current temperature, cloud cover, sunrise and sunset times and so on with the help of 'Open-Meteo' free weather API

• Pictorially display the hourly change in temperature, uv index, rain probability and more with the help of area graphs

• Generate concise summary with suggestions about tackling the weather conditions using GPT-3.5-turbo taking in all the weather data from the API response

Screenshots

Pages

Homepage

Weather Report

Loading

Components

City Picker

Information Panel

Callout Card

Stat Card

Area Chart

Modules

1. Homepage
   • City Picker Select
     
     
2. Weather Report
   • Information Panel
   • Callout Cards
   • Stat Cards
   • Charts
     
     
3. Loading

Homepage

Contains the landing page of the application for user to select the country and city to check the weather for.

Weather Report

Made up of an info panel and reusable callout, stat and chart components customised using tremor 2.0 library assets.
Info panel consists of details of city and current weather along with an option to change city.
Response from GPT-3.5-turbo and excess uv index are shown as a callouts.
Stat cards are used to show rest of the weather details.
Hourly changing data such as temperature, uv index, rain probalility, humidity and wind gusts are repesented using reusable chart component.

Loading

An intermediate page shown until a successful response is received from the weather API and AI.

Tech

Frontend

1. React - v18.2.0
2. React Select - v5.7.2
3. Typescript - v5.0.4
4. PostCSS - v8.4.23
5. TailwindCSS - v3.3.1
6. Tremor - v2.2.0
7. Apollo Client - v3.7.12

Backend

1. Next.js - v13.3.0
2. StepZen
3. GraphQL - v16.6.0

API

1. county-state-city - v3.1.2
2. OpenAI - 3.2.1

Setup

Pre-requisites

1. Download and install the latest version of Node.js for development
2. Create an account on StepZen and install their CLI
3. Create an account on OpenAI and create your personal API Key. Keep it noted for reference

Steps

1. Clone the repo to your folder of choice
2. Open the folder with VSCode (recommended)
3. Open the terminal and install all dependencies using npm install
4. Navigate to root level of your project and create a .env.local file. The file should contain the following variables -
   • APP_PORT_NO = 3000
   • API_URL = http://localhost:5001/api/forecast-now
   • OPENAI_API_KEY which you have already noted down after creating account on OpenAPI
   • NEXT_PUBLIC_STEPZEN_API_KEY which can found in your stepzen dashboard
5. Inside terminal, change directory to 'stepzen' using cd stepzen
6. Login to your stepzen account using stepzen login. Fill all the details asked using values found in your account settings
7. Start the stepzen backend using stepzen start --dashboard=local --port=5001
8. Open another instance of the terminal and run npm run dev. Make sure you are at the root level
9. Application will be accessible on http://localhost:3000