# Forecastation - Weather Web App

A weather application built using Next.js, Tailwind CSS, TypeScript, and Weather API to display current weather information based on the user's location. This app is also a Progressive Web App (PWA), which allows it to be installed on devices 

## Key Features

- Displays current weather for the user's location
- Uses the [Weather API](https://weatherapi.com) for weather data
- Responsive design with Tailwind CSS
- Progressive Web App (PWA): Installable on devices
- Built with Next.js and TypeScript for improved performance and structured development

## Technologies Used

- **Next.js**: React framework for building web applications.
- **Tailwind CSS**: Utility-first CSS framework for responsive design.
- **TypeScript**: A superset of JavaScript that provides static typing.
- **Weather API**: API to fetch current weather data based on the location.

## Installation Guide

1. **Clone the Repository**

   Start by cloning the repository to your local machine:

   ```bash
   git clone https://github.com/dwiwijaya/weather-web-app.git
   cd weather-web-app
   ```

2. **Install Dependencies**

   Make sure you have Node.js and npm/yarn installed on your system. Then, run the following command to install the required dependencies:

   ```bash
   npm install
   ```

   Or, if you're using Yarn:

   ```bash
   yarn install
   ```

3. **Add the API Key**

   - Sign up on [Weather API](https://weatherapi.com) and get your API key.
   - Create a `.env.local` file in the root directory of your project and add the API key:

     ```env
     NEXT_PUBLIC_WEATHER_API_PUBLIC_KEY=your-api-key-here
     ```

4. **Run the Application**

   After installing dependencies and adding the API key, run the application with the following command:

   ```bash
   npm run dev
   ```

   Or, if you're using Yarn:

   ```bash
   yarn dev
   ```

   The app will be available at [http://localhost:3000](http://localhost:3000).

## Usage

1. Open the app in your browser.
2. Enter the name of the city or location for which you want to see the weather.
3. The current weather details, such as temperature, humidity, weather conditions etc, will be displayed.

## API Used

This app uses the [Weather API](https://weatherapi.com) to fetch current weather data.

### Endpoint

- **URL**: `http://api.weatherapi.com/v1/forecast.json`
- **Parameters**:
  - `key`: Your Weather API key
  - `q`: The location (can be a city name or geographic coordinates)


## Development

- Currently, no further development is required for this project.
 
## Deployment to Vercel

This application is already deployed on Vercel at [forecastation.vercel.app](https://forecastation.vercel.app).

If you want to redeploy it to Vercel, follow these steps:

1. Link this repository to Vercel.
2. Set the environment variable `NEXT_PUBLIC_WEATHER_API_PUBLIC_KEY` on Vercel.
3. Deploy the app.

## Contributing

If you want to contribute to this project, feel free to submit a pull request. Please follow the coding standards and write tests where necessary.

## License

This project is licensed under the [MIT License](LICENSE).

