🌿 Day Out in KL

A single-page app to plan your day at Kuala Lumpur's 494 gazetted green spaces, with live weather forecasts.

Features

• Live Weather from wttr.in (via serverless proxy)
• Smart Recommendations - Best time algorithm considers rain, UV, time of day
• 494 Green Spaces - Data from Warta Kawasan Lapang/Hijau WPKL
• Responsive Design - Works on mobile and desktop

Tech Stack

• Frontend: React + Vite + Tailwind CSS
• Backend: Vercel Serverless Functions
• Weather API: wttr.in (free, no API key)
• Data: Gazetted green spaces from WPKL

Deploy to Vercel

One-Click Deploy

Manual Deploy

1. Push to GitHub

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin https://github.com/YOUR_USERNAME/kl-green-day-out.git
   git push -u origin main

2. Deploy on Vercel

   • Go to vercel.com
   • Import your GitHub repo
   • Vercel auto-detects Vite and deploys

3. Done! Your app is live at https://your-project.vercel.app

Local Development

# Install dependencies
npm install

# Run dev server
npm run dev

# Build for production
npm run build

Project Structure

kl-green-day-out/
├── api/
│   └── weather.js      # Vercel serverless function (proxies wttr.in)
├── src/
│   ├── App.jsx         # Main React component
│   ├── main.jsx        # Entry point
│   └── index.css       # Tailwind CSS
├── index.html
├── package.json
├── vite.config.js
├── tailwind.config.js
└── vercel.json

Weather API

The app uses a serverless function (/api/weather) to proxy wttr.in:

• Avoids CORS issues
• Caches responses for 10 minutes
• Falls back to typical KL weather patterns if API fails

Data Source

Green space data extracted from the official Warta Kawasan Lapang/Hijau WPKL KMZ file containing 494 gazetted locations covering 418 hectares.

License

MIT