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.

See the screensBuild something like this
Lumen Dental Care: cover screen
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.

01The 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.

02Who it is for

Patients looking for a dentist and booking visits; front-desk staff managing appointments, messages and clinic holidays.

03Features

  • 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

04Pages & 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

05Stack

React 18
Vite 5
React Router 6
Tailwind CSS 3
PHP 8.1 (no framework, PDO) REST JSON API
MySQL / MariaDB

06How 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.

07Design 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