Lymen — Agence Web Créative
Conception et développement du site vitrine de l'agence Lymen : architecture full-stack moderne, CMS sur-mesure, système de blocs dynamiques et design premium optimisé pour la performance et le SEO.
Design premium, performance maximale, code sur-mesure
Lymen — Agence Web Créative
Présentation du projet
Lymen est une agence web française spécialisée dans la création de sites vitrines, d'applications web sur-mesure et de solutions e-commerce haut de gamme. Ce projet est le site vitrine de l'agence lui-même — une démonstration concrète de notre savoir-faire technique et créatif.
Pourquoi ce projet ?
Nous avions besoin d'un site qui incarne nos valeurs :
Performance — chargement ultra-rapide grâce au SSR et à l'optimisation des assets
Accessibilité — conformité WCAG 2.1 AA, navigation au clavier, contrastes vérifiés
Évolutivité — architecture modulaire permettant d'ajouter des fonctionnalités sans dette technique
SEO — balises structurées, Open Graph, sitemap dynamique, métadonnées par page
Phase de recherche UX et maquettage Figma
Développement du backend API avec NestJS et Prisma
Intégration du frontend Next.js avec Tailwind CSS
Mise en place du CMS admin avec éditeur de blocs drag & drop
Tests, optimisation et déploiement Docker
« Notre site est notre meilleure carte de visite — chaque pixel compte. »
Le code source est entièrement typé en TypeScript, avec un score Lighthouse de 98+ sur les quatre catégories. Nous avons également mis en place un pipeline CI/CD complet pour garantir la qualité à chaque déploiement.
// Exemple : configuration Next.js optimisée
const nextConfig = {
images: { formats: ['image/avif', 'image/webp'] },
experimental: { optimizeCss: true },
compress: true,
};Version actuelle : 2.0 · Dernière mise à jour : 2025
Un bon site web n'est pas celui qui impressionne par sa complexité, mais celui qui rend l'expérience utilisateur si fluide qu'elle devient invisible.
🖥️ Frontend
Le frontend repose sur Next.js 14 avec le App Router, offrant :
- Server-Side Rendering pour un SEO optimal
- Tailwind CSS avec un design system cohérent
- Framer Motion pour des animations fluides
- Composants Radix UI accessibles par défaut
- Mode sombre avec next-themes
Chaque composant est isolé, réutilisable et typé. Le state management est minimal grâce à l'architecture serveur-first de Next.js.
⚙️ Backend
L'API est construite avec NestJS, un framework Node.js enterprise-grade :
- Architecture modulaire — chaque domaine a son module dédié
- Prisma ORM avec migrations versionnées
- Authentification JWT avec refresh tokens sécurisés
- Upload d'images avec traitement et optimisation Sharp
- Rate limiting et validation des entrées avec class-validator
La base de données MariaDB est gérée via Prisma avec des relations optimisées et des index stratégiques.
🎨 Design System
Un système de design complet avec des tokens CSS, une palette de couleurs cohérente, des composants réutilisables et un support natif du mode sombre.
📝 CMS Sur-Mesure
Un panneau d'administration complet avec un éditeur de blocs drag & drop, un éditeur de texte riche Tiptap, la gestion des projets, tarifs et paramètres.
🚀 Performance
Optimisation poussée avec lazy loading, compression AVIF/WebP, code splitting automatique, prefetching intelligent et mise en cache HTTP agressive.
🔒 Sécurité
Protection complète : CORS configuré, rate limiting, sanitisation HTML (DOMPurify), JWT httpOnly, validation stricte de toutes les entrées.
📊 Analytics
Dashboard d'analytics intégré avec suivi des visiteurs quotidiens, pages vues, messages de contact et statistiques de projets — le tout sans dépendance externe.
🐳 DevOps
Infrastructure Docker Compose complète avec Nginx en reverse proxy, MariaDB, hot-reload en développement et déploiement simplifié en un seul docker compose up.
L'éditeur de blocs : le cœur du CMS
Le système de contenu repose sur un éditeur de blocs modulaire développé sur-mesure. Chaque page de projet est composée de blocs indépendants que l'on peut réorganiser par glisser-déposer, imbriquer et configurer individuellement.
Les 11 types de blocs disponibles
Catégorie | Bloc | Description |
|---|---|---|
Mise en page | Flex | Conteneur flexible avec direction, gap, alignement et justification configurables |
Mise en page | Grid | Grille CSS paramétrable avec nombre de colonnes et gap personnalisables |
Contenu | Hero | Grande image avec titre et sous-titre en overlay |
Contenu | Texte | Éditeur riche complet (titres, listes, tableaux, images, liens, couleurs…) |
Contenu | Image | Image avec légende optionnelle |
Contenu | Galerie | Grille d'images responsive avec effet de survol |
Contenu | Vidéo | Embed vidéo YouTube / Vimeo |
Contenu | Citation | Citation mise en valeur avec auteur |
Contenu | Métriques | Statistiques du projet en grille de cartes |
Contenu | Tech Stack | Liste des technologies sous forme de badges |
Contenu | CTA | Appel à l'action avec bouton et lien personnalisables |
Les blocs Flex et Grid peuvent contenir d'autres blocs en tant qu'enfants, permettant des mises en page complexes et imbriquées. Cette page même utilise l'ensemble de ces blocs pour démontrer leurs capacités.
Notre processus de création
De l'idée au déploiement, chaque étape est pensée pour garantir un résultat d'exception.
01
Découverte
Analyse des besoins, étude de la concurrence, définition de la stratégie digitale et du cahier des charges fonctionnel.
02
Design
Wireframes, maquettes haute-fidélité sur Figma, design system, prototypage interactif et tests utilisateurs.
03
Développement
Développement itératif avec sprints courts, revues de code, tests automatisés et intégration continue.
04
Déploiement
Mise en production via Docker, monitoring, optimisation des performances et accompagnement post-lancement.
Stack technique détaillée
Chaque choix technologique a été fait pour maximiser la maintenabilité, la performance et l'expérience développeur.
Frontend
Next.js 14 avec App Router et React Server Components pour un rendu hybride optimal. Tailwind CSS pour un styling utilitaire rapide et cohérent. Radix UI comme base de composants accessibles. Framer Motion pour les animations. Tiptap pour l'éditeur de texte riche. dnd-kit pour le drag & drop.
Backend
NestJS en architecture modulaire avec injection de dépendances. Prisma comme ORM type-safe avec migrations automatiques. JWT pour l'authentification avec système de refresh tokens. Sharp pour le traitement d'images côté serveur. Nodemailer pour l'envoi d'emails transactionnels.
Infrastructure
Docker Compose orchestrant trois services : le frontend Next.js, le backend NestJS et la base de données MariaDB. Nginx en reverse proxy avec compression gzip, headers de sécurité et cache statique. Le tout déployable en une seule commande.
# Déploiement complet en une commande
docker compose -f docker-compose.yml up -d --buildTechnologies utilisées
Envie d'un site à la hauteur de vos ambitions ?
Que ce soit pour un site vitrine, une application web ou une plateforme e-commerce, notre équipe est prête à donner vie à votre projet avec la même exigence de qualité.
Démarrer votre projet