IK
Inefable KoumbaSoftware Engineer · Data & Networks
arrow_backBack to projects
PAYLOAD CMS 3NEXT.JS 16TURSO SQLITECLOUDFLARE R2

Belle Vue RHOP

Full-stack web platform & headless CMS for optical clinic management, vision consultations, and eyewear e-commerce.

Belle Vue RHOP
OVERVIEW

Belle Vue RHOP is a modern digital platform designed for an optical clinic in Brazzaville. It unifies online vision consultation booking, eye screening campaign management, interactive optical catalog, and a high-performance headless CMS.

THE CHALLENGE

Optical clinics in Central Africa often lack digital tools for online consultation scheduling, digital eyewear/lens showcase, and public vision screening campaign management.

THE TECHNICAL SOLUTION

Deployment of a Next.js 16 application coupled with Payload CMS 3.84 on SQLite/Turso edge DB and Cloudflare R2 storage, delivering ultra-fast loading, smooth content management, and consultation bookings integrated with WhatsApp.

Impact & Key Metrics

<300ms

Server-side page load time (SSR)

100%

TypeScript end-to-end type coverage

0$

Image egress bandwidth costs (Cloudflare R2 Zero-Egress)

Full Stack Specifications

Frontend & UI

  • Next.js 16
  • React 19
  • TailwindCSS v4
  • Headless UI
  • Radix UI
  • Shadcn UI
  • Lucide Icons
  • Date-fns

Backend & Microservices

  • Payload CMS 3.84
  • Node.js
  • Next.js Route Handlers
  • GraphQL API
  • REST API

Database & Caching

  • SQLite
  • Turso (libSQL)
  • Sharp

DevOps & Tooling

  • Cloudflare R2
  • Docker
  • Docker Compose
  • Vitest
  • Playwright

Third-Party APIs

  • Cloudflare R2 S3 API
  • WhatsApp Business API
  • Google Maps API

Key Architecture Decisions

01. HIGHLIGHT

Co-located Headless CMS via Payload 3 & Turso

Payload CMS 3.84 integrated directly within the Next.js 16 App Router runtime using Turso edge SQLite, eliminating external API roundtrip latency.

02. HIGHLIGHT

Cloudflare R2 Storage & Sharp Image Processing

High-resolution optical frame catalog media stored on zero-egress Cloudflare R2 S3 storage paired with Sharp native WebP optimization.

03. HIGHLIGHT

End-to-End Type-Safe Data Contracts

Automated TypeScript interface generation syncing Payload CMS collections with frontend Next.js presentation components.

Core Features Breakdown

Eyewear & Optical Catalog

Interactive browsing of frames, prescription lenses, contact lenses, and accessories with category filtering.

Next.js 16Payload CMSTailwindCSS v4Cloudflare R2

Eye Examination & Consultation Booking

Online appointment scheduling for eye exams, vision assessments (OD/OG testing), and follow-ups via WhatsApp routing.

React 19Date-fnsWhatsApp API

Screening Campaign Portal

Dedicated landing pages for public eye screening drives and seasonal promotional optical bundles.

Payload CMSLexical RichTextNext.js Server Components

Clinic Admin Studio & Content Management

Comprehensive CMS admin portal for clinic operators to manage services, catalog items, promotions, and opening hours.

Payload CMS 3.84Turso libSQLFrench Localization