Mobile-first web app for a car community: live radar-style map, driver profiles, sprint challenges, and a synchronized race countdown with an in-race HUD. Built as a Next.js (App Router) + TypeScript + Tailwind CSS prototype, with TypeScript types aligned to a Palantir Foundry–style ontology.
| GitHub | github.com/krishp0130/Racer |
| Clone | git clone https://github.com/krishp0130/Racer.git |
| File | Purpose |
|---|---|
| README.md | Overview, setup, architecture, radar flow, ontology notes |
| LICENSE | MIT license |
| AGENTS.md | Notes for AI agents working on this Next.js codebase |
| scripts/publish-github.sh | Optional helper to create/push a new remote with gh |
- Dark, racing-inspired shell with bottom navigation: Radar (map), Garages (profile), Leaderboard.
- Interactive map (MapLibre via react-map-gl) using the public demo style (no API key).
- Sprint challenge flow: tap an opponent marker → bottom sheet with vehicle stats → place a finish line on the map → simulated accept → full-screen 3-2-1-GO → active HUD (speed + distance to finish).
- Foundry-oriented types for
Driver,Vehicle,LiveTelemetry, andRaceinsrc/types/ontology.ts.
| Area | Choice |
|---|---|
| Framework | Next.js 16 (App Router) |
| UI | React 19, Tailwind CSS 4 |
| Map | maplibre-gl, react-map-gl / @vis.gl/react-maplibre |
| Fonts | Outfit, JetBrains Mono (next/font/google) |
- Node.js 20+ (see Next.js system requirements)
- npm (ships with Node)
git clone https://github.com/krishp0130/Racer.git
cd Racer
npm install
npm run devOpen http://localhost:3000. The home route redirects to /radar.
| Command | Description |
|---|---|
npm run dev |
Dev server (Turbopack) |
npm run build |
Production build |
npm run start |
Run production server |
npm run lint |
ESLint |
src/
app/
(app)/ # Tabbed app routes (wrapped in AppShell)
layout.tsx
radar/ # Map + race flow (client map loaded dynamically)
garages/
leaderboard/
layout.tsx # Root layout, fonts, metadata
page.tsx # Redirects to /radar
globals.css # Theme tokens + animation keyframes
components/
AppShell.tsx # Layout + bottom nav spacing
BottomNav.tsx # Primary navigation (client)
lib/
geo.ts # Haversine distance + interpolate toward finish
types/
ontology.ts # Ontology-shaped TypeScript interfaces
- Browsing — Opponent marker (VS) is tappable; map is pannable.
- Opponent sheet — Shows mock opponent username and
Vehicle(make, model, year, HP). Challenge to sprint closes the sheet. - Placing finish — Banner instructs: tap the map to set the finish; cursor becomes a crosshair.
- Finish marker — Checkered flag marker at the chosen coordinates.
- Awaiting accept — After 2 seconds, a short toast simulates the opponent accepting; then the countdown phase starts.
- Countdown — Full-screen overlay: 3 → 2 → 1 → GO (CSS keyframes in
globals.css). - Active — Top HUD shows simulated mph and distance to finish while the user marker moves toward the finish (until within ~10 m).
Map loading is client-only (ssr: false) so maplibre-gl never runs on the server (RadarClientEntry.tsx).
Types in src/types/ontology.ts mirror objects you might define in Foundry:
Driver—id,username,vehicleId,eloRatingVehicle—id,make,model,year,horsepower,classLiveTelemetry—driverId, position,speed,heading,timestampRace—status(pending|countdown|active|finished),participants,startCoords/finishCoords,winnerId
Pipelines, Actions, and AIP can later own authoritative race state, telemetry ingestion, and natural-language ops on these objects.
This project’s canonical remote is github.com/krishp0130/Racer. Clone and pull from there.
To publish a fork or new copy under another account, use the GitHub CLI (brew install gh):
gh auth login
./scripts/publish-github.sh your-repo-nameIn automation (or when gh has no TTY), set GH_TOKEN to a personal access token with the repo scope. On macOS, credentials stored for github.com in the Keychain (e.g. via Git) are often usable as GH_TOKEN when passed explicitly.
MIT — see LICENSE.