Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anabartos/weather-finder
A simple web application that lets users search for weather information of cities worldwide. It uses the OpenWeatherMap API to display current, maximum, and minimum temperatures, along with error handling for invalid cities or missing fields.
https://github.com/anabartos/weather-finder
api reactjs typescript user-interface weather-app
Last synced: 10 days ago
JSON representation
A simple web application that lets users search for weather information of cities worldwide. It uses the OpenWeatherMap API to display current, maximum, and minimum temperatures, along with error handling for invalid cities or missing fields.
- Host: GitHub
- URL: https://github.com/anabartos/weather-finder
- Owner: anabartos
- Created: 2024-11-20T11:44:22.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-11-27T10:24:01.000Z (28 days ago)
- Last Synced: 2024-11-27T11:26:57.081Z (28 days ago)
- Topics: api, reactjs, typescript, user-interface, weather-app
- Language: TypeScript
- Homepage: https://wheather-finder-app.netlify.app/
- Size: 59.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Weather Finder App
**Weather Finder** is an app that allows users to search for weather information for cities around the world. The application uses the OpenWeatherMap API to fetch weather data and display information such as current temperature, maximum and minimum temperatures, and error messages for invalid cities or missing fields.
## Technologies Used
- **React** - A JavaScript library for building user interfaces.
- **TypeScript** - A typed superset of JavaScript that adds static types.
- **Vite** - A fast build tool for modern web projects.
- **Zod** - Used for data validation, ensuring that the response from the API is in the correct format.
- **Axios** - To make HTTP requests to the OpenWeatherMap API.
- **CSS Modules** - To scope styles to individual components in the app.
## Features
- Search weather by city and country.
- Displays current temperature, maximum and minimum temperatures.
- If the city is not found or fields are incomplete, an error message is shown.
- Simple, modern user interface.
## Installation
To get started with the project, clone the repository and install dependencies:
```bash
git clone https://github.com/your-username/weather-react-ts.git
cd weather-react-ts
npm install
```
## Environment Variables
This project requires an API key from OpenWeatherMap. After getting your API key, add it to an .env file in the root of your project:
VITE_API_KEY=your-api-key-here
## Usage
Once the dependencies are installed and the .env file is configured, you can run the project with:
```bash
Copiar código
npm run dev
This will start the application, typically available at http://localhost:3000.
```
## Project Structure
/weather-react-ts
|-- /public
| |-- /assets
| |-- index.html
|
|-- /src
| |-- /components
| | |-- Form.tsx
| | |-- WeatherDetail.tsx
| | |-- Alert.tsx
| | |-- Spinner.tsx
| |
| |-- /hooks
| | |-- useWeather.ts
| |
| |-- /helpers
| | |-- helpers.ts
| |
| |-- App.tsx
| |-- main.tsx
| |-- /styles
| | |-- App.module.css
| | |-- WeatherDetail.module.css
| |
| |-- index.tsx
|
|-- package.json
|-- tsconfig.json
|-- .env
|-- README.md
## Contributions
Contributions are welcome! If you'd like to improve the app or add new features, feel free to open a pull request.