Molecule.dev

Civic 311

Community Civic · React + Node (Express) · 11 @molecule/* packages

SeeClickFix-like civic issue reporter with photo + map pin, status workflow, duplicate detection, and watch areas — including a built-in subscription tier (Free / Pro / Team) backed by Stripe

Open in Molecule

Try it

Opens instantly. Runs on sample data, so changes reset on reload.

Open preview in a new tab ↗View workspace ↗

What is inside

Screens (16)

  • Landing /
  • Login /login
  • Signup /signup
  • ForgotPassword /forgot-password
  • ResetPassword /reset-password
  • Explore /explore (signed in)
  • ReportIssue /report (signed in)
  • MyReports /my-reports (signed in)
  • ReportDetail /reports/:id (signed in)
  • WatchAreas /watch-areas (signed in)
  • Notifications /notifications (signed in)
  • Settings /settings (signed in)
  • Pricing /pricing
  • About /about
  • Terms /terms
  • Privacy /privacy

Data model (6 tables)

  • devices — id, createdAt, updatedAt, userId, name, pushPlatform, pushSubscription, hasPushSubscription
  • issues — id, reporter_id, category, description, status, photo_url, x, y, …
  • issue_events — id, issue_id, kind, actor_id, text, from_status, to_status, created_at
  • confirmations — id, issue_id, user_id, created_at
  • watch_areas — id, user_id, name, x, y, radius, created_at
  • notifications — id, user_id, kind, issue_id, message, read_at, created_at

API (7 handlers)

  • \_seed api/src/handlers/_seed.ts
  • \_test api/src/handlers/_test.ts
  • issues api/src/handlers/issues.ts
  • notifications api/src/handlers/notifications.ts
  • photos api/src/handlers/photos.ts
  • users-me api/src/handlers/users-me.ts
  • watch-areas api/src/handlers/watch-areas.ts

Subscription tiers

free / pro / team — gated by: maxOpenIssues, maxWatchAreas, photoAttachments, duplicateDetection, watchAreaAlerts, exportHistory

Built from 11 @molecule/* packages

Browse all @molecule/* packages →

Required secrets

  • DATABASE_URL PostgreSQL connection string
  • STRIPE_SECRET_KEY Stripe secret API key (sk_test_... in test mode)
  • STRIPE_WEBHOOK_SECRET Stripe webhook signing secret (whsec_...)

The @molecule/* packages are Apache-2.0. The app you build from this template is yours to export and self-host. Licensing