A modern, responsive web application that displays real-time traffic camera feeds from across Singapore. Built with React, this app provides live monitoring of traffic conditions through a beautiful, user-friendly interface.
View the live application: https://traffic-images.vercel.app/
The app is deployed and running on Vercel for easy access and testing.
- Real-time Traffic Monitoring: Live camera feeds updated every 20 seconds
- Beautiful UI/UX: Modern, responsive design with smooth animations
- Live Statistics: Display of active camera count and current date
- Auto-refresh: Automatically updates every minute for fresh data
- Manual Refresh: Button to manually refresh camera feeds
- Error Handling: Graceful error handling with retry functionality
- Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
- Image Metadata: Shows camera resolution and timestamp information
This application integrates with the Data.gov.sg Traffic Images API, which:
- Retrieves data every 20 seconds from LTA's Datamall
- Provides live traffic camera images from locations across Singapore
- Includes camera metadata and timestamps
- Updates automatically to ensure current information
The easiest way to see the app in action is to visit the live demo:
- Live Demo: https://traffic-images.vercel.app/
- Node.js (version 14 or higher)
- npm or yarn package manager
-
Clone the repository:
git clone <repository-url> cd traffic-images
-
Install dependencies:
npm install
-
Start the development server:
npm start
-
Open http://localhost:3000 in your browser
To create a production build:
npm run buildThe build files will be created in the build folder, ready for deployment.
- Frontend: React 18
- Styling: CSS3 with modern features (Grid, Flexbox, CSS Variables)
- API Integration: Fetch API for data retrieval
- Responsive Design: Mobile-first approach with CSS Grid
- Animations: CSS transitions and keyframe animations
- Deployment: Vercel for hosting and continuous deployment
- View Live Feeds: The app automatically loads and displays all available traffic cameras
- Monitor Traffic: Each camera shows a live image with timestamp and metadata
- Refresh Data: Use the refresh button to manually update camera feeds
- Track Updates: See when the data was last updated
- View Statistics: Check the number of active cameras and current date
The app is configured to:
- Refresh camera data every 60 seconds (recommended by the API)
- Display images with lazy loading for better performance
- Handle API errors gracefully with user-friendly messages
- Automatically adapt to different screen sizes
- Base URL:
https://api.data.gov.sg/v1 - Traffic Images:
/transport/traffic-images - Update Frequency: Every 20 seconds (API), every 60 seconds (app)
Each camera provides:
- Camera ID and image ID
- Live image URL
- Timestamp of capture
- Image dimensions (width × height)
- MD5 hash for verification
- Clean Color Scheme: Professional light theme with subtle gradients
- Glassmorphism Effects: Modern backdrop blur and transparency
- Smooth Animations: Hover effects and micro-interactions
- Card-based Layout: Organized display of camera information
- Responsive Grid: Adaptive layout for all device sizes
The app includes comprehensive error handling:
- Network error detection
- API response validation
- User-friendly error messages
- Retry functionality
- Graceful fallbacks
- Lazy loading of images
- Efficient state management
- Minimal re-renders
- Optimized CSS animations
- Responsive image handling
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is open source and available under the MIT License.
This application is deployed on Vercel for:
- Automatic deployments from the main branch
- Global CDN for fast loading worldwide
- HTTPS security by default
- Easy scaling and maintenance
Live URL: https://traffic-images.vercel.app/
- Data.gov.sg for providing the traffic camera API
- LTA (Land Transport Authority) for the traffic data
- React team for the amazing framework
- Vercel for excellent hosting and deployment services
- Open source community for various tools and libraries
If you encounter any issues or have questions:
- Check the browser console for error messages
- Verify your internet connection
- Ensure the API endpoint is accessible
- Open an issue in the repository
Note: This application is for informational purposes only. Always follow local traffic laws and regulations when driving in Singapore.