A simple but visually appealing weather app built with Next.js, TypeScript, and Tailwind CSS. It allows users to search for weather information for different locations and displays both current weather conditions and hourly forecasts.
- Current Weather: Displays the current temperature, feels-like temperature, condition, humidity, and wind speed for the searched location.
- Hourly Forecast: Provides an hourly forecast for the next 12 hours, showing the temperature, condition, and time for each interval.
- Location Search: Allows users to search for weather information for any city or location.
- Responsive Design: The app is designed to work seamlessly on different screen sizes, from desktop to mobile.
- Visually Appealing: Utilizes Tailwind CSS for clean and modern styling.
- Next.js: A React framework for building server-rendered and statically generated web applications.
- TypeScript: A typed superset of JavaScript that adds static types and improves code maintainability.
- Tailwind CSS: A utility-first CSS framework for rapid UI development.
- OpenWeatherMap API: Provides weather data for the app.
- OpenCage Geocoding API: Provides location track for the app.
- Axios: A promise-based HTTP client for making API requests.
- React Icons: A library for easily using popular icon sets in React applications.
-
Clone the repository:
git clone <repository-url>
-
Install dependencies:
cd weather-app npm install -
Obtain an OpenWeatherMap API key:
- Sign up for a free account at
https://openweathermap.org/ - Create an API key and copy it.
- Sign up for a free account at
-
Obtain an OpenCage Geocoding API key:
- Sign up for a free account at
https://opencagedata.com/ - Create an API key and copy it.
- Sign up for a free account at
-
Set up environment variables:
-
Create a
.env.localfile in the root of the project. -
Add the following line, replacing
YOUR_OPENWEATHERMAP_API_KEYandYOUR_OPENCAGE_API_KEYwith your actual API keys:NEXT_PUBLIC_WEATHER_API_KEY=YOUR_OPENWEATHERMAP_API_KEY NEXT_PUBLIC_OPENCAGE_API_KEY=YOUR_OPENCAGE_API_KEY
-
-
Run the development server:
npm run dev
-
Open the app in your browser:
- The app should be running at
http://localhost:3000
- The app should be running at
- Enter a city or location in the search bar and press "Search" to get the weather information.
- The current weather conditions will be displayed along with an hourly forecast for the next 12 hours.
Contributions are welcome! Please feel free to submit pull requests or open issues.
This project is licensed under the Apache-2.0 License.