CASE

    Case Study / 06

    Afro Caribbean

    Modern, conversion-focused website for a beauty and wellness clinic featuring service discovery, therapist profiles, and seamless booking integration.

    Role

    Software Engineer — developed the full app from scratch

    Stack

    React / TypeScript / Vite / Tailwind CSS / shadcn/ui / Radix UI / React Router v6 / React Hook Form / Zod / i18next / Framer Motion / Embla Carousel / Recharts / TanStack Query / next-themes / Sonner

    Live

    Visit
    00 / Live

    Preview

    Afro Caribbean
    New Tab

    The interactive preview has been closed to save resources.

    Or Open In New Tab
    01

    Context & Challenge

    Beauty and wellness clinics lack a digital presence that effectively communicates service value, builds trust through social proof, and simplifies the appointment booking experience—missing revenue and patient engagement opportunities.

    02

    Approach

    Created a modern, SEO-optimized site that showcases services with rich imagery, displays qualified therapists and their expertise, features real client testimonials, and provides frictionless booking flows—all with multilingual support (i18next) for diverse clientele.

    03

    Key Features

    • 01Hero section with clinic brand story and hero imagery
    • 02Service catalog with detailed descriptions and pricing
    • 03Therapist/specialist profiles with credentials and specializations
    • 04Before/after gallery carousels (Embla) for treatment results
    • 05Client testimonials section with rotating reviews
    • 06Appointment booking interface with availability sync
    • 07FAQ accordion for common patient questions
    • 08Contact form with form validation (React Hook Form + Zod)
    • 09Multi-language support (i18next) for EN/AR or other regional languages
    • 10Light/Dark theme toggle (next-themes)
    • 11Performance metrics dashboard (Recharts) showing patient satisfaction
    • 12Mobile-first responsive design
    • 13SEO-friendly structure with semantic HTML
    • 14Toast notifications (Sonner) for booking confirmations
    04

    Technical Decisions

    Used shadcn/ui + Radix UI for accessible, brand-customizable components suitable for healthcare contexts. React Hook Form + Zod for bulletproof form validation (critical for appointment data). i18next for true multilingual scaling across regional markets. Embla Carousel for smooth, touch-friendly gallery experiences. next-themes for persistent theme preferences, improving user experience across return visits.

    05

    Key Learnings

    Strengthened expertise in healthcare/service industry design patterns—building trust through transparency (profiles, testimonials), optimizing for conversion (clear CTAs, frictionless booking), and creating inclusive digital experiences. Deepened skills in multilingual site architecture and SEO best practices for local service discovery.

    Built with vision & code by Ahmed Walid

    © 2026 — All rights reserved

    Loading portfolio