Weather App

Live Demo

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, install the required dependencies

npm install
# or
yarn

Then, run the development server:

npm run dev
# or
yarn dev

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

Documentation

File Structure

Entry point of the application is located in index.tsx.

There are 3 react components, located in src/components:

  • WeatherApp The weather app main component
  • CitySearch The autocomplete input component to search for the weather of a city
  • WeatherDisplay The component to display weather information

There are 2 API routes endpoints, located in src/pages/api:

  • weather Fetch weather information from Open-Meteo, and response with a structured JSON object
  • country Fetch city names, latitude and longitude from a JSON file

There are 2 react hooks, located in src/hooks:

  • useWeather With a given latitude and longitude, fetch weather information from weather API route
  • useCity With a given keyworkd, fetch city names, latitude and longitude from country API route