A weather dashboard application that calls the OpenWeather API and renders data in the browser. This project leverages external APIs, allowing users to access weather data by making requests with specific parameters to a URL. The app retrieves and consumes this data via a server, ensuring real-time weather updates.
- Motivation: To build an interactive weather application that allows users to check weather conditions in different cities easily.
- Purpose: To provide a simple and intuitive interface for users to retrieve current and future weather forecasts.
- Problem Solved: Helps users quickly access weather information for any city, including temperature, wind speed, humidity, and a 5-day forecast.
- What I Learned: Implementing API calls using TypeScript, handling server-side and client-side integration, and deploying applications using Render.
- Clone the repository:
git clone https://github.com/lunahoushmand16/OpenWeather-API-App
- Navigate to the project folder:
cd OpenWeather-API-App - Install dependencies:
npm install
- Run the application:
npm run start
- The application allows users to search for cities and view the current and future weather conditions for that city.
- The search history is saved, allowing users to revisit previous searches quickly.
- Displays the city name, weather conditions, temperature, humidity, and wind speed.
- Provides a 5-day weather forecast for the selected city.
GIVEN a weather dashboard with form inputs
WHEN I search for a city
THEN I am presented with current and future conditions for that city, and that city is added to the search history
WHEN I view current weather conditions for that city
THEN I am presented with the city name, the date, an icon representation of weather conditions, a description of the weather for the icon's `alt` tag, the temperature, the humidity, and the wind speed
WHEN I view future weather conditions for that city
THEN I am presented with a 5-day forecast that displays the date, an icon representation of weather conditions, the temperature, the wind speed, and the humidity
WHEN I click on a city in the search history
THEN I am again presented with current and future conditions for that city
City: Austin
Date: 03/04/2025
Weather: Clear Sky
Temperature: 75°F
Wind Speed: 5 mph
Humidity: 40%
- Created by Luna Houshmans
- Built with TypeScript and Express.js
- Uses OpenWeather API for weather data retrieval
- Deployed on Render
- GitHub Markdown Guide
This project is licensed under the MIT License. See the LICENSE file for details.
- Real-time weather updates for any city.
- Saves search history for quick access to previous searches.
- Displays detailed weather conditions including temperature, humidity, and wind speed.
- Provides a 5-day weather forecast with daily weather summaries.
- Deployed on Render for live access.
- Fork the repository
- Create a new branch:
git checkout -b feature-name - Make changes and commit:
git commit -m 'Added new feature' - Push changes:
git push origin feature-name - Open a pull request
- Open the Render deployment link.
- Search for a city by name and verify that the current weather and forecast are displayed correctly.
- Try deleting cities from the search history.
- Test error handling by entering an invalid city name.