dentl2

dentl2 is a specialized SaaS platform designed for dental clinics. It provides a comprehensive suite of tools for patient management, appointment scheduling, and interactive 3D dental charting utilizing WebGL technologies.

Dental clinics rely heavily on visual charting to track patient histories. Existing software often relies on static 2D images, making it difficult to record complex procedures. Furthermore, legacy systems are often siloed, lacking modern API integrations for SMS reminders or online booking.

Dental clinics rely heavily on visual charting to track patient histories. Existing software often relies on static 2D images, making it difficult to record complex procedures. Furthermore, legacy systems are often siloed, lacking modern API integrations for SMS reminders or online booking.

• Integrate interactive 3D rendering directly into the browser for dental charting.
• Provide a robust, secure backend for managing sensitive patient data.
• Ensure the application is lightweight and fast enough to run on standard clinic hardware.

High-Level Architecture

A Next.js frontend serving as the interactive dashboard, coupled with a lightweight Node.js/Express backend API. The 3D charting is handled client-side using Three.js, offloading rendering work to the user's GPU to keep server costs negligible.

System Components

• Frontend: Next.js 15, React 19, Tailwind CSS 4.
• State & Animations: Zustand, GSAP, Framer Motion, Lenis.
• 3D Engine: Three.js (for rendering interactive teeth models).
• Backend: Node.js, Express.js 5, TypeScript.
• Database: SQLite 3 (WAL mode) via better-sqlite3.

High-Level Architecture

A Next.js frontend serving as the interactive dashboard, coupled with a lightweight Node.js/Express backend API. The 3D charting is handled client-side using Three.js, offloading rendering work to the user's GPU to keep server costs negligible.

System Components

• Frontend: Next.js 15, React 19, Tailwind CSS 4.
• State & Animations: Zustand, GSAP, Framer Motion, Lenis.
• 3D Engine: Three.js (for rendering interactive teeth models).
• Backend: Node.js, Express.js 5, TypeScript.
• Database: SQLite 3 (WAL mode) via better-sqlite3.

SQLite 3 configured in WAL (Write-Ahead Logging) mode for high concurrency.

• appointments: Patient bookings linked to doctors with Google event IDs.
• doctors: Doctor profiles and JSON availability schedules.
• admin_users: Admin accounts with hashed passwords and roles.
• blog_posts & gallery_images: CMS tables for content management.

• Authentication: JWT tokens signed with JWT_SECRET; bcrypt password hashing.
• Input Validation: All request bodies strictly validated with Zod schemas.
• Security Headers & Rate Limiting: Helmet.js for CSP/HSTS, and Express rate limiting on auth endpoints.

Frontend deployed on Vercel utilizing optimized Edge routing. Backend hosted as a containerized Node.js service, mounting a persistent volume for the SQLite DB_PATH and image UPLOAD_DIR.

• Authentication: JWT tokens signed with JWT_SECRET; bcrypt password hashing.
• Input Validation: All request bodies strictly validated with Zod schemas.
• Security Headers & Rate Limiting: Helmet.js for CSP/HSTS, and Express rate limiting on auth endpoints.

• Challenge: Rendering high-fidelity 3D models in the browser without causing memory leaks or UI stuttering.
• Solution: Optimized the Three.js geometry, implemented frustum culling, and ensured all WebGL contexts were properly disposed of when the React component unmounted.

• Challenge: Rendering high-fidelity 3D models in the browser without causing memory leaks or UI stuttering.
• Solution: Optimized the Three.js geometry, implemented frustum culling, and ensured all WebGL contexts were properly disposed of when the React component unmounted.

• "How did you prevent memory leaks when integrating Three.js within a React/Next.js component lifecycle?"
• "Why choose SQLite for the backend, and how would you migrate it if a client needed horizontal scaling?"