Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hsyntes/react-weather

React-Weather is a user-friendly weather application built using React, React-Router, Redux, and powered by LocationIQ and RESTCountries APIs. This documentation will guide you through the app's features, technologies, setup, and usage.
https://github.com/hsyntes/react-weather

javascript react react-redux react-router reactjs redux weather weatherapp

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/hsyntes/react-weather
Owner: hsyntes
Created: 2022-11-12T15:55:47.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2023-11-17T13:34:57.000Z (about 1 year ago)
Last Synced: 2024-10-28T06:54:52.873Z (about 2 months ago)
Topics: javascript, react, react-redux, react-router, reactjs, redux, weather, weatherapp
Language: CSS
Homepage: https://react-weatherjs.netlify.app
Size: 12.8 MB
Stars: 7
Watchers: 1
Forks: 4
Open Issues: 1
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# React-Weather

[![React-Weather](public/logo192.png)](https://react-weatherjs.netlify.app)

## Features

- Weather Information: Get current weather details, temperature, humidity, wind speed, and conditions for a specified location.
- Location Autocomplete: Utilize LocationIQ API for location autocomplete and efficient search functionality.
- Country Information: Display country information using RESTCountries API based on the user's location.
- Responsive Design: Enjoy a seamless experience on both desktop and mobile devices.
- State Management: Leverage Redux for state management, ensuring a smooth and synchronized user experience.

![App Screenshot](/src/img/desktop-view-light.png)

![App Screenshot](/src/img/desktop-view-dark.png)

## Technologies Used

- React: A JavaScript library for building user interfaces, offering reusable components and dynamic rendering.
- React-Router: A routing library for React, enabling efficient navigation and URL handling.
- Redux: A state management library, centralizing and synchronizing data across the app.
- LocationIQ API: Access geolocation data, location details, and autocomplete suggestions.
- RESTCountries API: Retrieve country information and details.
- React-Bootstrap: Styling with CSS for a visually appealing and responsive design.

![App Screenshot](src/img/mobile-view-dark-search.png) ![App Screenshot](src/img/mobile-view-light-search.png)

![App Screenshot](src/img/tablet-view-dark.png)

![App Screenshot](src/img/tablet-view-light.png)

## Run Locally

Clone the project

```bash
git clone https://github.com/hsyntes/react-weather
```

Go to the project directory

```bash
cd react-weather
```

Install dependencies

```bash
npm install
```

Start the server

```bash
npm start
```

## Credits

- Location data provided by LocationIQ API.
- Country information provided by RESTCountries API.

Thank you for using the React-Weather app! Feel free to explore the source code, contribute, and enhance your weather experience using this intuitive React application.

## 🔗 Links

[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/hsyntes)