Ivorymade - Dental Prosthetics Management Platform

Professional Work

Core Feature Development

• Built the complete frontend application from scratch using React 19, TypeScript, Redux Toolkit, and Tailwind CSS.

• Developed authentication flows including login, signup, OTP verification, email verification, password reset, onboarding, and token refresh.

• Built the complete order creation workflow supporting multiple dental restoration types, including crowns, bridges, veneers, implants, night guards, and dentures.

• Implemented interactive SVG-based tooth selection and detailed dental case configuration.

• Developed the multi-stage order workflow from draft and submission through design review, payment, production, transit, and delivery.

• Built role-based actions and UI for dentists, assistants, office managers, and administrators.

• Implemented real-time WebSocket chat with message synchronization, read/unread tracking, file attachments, pagination, and optimized auto-scroll behavior.

• Integrated frontend payment flows with Stripe, including refunds and invoice generation.

• Built a Three.js STL viewer for interactive dental model visualization.

• Developed QR-code-based mobile file uploads using encrypted, time-limited tokens.

• Built admin functionality for users, attributes, FAQs, policies, reports, and dashboard analytics.

Architecture & Refactoring

• Created an Attribute Slice Factory Pattern, replacing 38+ duplicated Redux slices and reducing related code from 2,021 lines to 413 lines — an 80% reduction.

• Centralized API error handling across 27 HTTP service files, removing 530+ lines of repetitive error-handling code.

• Refactored role-based authentication and redirect logic for more reliable loading, success, error, and inactive-user states.

1. Reducing Redux Code Duplication

Challenge:
The application had 38+ dental attributes, each using a separate Redux slice with nearly identical logic. This created significant duplication and increased maintenance overhead.

Solution:
Created a reusable AttributeSliceFactory that dynamically generates Redux slices from a shared configuration.

Result:
Reduced the related codebase from 2,021 lines to 413 lines — an 80% reduction.

2. Real-Time Chat Synchronisation

Challenge: The support inbox builds one thread from three sources — the first page fetch, older pages loaded on scroll, and messages arriving live over a socket. The merge kept whatever arrived last, so a message delivered mid-fetch appeared twice, prepending an older page moved content under the reader, and pagination fired on threads too short to scroll.

Solution: I rebuilt the merge around identity — and it needed two. Fetched pages reconcile against a Set of server ids, so the same page can arrive twice harmlessly. But a message you have just sent has no server id yet, so matching on id appended a duplicate when the echo returned; the socket path reconciles on the client-generated check_id instead, letting the echo replace the optimistic row in place. Pagination gained a scrollable-container guard and a listener keyed to the thread id, and scroll height is captured before a prepend and restored after.

Result: Duplicates, scroll jumping and phantom pagination all stopped. Two identities for two jobs — the server id to deduplicate fetched pages, the optimistic check_id to reconcile your own send. When the platform moved to the next-generation codebase, the deduplication, the scroll restore and the scrollable guard carried across unchanged.

3. Complex Order Workflow

Challenge:
The platform required a multi-stage dental restoration workflow with 9+ order statuses, role-specific actions, and different UI states.

Solution:
Implemented structured status transitions, role-based conditions, and state-specific UI throughout the order lifecycle.

Result:
Created a consistent workflow from order creation through design review, payment, production, transit, and delivery.

4. 3D Dental Model Visualization

Challenge:
Dental STL files needed to be displayed interactively while keeping the application responsive when loading larger models.

Solution:
Integrated Three.js with dynamic imports and implemented interactive model viewing and flip functionality.

Result:
Enabled users to inspect dental restoration models directly within the platform.