A Next.js web application that helps users find nearby carparks in Singapore with real-time availability information. Built with TypeScript, React, and Tailwind CSS, this app fetches data from Singapore's open data APIs and provides an intuitive interface to search for parking spaces based on your location.
- 🔍 Location-based Search - Find carparks within a specified radius of any coordinates in Singapore
- 📍 Real-time Availability - Displays current parking lot availability from Singapore's Data.gov.sg API
- 🎯 Distance Calculation - Uses the Haversine formula to calculate accurate distances
- 🗺️ Coordinate Conversion - Automatically converts SVY21 coordinates to WGS84 (latitude/longitude)
- 💾 Smart Caching - Implements caching to reduce API calls and improve performance
- 🌓 Dark Mode Support - Beautiful UI with light and dark theme support
- 📱 Responsive Design - Works seamlessly on desktop, tablet, and mobile devices
- ⚡ Fast Performance - Built with Next.js 16 and Turbopack for optimal speed
The application follows a clean, modular architecture:
CarPark_finder/
├── app/
│ ├── api/
│ │ └── carparks/
│ │ └── route.ts # API endpoint for carpark search
│ ├── page.tsx # Main search interface
│ ├── layout.tsx # App layout with font configuration
│ └── globals.css # Global styles and Tailwind configuration
├── lib/
│ ├── api/
│ │ └── carpark.ts # API client for data.gov.sg
│ ├── services/
│ │ └── carpark-service.ts # Business logic for carpark operations
│ ├── types/
│ │ └── carpark.ts # TypeScript type definitions
│ └── utils/
│ ├── coordinates.ts # SVY21 ↔ WGS84 conversion utilities
│ ├── distance.ts # Haversine distance calculations
│ └── formatter.ts # CLI table and JSON formatters
└── package.json
- Node.js 20.x or higher
- npm, yarn, pnpm, or bun package manager
-
Clone the repository
git clone https://github.com/Shaur0108/CarPark_finder.git cd CarPark_finder -
Install dependencies
npm install # or yarn install # or pnpm install # or bun install
-
Run the development server
npm run dev # or yarn dev # or pnpm dev # or bun dev
-
Open your browser
Navigate to http://localhost:3000 to see the application.
npm run dev- Start development servernpm run build- Build production bundle with Turbopacknpm run start- Start production server on port 3001npm run cli- Run CLI interface (if available)
- Next.js 16.1.1 - React framework with App Router
- React 19.1.0 - UI library
- TypeScript 5 - Type-safe development
- Tailwind CSS 4 - Utility-first styling
- Geist Font - Modern font family from Vercel
- Axios 1.12.2 - HTTP client for API requests
- Node Cache 5.1.2 - In-memory caching
- Proj4 2.19.10 - Coordinate transformation library
- Commander 14.0.1 - CLI framework
- Chalk 5.6.2 - Terminal string styling
- CLI Table3 0.6.5 - Terminal table formatting
- Ora 9.0.0 - Terminal spinners
- ts-node - TypeScript execution
- Rimraf - Cross-platform file deletion
- PostCSS - CSS processing
This application uses Singapore's official open data APIs:
-
Carpark Information
- Source: data.gov.sg
- Endpoint:
https://data.gov.sg/api/action/datastore_search - Resource ID:
139a3035-e624-4f56-b63f-89ae28d4ae4c - Contains: Carpark locations, types, parking systems, and metadata
-
Carpark Availability
- Source: data.gov.sg
- Endpoint:
https://api.data.gov.sg/v1/transport/carpark-availability - Updates: Real-time availability data
- Contains: Available lots, total lots, lot types
- Enter your latitude (e.g., 1.3521)
- Enter your longitude (e.g., 103.8198)
- Specify search radius in meters (default: 500m)
- Click Search to find nearby carparks
- View results with:
- Carpark number and address
- Distance from your location
- Available parking lots (when available)
- Carpark type and parking system details
You can also query the API directly:
GET /api/carparks?lat=1.3521&lng=103.8198&radius=1500Query Parameters:
lat- Latitude (required)lng- Longitude (required)radius- Search radius in meters (optional, default: 1500)
Response:
{
"results": [
{
"car_park_no": "ACB",
"address": "BLK 270/271 ALBERT CENTRE BASEMENT CAR PARK",
"distance": 245.8,
"latitude": 1.352083,
"longitude": 103.819836,
"lots_available": "45",
"car_park_type": "BASEMENT CAR PARK",
"type_of_parking_system": "ELECTRONIC PARKING"
}
]
}The application uses in-memory caching with the following defaults:
- Carpark data: 1 hour TTL (3600 seconds)
- Availability data: Fetched in real-time, no caching
Singapore coordinate boundaries:
- Latitude: 1.15 to 1.48
- Longitude: 103.6 to 104.1
- Default radius: 1500 meters
- Result limit: 5 nearest carparks (web interface)
- Distance calculation: Haversine formula for accuracy
- Gradient background with light/dark theme support
- Frosted glass effect on form elements
- Responsive grid layout for search results
- Interactive hover states for better UX
- Loading indicators during API calls
- Error handling with user-friendly messages
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- 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.
- Singapore Government's Data.gov.sg for providing open data APIs
- Next.js team for the amazing framework
- Vercel for Geist font and hosting platform
If you encounter any issues or have questions:
- Open an issue on GitHub
- Check existing issues for solutions
Made with ❤️ in Singapore | Built with Next.js, TypeScript, and Tailwind CSS