eduardogerentklein/weather-forecast

Stay informed with the latest weather conditions in your area. This website utilizes the OpenWeatherMap data sources to deliver precise and reliable information.

About

This project allows you to find the current weather forecast in any city around the world. It also displays an image from the city.

Project mockup - Made with Figma.

Dependencies

• NextJs - Used to build static and dynamic websites.
• OpenWeatherMap - Provides data about the weather.
• Unsplash - Free images and pictures.
• React Lottie - Render After Effects animations on React based on lottie-web.
• React Feather - React components for Feather icons.
• date-fns - Format and manipulate dates with JavaScript.
• TailwindCSS - CSS Framework to style the website.
• Husky - Modern native git hooks made easy

Getting Started

First, you should set the environment variables to run this project. (Expose these environment variables to the browser by prefixing with "NEXT_PUBLIC_").

Create an .env.local file with these keys.

• NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=<your_unsplash_access_key>

• NEXT_PUBLIC_UNSPLASH_SECRET_KEY=<your_unsplash_secret_key>

• NEXT_PUBLIC_UNSPLASH_API_URL=<unsplash_api_url> (I suggest to use this url "https://api.unsplash.com/search/photos".)

• NEXT_PUBLIC_DEFAULT_IMAGE_URL=<your_default_image_url>

• NEXT_PUBLIC_OPEN_WEATHER_API_URL=<openweather_api_url> (I've used this url "https://api.openweathermap.org/data/2.5/weather").

• NEXT_PUBLIC_OPEN_WEATHER_API_KEY=<your_open_weather_api_key>

Then, install the dependencies:

yarn install

Running the development server:

yarn dev

That's it. Now you can open http://localhost:3000 with your browser to see the result.