Stars Orthodontics AI-Powered PWA

Challenge 1: Handling File Uploads in a PWA with Context API

The need to preview images immediately on the client while only submitting actual files at the end required separating compressed previews (stored in sessionStorage) and actual files (managed in React Context). This also needed to handle removing files correctly across both states.

Solution Approach

Used the Context API to store actual File objects separately from the session-persistent formData. Image previews were generated as compressed base64 strings stored in sessionStorage. Custom functions were added to remove image data from both sources when needed.

Challenge 2: Synchronizing Session Storage with Live Form Data

When navigating between the form and review pages, sessionStorage needed to persist data without overwriting or duplicating form state, especially when dealing with image preview data and conditional fields based on route.

Solution Approach

Handled form persistence using sessionStorage for text and preview data. On page load, the form parses the stored session data, syncing it into local state. The actual files are restored from Context and not serialized, ensuring a clean separation of transient and persistent data.

Challenge 3: Managing Multi-Type Forms in a Unified Component

Each appointment type (new, reschedule, emergency, supplies) required conditional logic and unique fields. The challenge was to keep all flows within one dynamic form component without duplicating logic or validation rules.

Solution Approach

Used Next.js's usePathname to detect the route and conditionally render form sections such as emergency photo uploads, rescheduling notes, and supply checkboxes — all within a single component. Validation logic was also adapted based on the form type.