This is a weather application built using Next.js, a popular React framework for server-side rendering and static site generation. It utilizes the Open Weather API to retrieve real-time weather data for any location. Axios simplifies making HTTP requests to the API, and Tailwind CSS provides a utility-first approach for creating responsive and stylish UI components.
Getting Started
Prerequisites:
Node.js (version 14 or later): https://nodejs.org/en npm (Node Package Manager) comes bundled with Node.js. Clone the Repository:
Bash git clone https://your-github-repo.com/Mihir867/weatherme.git Use code with caution. content_copy Install Dependencies:
Bash cd weatherme npm install Use code with caution. content_copy Running the Application:
Start the development server:
Bash npm run dev Use code with caution. content_copy Access the app in your browser:
https://localhost:3000 (default port) Features:
Real-time Weather Data: Fetches current weather conditions, including temperature, feels like, humidity, wind speed, and weather description from the Open Weather API. User Location Detection (Optional): Optionally uses browser geolocation to automatically display weather for the user's current location. City Search: Allows users to search for weather in any city by entering the name in a search bar. Responsive Design: Built with Tailwind CSS for a clean and responsive UI that adapts to different screen sizes. Customizable Styling: Tailwind CSS classes provide fine-grained control over the app's appearance. API Key
To use the Open Weather API, you'll need a free API key. Sign up for an account at https://openweathermap.org/ and obtain your API key.
Create a .env.local file at the root of your project (ignore this file in version control) and add the following line, replacing YOUR_API_KEY with your actual key:
REACT_APP_OPEN_WEATHER_API_KEY=YOUR_API_KEY