This is a weather application built using React. The application fetches and displays weather data for different locations using an HTTP client and provides a user-friendly interface styled with Tailwind CSS.
- Fetches real-time weather data.
- Displays weather information in a clean, user-friendly interface.
- Uses responsive design to ensure compatibility across various devices.
- react: A JavaScript library for building user interfaces.
- react-dom: Provides DOM-specific methods for managing a tree of components.
- react-scripts: Scripts from Create React App to automate tasks like starting the development server, building the production build, running tests, etc.
- axios: A promise-based HTTP client for making HTTP requests.
- autoprefixer: A PostCSS plugin that parses your CSS and adds vendor prefixes.
- postcss: A tool for transforming styles with JS plugins.
- tailwindcss: A utility-first CSS framework for rapidly building custom designs.
- react-icons: Provides popular icons as React components.
Follow these steps to set up the project on your local machine.
Make sure you have the following installed:
- Node.js
- npm (Node Package Manager) or yarn
-
Clone the repository:
git clone https://github.com/holikyan/weather-app-reactJS.git
-
Navigate to the project directory:
cd weather-app-reactJS
-
Install the dependencies:
npm install
-
Visit OpenWeatherMap.
-
Register for a free account.
-
After registering, log in and navigate to the API section.
-
Generate an API key.
-
Copy the API key.
-
In the root folder of the project, open the
.env
file and paste your API key:REACT_APP_WEATHER_API_KEY=your_api_key_here
To start the development server, run:
npm run start
Open http://localhost:3000 to view it in the browser.
To create a production build, run:
npm run build
The build artifacts will be stored in the build/
directory.
This project is licensed under the MIT License.
- Weather data is provided by OpenWeatherMap.
- Icons are provided by React Icons.
This project is designed to be user-friendly and can be used by anyone with basic knowledge of React and JavaScript. Happy coding!