All projects
Next.js · TypeScript · PostgreSQL · Prisma · SupabaseAI-assisted

Optics Physics Lab Website & CMS

2026Full-stack · CMS · RBAC · Bilingual (i18n) · AI Integration · Booking System · Solo Project

The problem

Prof. Wu's lab had two unmet needs. Publicly, the lab ran on a static site that doubled as the professor's academic presence — publications, and the popular-science writing he wanted to share with a general audience — but every update meant editing code and redeploying, so content drifted out of date and only whoever last touched the repo could change it.

Internally, shared instruments were booked on a paper sheet taped next to each machine: you had to physically walk over to reserve a slot, and log your usage by hand at the instrument when you were done.

The solution

I built a self-hosted platform that serves both audiences from one system. For the public side, non-technical staff edit bilingual (EN/中文) content — publications, science articles, and lab info across 9+ content types — through a draft-and-review workflow, with no code and no redeploys.

For the lab side, an online booking system replaced the paper sheet: members reserve hourly slots from anywhere, check in automatically, and file their usage log and equipment-condition report through QR checkout instead of scribbling at the machine.

Because the site is fully bilingual, keeping two languages in sync would normally double the maintenance. I turned that into a highlight with one-click AI translation: admins maintain content in a single language and Gemini drafts the other, so everything is written only once. AI output is always a reviewable draft, never auto-published.

Instrument management — the admin catalog behind the booking system: drag to reorder, assign a per-instrument manager, and track live status (in use, overdue checkout, or free) that replaced the handwritten sheet.

Key features & challenges

  • Authorization is 100% application-layer RBAC; RLS is used only to seal Supabase's auto-generated anonymous REST API.
  • Three-tier roles (student / admin / super-admin) with instrument-level manager permissions.
  • One-click AI translation — maintain one language, Gemini drafts the other.
  • Online hourly-slot booking with auto check-in and QR checkout, replacing a paper sheet.

My contributions

  • Sole developer — architecture, data modeling, full-stack build, and deployment.
  • Designed the PostgreSQL data model and the hourly-slot booking flow (check-in, QR checkout, condition reporting).
  • Built the application-layer RBAC: shared role guards with page-level and server-action-level checks, plus instrument-level manager permissions.
  • Integrated Gemini as swappable modules — Word-to-draft, one-click translation, and a rate-limited bilingual FAQ chatbot.
  • Shipped on Vercel + Supabase with GitHub Actions scheduling.