← All projects// 02 — O'Crystal

O'Crystal — brand website and pro area

Live

O'CrystalSénégal2026

Bilingual website for a Senegalese natural mineral water brand: range, the Niague spring, a map of points of sale, news and a professional area for distributors.

Visit the live site ↗Source code ↗
Screenshot of the O'Crystal — brand website and pro area website
Context

O'Crystal is a natural mineral water drawn at Niague. The brand wants a premium bilingual showcase and a dedicated channel for professionals and prospective distributors.

Mission

Deliver a fast, polished brand site that can be managed without a developer, with a professional area, forms and transactional e-mails.

Role

Full-stack design and development

Technologies
  • Next.js
  • React
  • TypeScript
  • Payload CMS
  • PostgreSQL
  • Tailwind CSS
  • Three.js
  • MapLibre
  • next-intl
  • Docker

Technical implementation

  • Framework

    Next.js (server rendering) with an embedded Payload CMS: manageable pages, products and news, versioning and scheduled publishing.

  • Data and media

    PostgreSQL through the Payload adapter; files on S3-compatible storage (Cloudflare R2).

  • Internationalisation and SEO

    French and English with next-intl, sitemap, robots and per-page metadata, PWA (manifest and service worker).

  • Experience

    Animations (Motion), 3D scenes (react-three-fiber), MapLibre interactive map, search.

  • Pro area and security

    Professional accounts, TOTP 2FA for administration, rate limiting and captcha on forms, e-mails via Resend and React Email.

  • Quality and deployment

    Vitest and Playwright tests (including accessibility with axe-core), Sentry; Docker Compose + Caddy on a VPS, or a Node service on Render behind Cloudflare.

Actions
  • I designed the architecture: Next.js with an embedded Payload CMS and PostgreSQL.
  • I built the site, the pro area and the transactional e-mails.
  • I set up the tests (unit, E2E, accessibility) and error monitoring.
  • I prepared and documented deployment (VPS with Docker Compose, or Render).
Features
  • Product range with interactive visuals
  • Map of points of sale
  • News and search
  • Pro area: accounts and orders
  • Contact and distributor-application forms
  • Bilingual FR / EN site
Results
  • FR / ENbilingual site
  • administration protected (TOTP)
  • automated accessibility tests (axe-core)
ArchitectureNavigateur · PWANext.js · Payload CMSPostgreSQLCloudflare R2Resend (e-mails)Docker · Linux
  • Navigateur · PWA → Next.js · Payload CMS
  • Next.js · Payload CMS → PostgreSQL
  • Next.js · Payload CMS → Cloudflare R2
  • Next.js · Payload CMS → Resend (e-mails)
  • Docker · Linux → Next.js · Payload CMS
Visit the live site ↗Source code ↗All my GitHub repositories ↗