Note: This project is the spiritual successor and technical evolution of WeatherWise. It represents a significant leap forward in architecture, design, and functional depth, built to demonstrate advanced React Native capabilities.
WeatherWise is a next-generation weather experience designed for those who appreciate aesthetics as much as accuracy.
Built with React Native and Expo, it transforms mundane weather checking into a visual delight. The interface feels alive, shifting its entire color palette and mood to match the sky outside—from the golden hues of sunrise to the deep indigos of a storm. It's not just a weather app; it's a reflection of the world around you.
Cross-Platform: Designed and optimized to run flawlessly on iOS, Android, and Web.
- Real-Time Weather: Accurate current alerts and conditions using the OpenWeatherMap API.
- Global Reach: Search, add, and manage weather for unlimited cities worldwide.
- Smart Formatting: Displays time, date, and forecast details in the local timezone of the selected city.
- Detailed Forecasts:
- 24-hour hourly breakdown with precipitation probability.
- 7-day daily forecast with high/low temperature ranges.
- Rich Metrics: Humidity, Wind Speed/Direction, Visibility, Pressure, and Sunrise/Sunset times.
- Dynamic Gradients: The entire app background shifts fluidly between custom-curated gradients (e.g.,
sunny,stormy,night-clear) based on the live weather data. - Interactive UI:
- Horizontal paging between saved cities with a custom indicator.
- Smooth modal transitions for search and settings.
- "Pull to Refresh" functionality implies seamless data updates.
- Preferences:
- Toggle between Celsius and Fahrenheit instantly.
- Persistent storage of user preferences and city list.
- Robust State Management: Migrated to TanStack Query (React Query) for efficient caching, background updates, and optimistic UI.
- Type Safety: Fully typed codebase using TypeScript, ensuring reliability and easier maintenance compared to the original JavaScript implementation.
- Modern Styling: Utilizes NativeWind (Tailwind CSS) for performant, utility-first styling that keeps the codebase clean.
- Clean Architecture: Separation of concerns with dedicated service layers (
weatherService,storageService) and reusable components.
| Category | Technology |
|---|---|
| Framework | React Native / Expo SDK 50+ |
| Language | TypeScript |
| State/Data | TanStack Query |
| Styling | NativeWind (Tailwind CSS) |
| Navigation | Expo Router |
| Icons | Lucide React Native |
| Storage | AsyncStorage |
| API | OpenWeatherMap |
Scan/Click to Preview in Expo Go
-
Clone the repository
git clone https://github.com/soham04/weatherwise.git cd weatherwise -
Install dependencies
npm install
-
Environment Setup This project uses
OpenWeatherMap. The API key is currently configured inlib/weatherService.ts. For production, ensure this is moved to a.envfile. -
Run the App Start the Expo development server:
npm start
-
Launch on Device
- iOS: Press
ito open in iOS Simulator. - Android: Press
ato open in Android Emulator. - Web: Press
wto open in the Browser. - Physical Device: Scan the QR code with the Expo Go app.
- iOS: Press
weatherwise/
├── app/ # Expo Router app directory
├── components/ # Reusable UI components
│ ├── modals/ # Search, List, Settings modals
│ ├── weather/ # Weather-specific views (CityWeatherView, etc.)
│ └── ui/ # Generic UI elements
├── lib/ # Business logic & services
│ ├── weatherService.ts # API integration
│ ├── storageService.ts # Local persistence
│ └── preferencesService.ts
├── styles/ # Global styles & theme configuration
└── assets/ # Static assets (images, fonts)
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.