Concept · built with AI tools
Lumen Dental Care Dental clinic website with real-time appointment booking
A full dental clinic website for a fictional Hyderabad practice, Lumen Dental Care, with a four-step online appointment scheduler and a staff dashboard. The React + Tailwind frontend talks to a framework-free PHP REST API backed by MySQL.
- Status
- Concept · built with AI tools
- Type
- Web app
- Category
- Healthcare website
- Version
- v1 (unversioned build)
- Built with
- React 18, Vite 5, React Router 6 …
This is a self-initiated concept, designed and built by Srini with AI tools. It is not a real company or client project.
The problem
A clinic site has to do more than look trustworthy: patients want to see treatments, prices and dentists, then book a real slot without phoning. The scheduler needed genuine availability (doctor shifts, existing bookings, holidays, minimum notice) and protection against double-booking, while staff needed a simple place to manage appointments.
Who it is for
Patients looking for a dentist and booking visits; front-desk staff managing appointments, messages and clinic holidays.
Features
- Home with hero, treatments, why-us, team, before/after slider, reviews, FAQ, map
- Treatments list with category filter and auto-generated detail pages
- 4-step booking wizard: treatment, dentist, date & time, details
- Live calendar and time slots from doctor schedules, bookings and holidays
- Double-booking protection (server re-check + database unique key)
- Confirmation with reference number and add-to-calendar (.ics)
- Email notifications to clinic and patient
- Staff dashboard: appointments with search, filters and status, messages, holiday blocking
- Click-to-call, WhatsApp button, sticky mobile Call/Book bar, emergency banner
- Per-page SEO, Open Graph and schema.org Dentist JSON-LD
- Accessible: skip link, keyboard-operable slider, accordion and calendar, reduced motion
Pages & screens
- Home
- Treatments
- Treatment detail (/services/:slug)
- Our Dentists
- About
- Smile Gallery
- Patient Info
- Blog and blog post
- Contact
- Book appointment (4 steps + confirmation)
- Privacy
- 404
- Staff login
- Staff dashboard
Stack
- React 18
- Vite 5
- React Router 6
- Tailwind CSS 3
- PHP 8.1 (no framework, PDO) REST JSON API
- MySQL / MariaDB
How I built it with AI
Built end-to-end with an AI coding assistant directing a full-stack scope: React/Tailwind frontend, plain-PHP REST API, MySQL schema and seed data. The AI also produced a 21-page Developer Guide (architecture, folder structure, editing content without React knowledge, how slots are calculated, adding pages/endpoints/tables, deployment on Apache/cPanel or Nginx, go-live checklist and security notes) so the project can be handed to another developer. No prompt file was supplied for this project.
Design highlights
- Highlight 01 — Slot engine: dentist shifts on a 30-minute grid, keeping only starts where the whole treatment fits, minus existing bookings, blocked dates and minimum notice
- Highlight 02 — Deep links like /book?service=dental-implants&doctor=dr-arjun-rao pre-fill the wizard from 'Book this treatment' and 'Book with Dr…' buttons
- Highlight 03 — Content lives in plain data files (site.js, services.js, doctors.js) so non-developers can edit clinic details, treatments and dentists
- Highlight 04 — Mobile-first conversion aids: sticky Call/Book bar, WhatsApp button and an emergency strip in the top bar
- Highlight 05 — Security baked in: prepared statements, server-side validation, honeypot + rate limiting, hashed passwords and tokens, CORS whitelist