qubrat / qbeeweather

Simple weather app that uses the OpenWeatherMap API to display the weather conditions for a given location

qBee Weather

This is a simple weather app that uses the OpenWeatherMap API to display the current weather conditions for a given city.

Features

• Search for a city by name
• Get current location of the user
• View the current weather conditions for the city
• View the 5 day forecast for the selected city
• View the current weather conditions for the user's current location
• Responsive design

Built With Stack

• React
• TypeScript
• Tailwind CSS
• OpenWeatherMap API

Demo

https://qubrat.github.io/qbeeweather/

Disclaimer

Design of the app is heavily inspired by this video by codewithsadee. Kudos for the great work!

Screenshots

Installation on local machine

1. Clone the repo

   git clone https://github.com/qubrat/qbeeweather.git

2. Install NPM packages

   npm install

3. Create a .env file in the root directory and add your OpenWeatherMap API key Go to https://openweathermap.org/api and sign up for an account to get an API key. Then add the following line to your .env file:

   OPEN_WEATHER_API_KEY = YOUR_API_KEY_HERE;

4. Run the app

   npm start

5. Open http://localhost:5173/qbeeweather/ to view it in the browser.