Bright Clinic
Project Overview
Bright Clinic is a premium skin and aesthetic care clinic offering a range of cosmetic and dermatology services. The goal was to create a modern web platform where users can explore available treatments, purchase ongoing offers, and book appointments with specific doctors based on service and availability.
My Role
I led the development of the entire frontend, integrating both content and product APIs, and implemented a seamless appointment booking flow tailored to the clinic operations.
Project Highlights
- Dynamic service and doctor selection based on treatment types
- E-commerce-like system to purchase service packages and offers
- Clean, responsive UI focused on mobile-first users
- Real-time availability and confirmation system for appointments
Technical Stack
- Framework: Remix
- Styling: Tailwind CSS
- UI Components: Mantine
- CMS: Strapi (for content management)
- API Integration: Tkana Product APIs for managing services & offers
Additional Features & Enhancements
- Multi-Language Support: The website supports at least English and Malay (as seen on the clinic’s region in Malaysia) to make it accessible to a broader audience and support localisation for Malaysian users. :contentReference[oaicite:1]{index=1}
- Service & Offer Catalogues: Major treatments like dermatology, non-surgical aesthetics, body treatments are presented in a structured catalogue, with detailed descriptions, images and pricing/offer information. :contentReference[oaicite:2]{index=2}
- Doctor Profiles & Appointment Booking: Users can select a doctor based on treatment category, see availability, book slots, and receive confirmation, making the booking flow streamlined.
- Responsive & Mobile-Optimised Design: With many users likely to access via mobile, the UI was built mobile-first, ensuring appointment flows, service browsing & purchasing work smoothly on smaller screens.
- Offers & Service Packages: The site includes special offers and bundled service packages (e.g., skincare plus laser sessions), enabling cross-selling and a better user experience for pricing and selection.
- Content Management & Updates: Using Strapi allows the clinic team to update treatments, offers, doctor availability, images and content dynamically without needing to modify frontend code.
- Performance & Visual Integrity: Given the rich visuals (treatment photos, doctor images, service details), optimisations like image lazy-loading, responsive images, and Tailwind’s utility-driven layout allowed the UI to remain smooth and polished.
Challenges & Learnings
- Localisation & Multi-Language UX: Implementing bilingual support meant handling text direction, language toggle, and ensuring the layout works for different language lengths.
- Appointment Flow Complexity: Matching services → doctor → availability → booking confirmation required clear data modelling, dynamic UI updates and error handling for cases (slot unavailable, doctor changed, etc.).
- Offer & Package Management: Many bundled services require dynamic pricing, visual representation of what is included, and updating the UI when offers change or expire — this required integration with the product/offers API.
- Ensuring Visual Consistency Across Devices: With the clinic’s premium positioning, maintaining high-quality images, consistent spacing and an appealing UI on mobile was important. Tailwind CSS aided in rapid styling but needed careful architecture for maintainability.
Outcome & Future Plans
The platform now gives Bright Clinic a polished and functional web presence: users can browse services, view doctors, buy packaged offers, and book appointments with ease.
Future enhancements include:
- Expanding language support further (for example Chinese/Mandarin)
- Adding a client portal for users to view past treatments, manage bookings & payments
- Introducing loyalty & referral features for repeat customers
- Integrating consultation booking for pre-treatment questions
