Dyno
A social car-tracking app — think Untappd, but for the cars you've driven and spotted.
What it does
The core loop:
- Log experiences — drove or spotted a car, optionally with notes and a 0–5 star rating
- React — leave 🔥 👀 🤙 emoji reactions on friends' experiences
- Follow — your feed is filtered to you + people you follow
- Garage — track cars you currently own and ones you've owned in the past
- Earn badges — 7-series progressive achievement system (drive counts, brand diversity, EV pioneer, stick shift, etc.)
- Discover — every
{manufacturer, model} has its own page with a community rating aggregated from all logged experiences
The star rating UI is a custom-built clock-fill star icon that draws a bright stroke along the star's outline proportional to the rating, and expands into a row of mini-stars on hover/tap.
Tech stack
| Layer | Technology |
|---|
| Frontend | React 18, TypeScript, Vite, react-router-dom, Axios |
| Backend | Node.js, Express 5, Multer + Cloudinary (photo uploads) |
| Database | MongoDB (Mongoose 8) |
| Auth | Clerk (magic-link email) |
| E2E testing | Playwright (isolated carsDB_test, fixture seeding) |
| Dev tooling | Nodemon |
Project structure
dyno/
└── dyno-react-app/
├── src/ # React frontend
│ ├── components/ # StarIcon, BadgeShelf, ReactionBar, etc.
│ ├── views/ # Feed, Profile, Cars, CarModel, admin, sign-in
│ └── lib/ # Small helpers (api, auth, modelSlug, etc.)
├── backend/ # Express API server
├── tests/ # Playwright E2E specs + setup
└── playwright.config.ts
Getting started
Prerequisites
- Node.js (v18+)
- MongoDB running locally on the default port (
27017)
- Clerk keys in
dyno-react-app/.env.local and Clerk + Cloudinary keys in dyno-react-app/backend/.env — see "Env vars" in CLAUDE.md
Backend
cd dyno-react-app/backend
npm install
npm run dev # starts the API server on port 5000
The backend seeds default badge series automatically on startup. To fill the local database with dummy users, cars, and activity, run node seedDev.js (node seedDev.js --clear removes it again). It only touches carsDB on localhost and leaves data you created through the app alone.
Frontend
cd dyno-react-app
npm install
npm start # starts the Vite dev server on port 3000
Open http://localhost:3000 in your browser.
E2E tests
cd dyno-react-app
npm run test:e2e # headless run
npm run test:e2e:ui # Playwright UI runner
The test harness kills the dev backend, starts an isolated backend against carsDB_test, seeds fixtures via POST /api/test/seed, runs the suite, then restarts the dev backend pointed back at carsDB. Tests run serially because they share a database.
API endpoints
See docs/api.md for the full endpoint reference. The main resources:
manufacturers, cars, humans, ownerships, photosexperiences (with notes, ratings, attached reactions)reactions, followsusers/:id/profile, users/:id/badges, users/:id/wishlistmodels/:mfr/:model — model page aggregate- Plus test-only endpoints (
/api/test/seed, /api/test/reset-badges) that are only registered when MONGO_DB=carsDB_test
