A modern, responsive weather application built with React, TypeScript, and Vite. SkyCast provides real-time weather information, detailed forecasts, and an intuitive user experience with support for favorite cities and search history.
- Current Weather: Real-time weather conditions with temperature, humidity, wind speed, and more
- 5-Day Forecast: Detailed weather predictions for the next 5 days
- Hourly Temperature: 24-hour temperature trends with interactive charts
- Weather Details: Comprehensive weather metrics including feels-like temperature, visibility, pressure, and UV index
- Geolocation Support: Automatic detection of user's current location
- City Search: Smart search functionality with autocomplete suggestions
- Favorite Cities: Save and quickly access up to 10 favorite locations
- Search History: Track recent searches for quick access
- Dark/Light Theme: Toggle between themes with system preference detection
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Loading Skeletons: Smooth loading states for better user experience
- Error Handling: Graceful error handling with informative messages
- Real-time Updates: Automatic data refresh and manual refresh options
- Node.js (version 18 or higher)
- pnpm (recommended) or npm
-
Clone the repository
git clone <repository-url> cd skycast-weather-app
-
Install dependencies
pnpm install # or npm install -
Environment Setup Create a
.envfile in the root directory:VITE_OPENWEATHER_API_KEY=your_openweather_api_key_here
Get your free API key from OpenWeatherMap
-
Start the development server
pnpm dev # or npm run dev -
Open your browser Navigate to
http://localhost:5173to view the application
| Script | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Build for production |
pnpm preview |
Preview production build |
pnpm lint |
Run ESLint |
- React 19.1.0 - UI library with latest features
- TypeScript 5.8.3 - Type-safe JavaScript
- Vite 7.0.4 - Fast build tool and dev server
- Redux Toolkit - Predictable state container
- RTK Query - Data fetching and caching
- OpenWeatherMap API - Weather data source
- TailwindCSS 4.1.11 - Utility-first CSS framework
- Radix UI - Accessible component primitives
- Lucide React - Icon library
- Recharts - Chart library for data visualization
- React Router DOM - Client-side routing
- date-fns - Date utility library
- next-themes - Theme management
- Sonner - Toast notifications
- cmdk - Command palette interface
src/
├── app/ # Redux store configuration
│ ├── config.ts # API configuration
│ └── store.ts # Redux store setup
├── assets/ # Static assets
│ ├── logo-dark.png
│ └── logo-light.png
├── components/ # Reusable components
│ ├── ui/ # Base UI components (shadcn/ui)
│ ├── skeletons/ # Loading skeleton components
│ ├── CitySearch.tsx # City search functionality
│ ├── CurrentWeather.tsx # Current weather display
│ ├── Header.tsx # Application header
│ ├── Layout.tsx # Main layout wrapper
│ └── ... # Other components
├── context/ # React contexts
│ └── theme-provider.tsx # Theme context
├── features/ # Feature-based modules
│ └── api/ # API slices
│ ├── geoApiSlice.ts # Geocoding API
│ └── weatherApiSlice.ts # Weather API
├── hooks/ # Custom React hooks
│ ├── use-favorite.tsx # Favorite cities management
│ ├── use-geolocation.tsx # Geolocation handling
│ ├── use-locale-storage.tsx # Local storage wrapper
│ └── use-search-history.tsx # Search history management
├── lib/ # Utility functions
│ └── utils.ts # Common utilities
├── pages/ # Page components
│ ├── city-page.tsx # Individual city page
│ └── weather-dashboard.tsx # Main dashboard
├── types/ # TypeScript type definitions
│ ├── forecast.ts # Forecast data types
│ ├── geocoding.ts # Geocoding types
│ ├── location.ts # Location types
│ ├── search-history.ts # Search history types
│ ├── weather.ts # Weather data types
│ └── index.ts # Type exports
├── App.tsx # Root component
├── index.css # Global styles
└── main.tsx # Application entry point
VITE_OPENWEATHER_API_KEY- Your OpenWeatherMap API key
The app uses OpenWeatherMap API for weather data and geocoding. Configuration is managed in src/app/config.ts.
Supports automatic system theme detection with manual override. Themes are managed through the ThemeProvider.
- Real-time weather conditions for user's current location
- Comprehensive weather details and metrics
- 5-day weather forecast with daily highs/lows
- Hourly temperature chart for the next 24 hours
- Quick access to favorite cities
- Intelligent city search with autocomplete
- Search history tracking (last 10 searches)
- Favorite cities management (up to 10 favorites)
- Quick navigation between cities
- Efficient caching with RTK Query
- Automatic data refresh every 5 minutes
- Manual refresh capability
- Offline-first approach with cached data
The application uses a modern design system built on:
- TailwindCSS for utility-first styling
- Radix UI for accessible component primitives
- Custom component library following design patterns
- Consistent spacing and typography scales
- Responsive breakpoints for all device sizes
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- OpenWeatherMap for providing the weather API
- Radix UI for accessible component primitives
- Lucide for beautiful icons
- shadcn/ui for component inspiration
If you encounter any issues or have questions, please:
- Check the Issues page
- Create a new issue with detailed information
- Include screenshots if applicable
Built with ❤️ using React, TypeScript, and modern web technologies.