Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/utkarsh-singhal-26/weather-app
https://github.com/utkarsh-singhal-26/weather-app
react tailwindcss weather-api
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/utkarsh-singhal-26/weather-app
- Owner: Utkarsh-Singhal-26
- Created: 2024-06-08T05:22:50.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-06-09T11:23:00.000Z (8 months ago)
- Last Synced: 2024-11-04T09:42:34.409Z (3 months ago)
- Topics: react, tailwindcss, weather-api
- Language: JavaScript
- Homepage: https://weather-app-utkarsh.vercel.app
- Size: 3.5 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Weather App
This repository contains a Weather App built with React and Vite. The app allows users to fetch and display weather information for their current location or a specified city using the OpenWeather API.
## Live Preview
Check out the live preview of the app [https://weather-app-utkarsh.vercel.app](https://weather-app-utkarsh.vercel.app/)
## Table of Contents
- [Getting Started](#getting-started)
- [Technologies Used](#technologies-used)
- [Approach](#approach)
- [Known Issues and Limitations](#known-issues-and-limitations)
## Getting Started
To run this application locally, follow these steps:
1. **Clone the repository:**
```bash
git clone https://github.com/Utkarsh-Singhal-26/weather-app.git
cd weather-app
```
2. **Install dependencies:**
```bash
pnpm install
```
3. **Set up environment variables:**
Create a `.env` file in the root of the project and add your OpenWeather API key:
```bash
VITE_WEATHER_API=api_key
```
4. **Run the application:**
```bash
pnpm run dev
```
This will start the development server and you can view the app by navigating to `http://localhost:5173` in your web browser.
## Technologies Used
- **React**: A JavaScript library for building user interfaces.
- **Vite**: A fast build tool and development server.
- **OpenWeather API**: Provides weather data used in the application.
- **@vitejs/plugin-react**: Vite plugin for React with Babel for Fast Refresh.
- **@vitejs/plugin-react-swc**: (Optional) Vite plugin for React with SWC for Fast Refresh.
- **ESLint**: A tool for identifying and fixing problems in JavaScript code.
- **CSS**: For styling the application and ensuring responsiveness.
## Approach
The development process of this app involved the following steps:
1. **UI Construction**: Designed and built the user interface, ensuring a clean and user-friendly experience.
2. **API Integration**: Integrated the OpenWeather API to fetch and display weather data based on user input or current location.
3. **Location Feature**: Implemented functionality to fetch and display weather data for the user's current location.
4. **Responsiveness**: Ensured the application is responsive and works well on various screen sizes.
## Known Issues and Limitations
- **Single City Search**: Currently, the application only supports searching for weather information of one city at a time.
- **Error Handling**: There might be limited error handling for various edge cases, such as invalid city names or network issues.
- **API Key Exposure**: Ensure your API key is not exposed publicly. Consider using environment variables and server-side code to handle API requests in a production environment.
---
Feel free to reach out if you have any questions or suggestions!
Happy coding! 🌤️
---