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.