My Weather Station

An app to display weather information, fetched from OpenWeather API.

Features

• By default, look up your location by the IP address and display the weather information
  • Current
  • 1 hour precipitation predicton
  • 1 hour predictions for 48 hours
  • 7 days forecast
  • Alerts (when issued)
• Switch between imperial and metric units.
• Search locations around the world.
• If cookie is enabled, last displayed location and selected units are saved and retrieved when you launch the app next time.

Technicals

This project is built with Next.js, TypeScript, Redux-Toolkit and Material-UI. Also, Redux-Toolkit Query is used for fetching and state management of weather data.

You need to apply and get API ID key to make this app work (there is a free plan).

Create .env.local file in the root folder and define the key there as an enviromental variable to protect it.

// .env.local file
NEXT_PUBLIC_WEATHER_API_KEY=xxxxxxx

If you want to use Google Analysis, store the Ttracking ID in .env.local file as well.

GA_TRACKING_ID=xxxxxxxx

API Calls (JSON)

• Look up your location from IP address: ipapi
• Weather data: One call
• Search locatons Geocoding API

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.