O'Crystal — site de marque et espace pro
Site bilingue d'une marque d'eau minérale naturelle du Sénégal : gamme, source de Niague, carte des points de vente, actualités et espace professionnel pour les distributeurs.
O'Crystal est une eau minérale naturelle puisée à Niague. La marque veut une vitrine premium, bilingue, et un canal dédié aux professionnels et aux futurs distributeurs.
Livrer un site de marque rapide et soigné, administrable sans développeur, avec un espace professionnel, des formulaires et des e-mails transactionnels.
Conception et développement full-stack
Technologies- Next.js
- React
- TypeScript
- Payload CMS
- PostgreSQL
- Tailwind CSS
- Three.js
- MapLibre
- next-intl
- Docker
Réalisation technique
Framework
Next.js (rendu serveur) avec Payload CMS embarqué : pages, produits et actualités administrables, versions et publication programmée.
Données et médias
PostgreSQL via l'adaptateur Payload ; fichiers sur un stockage compatible S3 (Cloudflare R2).
Internationalisation et SEO
Français et anglais avec next-intl, sitemap, robots et métadonnées par page, PWA (manifest et service worker).
Expérience
Animations (Motion), scènes 3D (react-three-fiber), carte interactive MapLibre, recherche.
Espace pro et sécurité
Comptes professionnels, 2FA TOTP pour l'administration, limitation de débit et captcha sur les formulaires, e-mails via Resend et React Email.
Qualité et déploiement
Tests Vitest et Playwright (dont accessibilité avec axe-core), Sentry ; Docker Compose + Caddy sur VPS, ou service Node sur Render derrière Cloudflare.
- J'ai conçu l'architecture : Next.js avec Payload CMS embarqué et PostgreSQL.
- J'ai développé le site, l'espace pro et les e-mails transactionnels.
- J'ai mis en place les tests (unitaires, E2E, accessibilité) et le suivi d'erreurs.
- J'ai préparé et documenté le déploiement (VPS avec Docker Compose, ou Render).
- Gamme de produits avec visuels interactifs
- Carte des points de vente
- Actualités et recherche
- Espace pro : comptes et commandes
- Formulaires de contact et de candidature distributeur
- Site bilingue FR / EN
- FR / ENsite bilingue
- administration protégée (TOTP)
- tests d'accessibilité automatisés (axe-core)
- 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