A modern UI/UX reimagining of Singapore's real-time weather data.
Try the Demo »
Report Bug
·
Request Feature
Table of Contents
Modern Weather.sg is a modern web interface for Singapore's real-time weather data. This project reimagines the NEA Mobile Weather site with a focus on high-end UI/UX, responsive design, and performance using the latest React ecosystem.
Note
Development Note This minisite was developed as a hobbyist project. Its creation was largely built with vibe coding using Gemini 3 Preview in Google AI Studio for logic generation and implementation of my design directions UI styling. It can serve as a showcase of how AI tools can bridge the gap between creative ideas and functional code.
- 2-Hour Nowcast: Interactive map and grid views of 2-hour weather forecasts across Singapore's 47 weather areas.
- Rain Radar: High-resolution playback of rain areas (50km and 240km regional views) with an optimized dark-mode interface.
- Flood Warnings: Live alerts synchronized with PUB (Singapore's National Water Agency) including severity levels and instructions.
- 24-Hour Forecast: Regional outlooks (North, South, East, West, Central) with temperature, humidity, and wind data.
- 4-Day Outlook: Extended weather planning with high-fidelity icons and trend insights.
- Fully Responsive: Optimized for everything from mobile devices to high-resolution desktop monitors.
- Progressive Web App (PWA): Installable on iOS and Android for a native-like experience with offline asset caching.
- Automatic Sync: Data refreshes automatically every 5 minutes from official sources.
- Framework: React 19
- Styling: Tailwind CSS (via CDN with Catppuccin theme)
- Build Tool: Vite 6
- Language: TypeScript
- Icons: FontAwesome 6
- API: Data.gov.sg APIs (NEA & PUB)
- AI-Assisted Development: Google Gemini 3 (AI Studio)
The easiest way to start using this modern weather app is to use the demo version hosted as github page here.
On mobile, you can install it as PWA by going to your browser menu (three dots), and then tap on Add to Home Screen. Follow on screen instructions to install.
To get a local copy up and running, follow these steps.
- npm
npm install npm@latest -g
- Clone the repo
git clone https://github.com/alfred1137/modern-weather-sg.git
- Install NPM packages
npm install
- Start the development server
npm run dev
.
├── components/ # UI components for different views (Nowcast, Radar, etc.)
├── context/ # Context providers (ThemeContext)
├── services/ # API service layers (weatherService)
├── public/ # Static assets, manifest, and service worker
├── App.tsx # Main application container
├── index.tsx # Entry point
├── types.ts # TypeScript interfaces
└── README.md # This documentation
This project is set up with GitHub Actions for automatic deployment to GitHub Pages.
- Push to main: Simply commit and push changes to the
mainbranch. - GitHub Actions: The "Deploy to GitHub Pages" workflow will run automatically.
- Check Settings: Ensure Settings > Pages is set to "Deploy from a branch" using the
gh-pagesbranch.
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- 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
Distributed under the MIT License. See LICENSE for more information. Data used within the app is subject to the Singapore Open Data Licence.
Alfred TANG - GitHub
Project Link: https://github.com/alfred1137/modern-weather-sg