k1nal0/bustrackr-real-time-transit-tracker
Generate only the frontend of a bus-tracking web app using React (functional components + hooks), HTML, CSS Modules, and JavaScript. Include React Router for navigation and structure the project with files: package.json, public/index.html, src/index.js, src/App.js, src/routes/Router.js, src/components (Header, Dashboard, MapView, BusList, BusCard, RouteDetail each with .js + .module.css), src/hooks/useRealtimeBuses.js, src/services/api.js, src/services/mockServer.js, src/utils/haversine.js + haversine.test.js, src/styles/global.css, src/service-worker.js, .eslintrc.json, .prettierrc, README.md, .gitignore. The mock server should simulate WebSocket updates with polling fallback and return bus objects in the format { "id": "bus-42", "routeId": "R12", "routeName": "Town Center ↔ East Park", "lat": 12.9716, "lon": 77.5946, "speedKmph": 28, "occupancy": "medium", "lastSeen": "2025-09-25T10:12:00.000Z" }. Features must include real-time updates (WebSocket with polling fallback), ETA calculation using the Haversine formula, low-bandwidth mode (text-only and cached data), lazy-loaded Map component, responsive accessible UI, ESLint + Prettier configs, and a service worker for offline caching. Output only the file blocks with paths and contents, no explanations; the app must run with npm install && npm start.
Generate only the frontend of a bus-tracking web app using React (functional components + hooks), HTML, CSS Modules, and JavaScript. Include React Router for navigation and structure the project with files: package.json, public/index.html, src/index.js, src/App.js, src/routes/Router.js, src/components (Header, Dashboard, MapView, BusList, BusCard, RouteDetail each with .js + .module.css), src/hooks/useRealtimeBuses.js, src/services/api.js, src/services/mockServer.js, src/utils/haversine.js + haversine.test.js, src/styles/global.css, src/service-worker.js, .eslintrc.json, .prettierrc, README.md, .gitignore. The mock server should simulate WebSocket updates with polling fallback and return bus objects in the format { "id": "bus-42", "routeId": "R12", "routeName": "Town Center ↔ East Park", "lat": 12.9716, "lon": 77.5946, "speedKmph": 28, "occupancy": "medium", "lastSeen": "2025-09-25T10:12:00.000Z" }. Features must include real-time updates (WebSocket with polling fallback), ETA calculation using the Haversine formula, low-bandwidth mode (text-only and cached data), lazy-loaded Map component, responsive accessible UI, ESLint + Prettier configs, and a service worker for offline caching. Output only the file blocks with paths and contents, no explanations; the app must run with npm install && npm start.
initial commit
