WeatherApp-React.js-Tailwind- Tailwind Templates

Weatherapp React.js Tailwind

in this project you can get the weather information of any city that you desire :)

Weather App

A feature-rich Weather App built with React and styled using Tailwind CSS. This application allows users to easily check the weather by city and get detailed information such as temperature, wind speed, and humidity.

Live Demo

You can try out the app live on GitHub Pages here: Demo Link

Features

  • Search by City: Enter the name of any city to retrieve its current weather conditions.
  • Detailed Weather Information: View essential details including temperature, humidity, wind speed, and weather description.
  • Error Handling: User-friendly error messages when the city is not found or when there are network issues.
  • Loading Animation: A visual loading effect while fetching weather data to enhance user experience.

Getting Started

This project was bootstrapped with Create React App and uses Tailwind CSS for styling.

Prerequisites

Before you begin, make sure you have the following installed:

Installation

To get started with this project locally, follow these steps:

  1. Clone the repository: bash git clone https://github.com/Eglantinenf/WeatherApp-React.js-Tailwind-.git
  2. Navigate to the project directory: bash cd WeatherApp-React.js-Tailwind-

3.Install the dependencies:

npm install

3.Start the development server:

   npm start

Open http://localhost:3000 in your browser to view the app.

The page will reload when you make changes. Any lint errors will also show up in the console.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in development mode.
Open http://localhost:3000 to view it in your browser. The page will reload when you make changes, and you may also see any lint errors in the console.

npm test

Launches the test runner in interactive watch mode.
For more information, refer to the React testing documentation.

npm run build

Builds the app for production in the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified, and filenames include hashes.

npm run eject

Note: This is a one-way operation. Once you eject, you can't go back!

If you're not satisfied with the build tool and configuration choices, you can eject at any time. This command will copy all the configuration files and dependencies (webpack, Babel, ESLint, etc.) into your project, giving you full control over them. However, it’s not recommended unless you need custom configuration.

Top categories

Loading Svelte Themes