Open Weather with React.js

A simple demonstration of an application in React.js consuming an Open Weather API.
View Demo · Report Bug · Request Feature

About The Project

This project is a weather app built with React.js, TypeScript, Webpack, OpenAPI, ESLint, and Tailwind CSS. It allows users to input a city name and view the current weather, including temperature and weather conditions. Additionally, the app displays the weather forecast for the next 6 hours and the temperature along with the weather for the next 7 days.

Key features:

• Current Weather: Displays the temperature and weather conditions for a specific city.
• 6-hour Forecast: Shows the temperature and weather conditions for the next 6 hours.
• 7-day Forecast: Displays the maximum and minimum temperatures, as well as the weather conditions, for the upcoming 7 days.
• Dynamic background: The background image and the card color change dynamically based on the time of day and the weather.

Technologies used:

• React.js - For building the user interface.
• TypeScript - For type safety and better development experience.
• Webpack - For bundling the app and optimizing performance.
• OpenAPI - For fetching weather data from Open Weather API.
• ESLint - For maintaining code quality and adhering to best practices.
• Tailwind CSS - For styling the app in a flexible and responsive way.

Feel free to explore the project, and feel free to contribute if you have suggestions or improvements!

(back to top)

Built With

This section lists the major frameworks and libraries used to build the project. Add-ons and plugins are typically mentioned in the acknowledgements section. Here are the technologies used in this project:

• 
• 
• 
• 

(back to top)

Getting Started

This guide will help you get a local copy of the project up and running. Follow these simple steps to set up the project locally.

Prerequisites

Make sure you have the following installed before proceeding:

• Node.js and npm (Node Package Manager)
  You can download and install Node.js (which includes npm) from here.

• Git
  Ensure you have Git installed to clone the repository. You can install Git from here.

Installation

Follow these steps to install and set up the project locally:

1. Clone the repository

   git clone https://github.com/oliveira-mark/open-weather.git
   

2. Navigate to the project directory

   cd open-weather
   

3. Set up your Virtual Environment
   1. Create a .env file in the root of the project.
   2. Go to OpenWeather and sign up for a free API key and URL API.
   3. Open the .env file in a text editor and add the API key, URL API and URL Public Project:

      REACT_APP_OPENWEATHER_API_KEY=YOUR_API_KEY
      REACT_APP_OPENWEATHER_API_URL=https://api.openweathermap.org/data/
      REACT_APP_PUBLIC_URL=./
      

4. Install the project dependencies

   npm install

5. Start the development server

   npm run dev

Usage

To use the application, follow these steps:

1. Open the application in your web browser.

   http://localhost:3000

(back to top)

Top contributors:

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Marcos Oliveira - @oliveira-mark - [email protected]

Project Link: https://github.com/oliveira-mark/open-weather

(back to top)

Acknowledgments

Here are a few resources that were essential for this project:

• OpenWeather API - For providing the weather data API.
• Choose an Open Source License - To help you choose an open-source license for your project.
• Shields.io - For creating custom badges for the project.
• Font Awesome - For providing useful icons.
• Tailwind CSS - A utility-first CSS framework used for styling the application.
• React Icons - For easily integrating icons into the React app.
• ESLint - For maintaining code quality and ensuring best practices.

(back to top)