LuxySmile Oral Care - Product Website & Dashboard

The problem

LuxySmile needed a single website that could convince two very different buyers: school principals looking at dental wellness programs for students, and corporate HR managers evaluating team health packages. At the same time, dental staff needed an internal tool to manage patient cases - without IT infrastructure to handle large image files.

The challenge

LuxySmile Oral Care needed two things simultaneously: a premium-feeling public-facing website that would convert school administrators and corporate HR managers into B2B partners, and an internal dashboard that let dental teams manage smile design cases without routing large image files through an application server. The public site had to communicate both "luxury" and clinical credibility while keeping load times fast for a mobile-first Indian audience.

Architecture & System Design

Public marketing website targets schools and corporate wellness programs. Internal dashboard enables clinic staff to manage patient cases and treatment records. File uploads bypass application server (presigned URLs to cloud storage) for scalability. Analytics integration tracks visitor behavior and B2B conversion funnel. CSV bulk import supports onboarding existing patient data.

The public product website (luxysmile.com) is a React 18 + Vite SPA with Google Analytics 4 instrumentation, React Router, and Lucide React icons. Custom CSS with brand tokens (--luxyellow, --luxgreen) provides the premium gold-and-forest-green visual identity. The internal dashboard is a separate React 18 + Vite + TypeScript SPA. File uploads use the presigned S3 URL pattern - the client requests a temporary upload URL from the backend and pushes directly to S3, keeping the app server stateless. A PapaParse-powered CSV import lets teams bulk-onboard cases from existing spreadsheets.

Code Walkthrough

3-step walk-through of the production implementation. File paths and intent appear above each block.

1. 01

   Step 1 of 3

   Backend presign endpoint

   luxysmile-api/src/routes/cases.ts

   The app server never handles file bytes. When the client asks to upload, we authenticate, generate a short-lived S3 presigned URL scoped to a single object key, and hand it back. The actual PUT never touches our server.

   typescriptCopy

   router.post('/cases/presign', requireAuth, async (req, res) => {
       const { caseId, fileName, contentType } = presignSchema.parse(req.body);
   
       // Guard: user must own the case
       const owned = await db.case.findFirst({
           where: { id: caseId, ownerId: req.user.id },
           select: { id: true },
       });
       if (!owned) return res.status(404).json({ error: 'case not found' });
   
       const objectKey = `cases/${caseId}/${randomUUID()}/${safe(fileName)}`;
   
       const uploadUrl = await getSignedUrl(
           s3,
           new PutObjectCommand({
               Bucket: process.env.S3_BUCKET,
               Key: objectKey,
               ContentType: contentType,
           }),
           { expiresIn: 60 }, // 1-minute window
       );
   
       res.json({ uploadUrl, objectKey });
   });

   Takeaway

   Short TTL + per-request key prevents URL reuse. The server's only job is authorisation, not data transport.

2. 02

   Step 2 of 3

   Direct-to-S3 client upload

   luxysmile-dashboard/src/features/cases/hooks/useUpload.ts

   The browser fetches the presigned URL, then PUTs the file straight to S3. No proxying, no multipart forms in our codebase, no memory pressure on the app server regardless of file size.

   typescriptCopy

   async function uploadCaseAsset(file: File, caseId: string): Promise<string> {
       const { uploadUrl, objectKey } = await api.post('/cases/presign', {
           caseId,
           fileName: file.name,
           contentType: file.type,
       });
   
       await fetch(uploadUrl, {
           method: 'PUT',
           body: file,
           headers: { 'Content-Type': file.type },
       });
   
       return objectKey; // stored in case registry, retrieved via CloudFront
   }

   Takeaway

   Two network calls, zero server-side file buffering. The app scales horizontally without thinking about upload bandwidth.

3. 03

   Step 3 of 3

   CSV bulk import with streaming validation

   luxysmile-dashboard/src/features/cases/bulk/importCsv.ts

   Dental teams onboard pilot cohorts from existing spreadsheets. PapaParse streams rows so a 5,000-row sheet doesn't block the UI, and each row is validated against a Zod schema before it touches the API.

   typescriptCopy

   export function importCasesFromCsv(
       file: File,
       onProgress: (n: number) => void,
   ): Promise<ImportResult> {
       return new Promise((resolve) => {
           const valid: CaseRow[] = [];
           const errors: ImportError[] = [];
           let seen = 0;
   
           Papa.parse<RawCaseRow>(file, {
               header: true,
               skipEmptyLines: true,
               worker: true,
               step: (row) => {
                   seen++;
                   const parsed = CaseRowSchema.safeParse(row.data);
                   if (parsed.success) valid.push(parsed.data);
                   else errors.push({ line: seen, issues: parsed.error.issues });
                   if (seen % 50 === 0) onProgress(seen);
               },
               complete: () => resolve({ valid, errors, total: seen }),
           });
       });
   }

   Takeaway

   Streaming + Web Worker = a 5k-row import feels instant. Zod catches bad rows per-line so the whole batch never fails on a single typo.

Results

luxysmile.com is live, serving as the primary GTM surface for LuxySmile Oral Care's school and corporate wellness programs. The site includes a full B2B inquiry flow, School Health Award positioning, and an AI kiosk (OraScan Pro) upsell. The internal dashboard handles case file management for pilot dental practices with direct-to-S3 uploads eliminating server-side file handling bottlenecks.

Live Demos