A modern, responsive weather application built with React, TypeScript, and Vite. Get real-time weather information for any city worldwide with an intuitive and beautiful interface.
Experience the app in action! Search for weather in any city across 195+ countries.
- 🌍 Global Coverage - Search weather for 195+ countries worldwide
- 🔍 Smart Search - City and country selection with comprehensive validation
- 📊 Detailed Weather Info - Temperature, humidity, pressure, and more
- 🎨 Modern UI - Clean, responsive design with CSS Modules
- ⚡ Fast & Optimized - Built with Vite for lightning-fast performance
- 🔒 Type-Safe - Full TypeScript implementation with Zod validation
- 🎯 Loading States - Elegant loading spinner and error handling
- 🌐 API Integration - OpenWeatherMap API with Axios
- Frontend Framework: React 19.1.1
- Language: TypeScript 5.9.3
- Build Tool: Vite 7.1.7
- HTTP Client: Axios 1.12.2
- Validation: Zod 4.1.12
- Styling: CSS Modules
- Code Quality: ESLint
- Node.js (v18 or higher recommended)
- npm or yarn
- OpenWeatherMap API Key (Get one free here)
-
Clone the repository
git clone https://github.com/astabile/react-typescript-weatherAPP.git cd react-typescript-weatherAPP -
Install dependencies
npm install
-
Set up environment variables
Create a
.envfile in the root directory:VITE_API_KEY=your_openweathermap_api_key_here
-
Run the development server
npm run dev
-
Open your browser
Navigate to
http://localhost:5173
npm run buildThe optimized build will be in the dist folder.
- Select a Country - Choose from 195+ countries in the dropdown
- Enter a City - Type the name of any city in the selected country
- Get Weather - Click "Search" to fetch real-time weather data
- View Details - See temperature, humidity, pressure, and more
src/
├── components/
│ ├── Alert/ # Alert notifications
│ ├── Form/ # Search form component
│ ├── Spinner/ # Loading spinner
│ └── WeatherDetail/ # Weather information display
├── data/
│ └── countries.ts # List of 195 countries
├── hooks/
│ └── useWheater.ts # Custom hook for weather API
├── types/
│ └── index.ts # TypeScript type definitions
├── utils/
│ └── index.ts # Utility functions
├── App.tsx # Main app component
├── main.tsx # App entry point
└── index.css # Global styles
- Manages weather API calls with OpenWeatherMap
- Handles loading and error states
- Uses Zod for runtime type validation
- Geocoding API for accurate location coordinates
- Smart form validation
- Country and city selection
- Real-time error alerts
- Clean and intuitive UI
- Displays comprehensive weather information
- Formatted temperature display
- Shows humidity and pressure levels
- Responsive design
- Full TypeScript implementation
- Zod schema validation for API responses
- Type-safe props and state management
- Optimized with React 19.1.1
- Fast refresh with Vite
- Efficient state management with custom hooks
- Memoized values to prevent unnecessary re-renders
- Loading indicators for async operations
- Clear error messages
- Form validation with helpful feedback
- Responsive design for all devices
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run preview |
Preview production build |
npm run lint |
Run ESLint |
Contributions, issues, and feature requests are welcome!
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
Alejandro Stabile
- GitHub: @astabile
- Weather data provided by OpenWeatherMap
- Icons and design inspiration from modern UI/UX principles
- Built with Vite and React
⭐ If you found this project helpful, please consider giving it a star!