https://github.com/asha-saini06/forecastify

A Next.js web application for fetching and displaying current weather forecasts using the OpenWeatherMap API.
https://github.com/asha-saini06/forecastify

api-integration nextjs openweathermap-api react

Last synced: about 2 months ago
JSON representation

A Next.js web application for fetching and displaying current weather forecasts using the OpenWeatherMap API.

• Host: GitHub
• URL: https://github.com/asha-saini06/forecastify
• Owner: asha-saini06
• Created: 2024-02-07T20:24:56.000Z (12 months ago)
• Default Branch: master
• Last Pushed: 2024-04-18T12:47:25.000Z (9 months ago)
• Last Synced: 2024-04-18T14:34:16.037Z (9 months ago)
• Topics: api-integration, nextjs, openweathermap-api, react
• Language: TypeScript
• Homepage: https://forecastify-zephyr.vercel.app/
• Size: 72.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Forecastify

Forecastify is a web application built with Next.js for fetching and displaying current weather forecasts using the OpenWeatherMap API.

## Features

- View current weather conditions including temperature, humidity, wind speed, and weather description.

- Access a 5-day forecast for the selected location.

- Search for weather forecasts of any location around the globe.

- Responsive design for optimal user experience across devices.

## Technologies Used

- Next.js

- React

- OpenWeatherMap API

- HTML

- CSS

## Installation

 Clone the repository:

   ```bash

   git clone https://github.com/asha-saini06/forecastify.git

```

1. Navigate to the project directory:

 ```bash

cd forecastify

```

3. Install dependencies:

```bash

 npm install

```

5. Create a `.env.local` file in the root directory and add your OpenWeatherMap API key:

```bash

NEXT_PUBLIC_OPENWEATHERMAP_API_KEY=your_api_key_here

```

6. Run the development server:

```bash

npm run dev

```

8. Open ``` http://localhost:3000 ``` in your browser to view the application.

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.