Weather App Challenge ☀️🌧️🌦️

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

• OverView 🪟
• Releases 🚀
• Features 🌍🌡️🌬️
• Technologies Used 🛠️🚀
• Screenshots 📸
• How to Run Locally 🏃‍♂️
• How to Use Bash 👨🏼‍💻
• Attribution 🙌
• Contact 💻

OverView 🪟

This project is part of the "Weather App" challenge by DevChallenges. The app displays weather information based on location and provides detailed data for the upcoming days.

Check out the live demo!

Releases 🚀

• v1.0.0 - Initial release for desktop usage. Desktop-optimized weather application with detailed weather insights.
• v1.1.0 - Mobile-Friendly Update. Enhanced responsive design for seamless weather tracking on devices up to 480px width. Stay informed wherever you go with an optimized layout, 5-day forecast, and weather images that adapt to your screen. Your weather journey, now in the palm of your hand. 🌤️📱

Features 🌍🌡️🌬️

• View weather for the default city, preferably your current location. 🏙️
• Search for a specific city. 🔍
• Show weather for today and the next 5 days. 📅
• See date and location of the weather. 🗺️
• Descriptive images for each weather type. 🌤️🌧️🌩️❄️
• Minimum and maximum temperatures for each day. 🌡️❄️
• Wind status and direction. 💨🧭
• Humidity percentage. 💧
• Visibility indicator. 👁️
• Atmospheric pressure number. 🌬️
• Optional: Get weather for your current location. 📍
• Optional: Convert between Celsius and Fahrenheit. 🌡️🌡️

Technologies Used 🛠️🚀

• React
• JavaScript
• Custom Hooks
• Styled Components
• Material Design Icons
• OpenWeatherMap API
• Create React App.

Screenshots 📸

How to Run Locally 🏃‍♂️

1. Clone the repository: git clone https://github.com/Bardolog1/devchallengers-weather-app.git

2. Navigate to the project directory: cd devchallengers-weather-app

3. Install dependencies: npm install

4. Create a file named .env within the project's root directory.

5. Inside the .env file, you should declare an environment variable named REACT_APP_API_KEY, like this:

   // Into file .env
   // Your API key without double quotation marks
   
   REACT_APP_API_KEY="Your OpenWeather API key goes here"

6. Start the app: npm start

7. Open http://localhost:3000 in your browser.

How to Use Bash 👨🏼‍💻

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

#Clone repository
$ git clone https://github.com/Bardolog1/devchallengers-weather-app.git

#Change Directory
$ cd devchallengers-weather-app

#Install dependencies
$ npm install

#Run the app
$ npm run start

#Run App test
$ npm run test

#Build app
$ npm run build

Attribution 🙌

This project was created by Libardo Lozano Gambasica as part of the "Weather App" challenge by DevChallenges.

Contact 💻

• Website lilog.netlify.app
• GitHub @Bardolog1