APIS / CONNECT TO THE WORLD

Weather dashboard

Build a weather search experience that consumes an API and turns JSON into a friendly interface.

Intermediate2 weeks

Recommended deadline

14 days from your start date

Project brief

Build a weather search experience that turns an external API response into a friendly, resilient interface.

TASK DASHBOARD

Make progress one task at a time.

0% complete

Build and validate the city searchInput validation · First responseCreate a reusable API clientAsync programming · First responseRender current conditionsAPI data mapping · Useful forecastAdd the five-day forecastComponent composition · Useful forecastHandle errors, secrets, and loadingProduction readiness · Resilient app

Tech stack & setup

Next.jsTypeScriptTailwind CSSWeather API

●Create a Next.js app with TypeScript
●Choose an API and read its rate limits
●Store the API key in .env.local
●Create loading, empty, and error states

GitHub setup

●Create a repository named weather-dashboard
●Add .env.local to .gitignore
●Document environment variables without exposing secrets
●Track API and UI tasks as issues

Project architecture

Search

Validates a city query and starts a request.

API layer

Fetches and normalizes weather data in one module.

Presentation

Renders current conditions, forecast, loading, and errors.

Timeline

01Days 1–3: search form and API connection
02Days 4–7: current conditions
03Days 8–10: forecast and icons
04Days 11–14: caching, errors, and responsive polish

Milestones

First responseDay 3

A valid city returns weather data.

Useful forecastDay 10

Current and future conditions are readable.

Resilient appDay 14

Errors, secrets, and mobile layout are handled.

Build guide

STEP 1

Features to build

Practice the full request, loading, and error cycle.

●Search for a city
●Show current temperature and conditions
●Display a five-day forecast
●Handle loading and API errors

STEP 2

Core functions

Keep API work easy to replace and test.

●fetchWeather(city)
●parseWeatherResponse(data)
●formatTemperature(value)
●getWeatherIcon(condition)
●handleApiError(error)

STEP 3

Build it in steps

Make the empty, loading, and error states intentional.

●Create the search form
●Call the weather API
●Render the response
●Add loading and error states
●Make the layout responsive