Alfredton Dental
A clinic website for Alfredton Dental with a Supabase-backed admin dashboard for managing services, doctors, and site content.
Live PreviewProject Gallery
Context
The Problem
Alfredton Dental's previous site was static, with every content change meaning a developer had to edit code and redeploy. There was no way for staff to update services, doctors, or page content on their own.
My Role
Design
- Designed a strict, ultra-minimal system: no border-radius, sans-serif only, maximum whitespace
- Designed the Home, Services, Practitioners, and admin dashboard screens in Figma
Frontend
- Next.js 16 and React 19 with Lenis smooth scroll
- Home, About, Services, Practitioners, and Contact pages, plus service detail pages
- Turnstile-protected contact form
Backend
- Supabase Postgres and Auth for admin login and content storage
- Admin CRUD for doctors, services, home content, and settings
- Cloudflare R2 for admin-uploaded images
Infrastructure & DevOps
- Vercel for deployment
- Environment-scoped configuration for clinic identity and API keys
Solution & Process
Design Validation
Followed a strict design system: no border-radius anywhere, sans-serif fonts only, maximum whitespace, and animation limited to entrance fades and smooth scroll, so the site reads calm and clinical instead of typical dental-marketing busy.
Technical Stack Selection
Built on Next.js 16 with the App Router and Supabase for Postgres and authentication. Every content type, services, doctors, home sections, and settings, is stored in Supabase and editable from an admin dashboard instead of hardcoded in the codebase.
Technical Decisions & Trade-offs
Chose Supabase over a custom backend to get Postgres and auth together, so admin login and content storage could ship without building either from scratch, while keeping full control over the schema for services, doctors, and site settings.