Building Dentwise: A Modern Dental Platform with AI Voice Assistant and Full-Stack Functionality

In today’s post, we’ll explore the journey of building Dentwise, a comprehensive dental platform featuring a sleek landing page, appointment booking system, admin dashboard, and an AI-powered voice assistant. This project leverages cutting-edge technologies including Next.js, Tailwind CSS, Prisma, Clerk, and VPY AI, wrapped in a seamless full-stack development experience.

Overview of Dentwise Features

Dentwise is designed to offer users a unified platform for dental care management:

• Modern Landing Page: Eye-catching UI with gradients, animations, and responsive design.
• Authentication: Supports sign-up/sign-in via Google, GitHub, and email/password with six-digit verification.
• Appointment Booking: A guided three-step process—select dentist, choose service/date/time, and confirm booking with email notifications.
• Admin Dashboard: Manage doctors, appointments, and monitor analytics with real-time updates.
• AI Voice Agent: An interactive voice assistant providing dental info, tips, and support, available on paid subscription plans.
• Subscription Plans & Payments: Free and two paid plans with billing optimized for upgrades and prorated payments.
• Email Notifications: Automatic appointment confirmations sent using Resend.com.
• Version Control & Code Quality: GitHub workflows with branch management, pull requests, and AI-powered code review using CodeRabbit.
• Deployment: Hosted on Savala, leveraging developer-friendly features and free credits.

Technology Stack

• Frontend: Next.js (app router, server components), Tailwind CSS, ShadCN UI components, Lucide React icons.
• Backend: Prisma ORM with PostgreSQL (Neon provider), Clerk for authentication and payments.
• AI Integration: VPY AI for voice assistant capabilities.
• Email: Resend.com for transactional emails.
• Developer Tools: Git & GitHub, CodeRabbit for code reviews.
• Hosting: Savala platform.

Development Highlights

1. Setting Up Next.js and UI Components

• Initialized a Next.js app with TypeScript, Tailwind CSS, and ShadCN UI for ready-to-use components.
• Customized a dark purple theme using TweakCN.
• Created reusable components for the landing page (header, hero, pricing, footer) with responsive design and animations.

2. Authentication with Clerk

• Integrated Clerk to handle user authentication effortlessly with pre-built UI components.
• Supported multiple sign-in methods and email verification.
• Synced authenticated users from Clerk to the local database using a server action, ensuring data consistency.

3. Database Design with Prisma

• Defined models for User, Doctor, and Appointment with relations and enums (e.g., gender, appointment status).
• Leveraged Prisma to generate type-safe database queries.
• Implemented cascading deletes for appointments when users or doctors are removed.

4. Admin Dashboard

• Built a secure admin page with environment variable-controlled access.
• Features include doctor management (add/edit profiles with avatars), viewing and updating appointment statuses.
• Used React Query (TanStack Query) for efficient data fetching and cache invalidation.
• Added UI components for stats, welcome messages, doctor lists, and recent appointments.

5. Subscription Plans and Payments

• Created plans (Free, AI Basic, AI Pro) in Clerk dashboard with features and pricing.
• Integrated Clerk’s billing UI for managing subscriptions.
• Implemented logic to check user plan status for feature access control.
• Handled plan upgrades with prorated payments.

6. AI Voice Assistant Integration

• Used VPY AI to develop an interactive voice assistant named Riley.
• Configured assistant with system prompts and first messages to guide conversations about dental services.
• Implemented client-side widget handling call lifecycle events, messages, and speech animation.
• Enabled voice agent access exclusively for paid subscribers.

7. Appointment Booking Workflow

• Developed a step-by-step appointment booking UI:
• Step 1: Dentist selection from active doctors.
• Step 2: Appointment type, date, and available time selection with real-time slot availability.
• Step 3: Booking confirmation with summary and modification options.
• Server actions validate and create appointments linked to users and doctors.
• Implemented optimistic UI updates and error handling with toasts.
• Displayed user’s upcoming and past appointments with detailed info.

8. Email Notifications with Resend.com

• Configured transactional email sending via API route.
• Built React email templates for appointment confirmations.
• Ensured email delivery with domain management and API keys.
• Sent detailed appointment info including doctor, date/time, service, and pricing.

9. Deployment with Savala

• Prepared the app for production including Prisma generate in build scripts.
• Deployed on Savala with environment variables configured for Clerk, database, VPY, and Resend.
• Used Next.js’ unoptimized image setting to resolve image loading issues.
• Verified full live functionality including authentication, booking, AI voice, admin controls, and emails.

Developer Workflow & Best Practices

• Git Branching: Created feature branches for landing page, Prisma schema, admin page, pro page, voice page, dashboard, appointments, email sending, and deployment.
• Pull Requests & Code Review: Leveraged CodeRabbit AI to identify improvements, errors, and best practices before merging.
• Server Actions & Client Hooks: Followed a clean separation of server-side logic and client-side React hooks using Next.js app router conventions.
• Environment Variables: Managed sensitive keys securely and adapted URLs for deployment.
• UI Reusability: Utilized ShadCN components and custom components for consistency and efficiency.
• Error Handling & Loading States: Provided user feedback during data fetching and mutations.

Conclusion

Building Dentwise has been an exciting journey integrating modern web development with AI capabilities to create a user-friendly, functional dental platform. From setting up authentication and databases to crafting admin tools and voice interactions, this project demonstrates full-stack best practices with scalable technologies.

If you’re interested, the full source code is freely available, and you can leverage this project as a foundational template for similar SaaS platforms.

Ready to Build Your Own?

Whether you’re a developer looking to expand your skills or a dental professional exploring tech solutions, building a platform like Dentwise is within your reach. Follow along with the detailed tutorials, use the recommended tools, and bring your ideas to life!

Happy coding and here’s to better dental care powered by technology!