Skip to content
/ nmiri Public

Weather App in Next.js | Open-Meteo API | Tailwind CSS A responsive weather app built with Next.js and styled using Tailwind CSS, featuring real-time weather updates from the Open-Meteo API. Includes geo-location support and optimized performance for seamless user experience.

License

Notifications You must be signed in to change notification settings

pxlcrtiv/nmiri

Repository files navigation

README File for GitHub

Weather App 🌦️

A sleek and modern weather app built with Next.js, powered by the Open-Meteo API, and styled using Tailwind CSS. This project showcases real-time weather updates, geo-location capabilities, and a fully responsive design.


Features 🚀

  • Real-Time Weather Updates: Fetch the latest weather data using the Open-Meteo API.
  • Geo-Location Support: Automatically displays weather for your current location.
  • Responsive Design: Fully responsive and mobile-friendly, styled with Tailwind CSS.
  • Fast and Efficient: Built with Next.js for optimized performance.

Tech Stack 🛠️

  • Frontend Framework: Next.js, React
  • Styling: Tailwind CSS
  • API: Open-Meteo

Installation & Setup 🛠️

  1. Clone the repository:
    git clone https://github.com/pxlcrtiv/nmiri.git
    
     2.	Navigate to the project directory:
    

cd nmiri

3.	Install dependencies:

npm install

4.	Create a .env.local file and add the following environment variable:

NEXT_PUBLIC_OPEN_METEO_API=https://api.open-meteo.com/v1

5.	Start the development server:

npm run dev

6.	Open your browser and visit:

http://localhost:3000

Usage

1.	Grant location permissions to let the app fetch your current weather.
2.	View details such as temperature, wind speed, and humidity.
3.	Modify or extend the app to include additional metrics from the Open-Meteo API.

Styling with Tailwind CSS 🎨

This app is fully styled using Tailwind CSS, enabling: • Rapid prototyping with utility-first classes. • Responsive design with minimal effort. • Customizable styles for consistent and clean UI.

Future Improvements ✨

•	Add a search bar to fetch weather for specific locations.
•	Include a 7-day weather forecast feature.
•	Add advanced weather metrics (e.g., air quality, UV index).
•	Implement dark mode for a better user experience.

Contributing 🛠️

Contributions are welcome! Feel free to open issues or submit pull requests to enhance the app.

License 📄

This project is licensed under the MIT License.

Acknowledgements 💙

•	Open-Meteo API for providing free and accurate weather data.
•	Next.js for the amazing framework.
•	Tailwind CSS for making beautiful and responsive designs easy to build.

About

Weather App in Next.js | Open-Meteo API | Tailwind CSS A responsive weather app built with Next.js and styled using Tailwind CSS, featuring real-time weather updates from the Open-Meteo API. Includes geo-location support and optimized performance for seamless user experience.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published