Cod'Blog
Visiter le ProjetAnnées
2024-2025
Focus
Développement CMS Headless
Tags
Une plateforme CMS headless moderne pour la gestion de contenu de blog avec API REST et analytics avancées. Conçue pour les équipes qui veulent un contrôle total sur la présentation de leur contenu.
Challenge
Les équipes de contenu peinent avec les CMS traditionnels qui les enferment dans des couches de présentation spécifiques. Les développeurs ont besoin d'APIs flexibles pour intégrer du contenu de blog dans n'importe quel framework frontend, tandis que les créateurs de contenu veulent des outils d'édition puissants sans complexité technique. La plupart des solutions existantes forcent un choix : soit un bel éditeur sans flexibilité API, soit une plateforme développeur-first qui frustre les équipes de contenu.
Notre Approche
Nous avons construit un CMS headless qui sépare la gestion de contenu de la présentation. Les organisations obtiennent une interface web pour gérer articles, médias et membres d'équipe, tandis que les développeurs consomment le contenu via une API REST. La plateforme gère l'optimisation SEO, les analytics et la collaboration d'équipe – le tout accessible via l'UI et l'API.
Le Défi : s'affranchir des CMS monolithiques
Le paysage de la gestion de contenu est polarisé. Les CMS traditionnels comme WordPress offrent de belles expériences d'édition mais enferment le contenu dans leur écosystème. Les solutions headless orientées développeurs fournissent des APIs mais submergent souvent les créateurs de contenu avec des fichiers markdown, des workflows Git et une complexité technique.
Le défi était de construire une plateforme qui sert à la fois les créateurs de contenu et les développeurs. Un système où écrire et publier des articles est simple, tandis que les développeurs peuvent consommer le contenu via une API REST propre pour leurs applications Next.js, React Native ou Vue.
La gestion de contenu et la présentation de contenu sont des problèmes différents qui bénéficient d'une séparation.
Phase 1 : Fondations de l'architecture
La plateforme est multi-tenant – chaque organisation obtient une isolation complète avec son propre blog, ses membres d'équipe, son contenu et ses clés API. Nous avons utilisé une approche de schéma Prisma modulaire, en divisant les modèles entre fichiers dédiés (blog.prisma, api-keys.prisma, comments.prisma) pour la maintenabilité.
- Next.js 15 avec App Router : Server components, streaming et performance optimale
- Prisma ORM : Requêtes base de données type-safe avec organisation de schéma modulaire
- PostgreSQL : Base de données relationnelle robuste pour les relations de contenu complexes
- Better-auth : Authentification moderne avec support d'organisation et liens magiques
- TypeScript : Type safety de bout en bout, de la base de données à l'UI
Gestion des articles - Filtrage puissant, recherche et opérations en masse
Phase 2 : Expérience de création de contenu
L'éditeur est construit avec Tiptap, un framework d'éditeur headless au-dessus de ProseMirror. Au-delà du texte riche basique, il inclut la coloration syntaxique de code avec Shiki, le téléchargement d'images avec UploadThing et des aperçus de liens.
L'éditeur équilibre fonctionnalités et simplicité. Les créateurs de contenu obtiennent une interface d'écriture propre, tandis que le contenu stocké reste structuré et facile à parser pour les développeurs dans n'importe quel framework frontend.
Éditeur d'articles - Édition de texte riche avec Tiptap, coloration de code et aperçu en direct
Phase 3 : Pensée API-First
L'API REST priorise l'expérience développeur. Les organisations peuvent créer plusieurs clés API avec des permissions granulaires – une pour le site web marketing (lecture seule), une autre pour une application mobile (lecture/écriture), ou des endpoints spécifiques pour les analytics.
Tableau de bord API - Surveiller l'utilisation de l'API et gérer les clés d'accès
La documentation de l'API inclut des exemples de code pour les frameworks majeurs – Next.js, Nuxt, React, Vue et JavaScript vanilla. Chaque endpoint est documenté avec des schémas requête/réponse, des exigences d'authentification et des exemples d'utilisation.
- Design RESTful : Endpoints intuitifs suivant les conventions REST
- Authentification par clé API : Authentification sécurisée, stateless avec hachage SHA-256
- Suivi d'utilisation : Surveiller l'utilisation de l'API par clé pour rate limiting et facturation
- Contrôle de version : Préfixe /api/v1/ permet l'évolution future de l'API sans rupture
- Documentation complète : Exemples interactifs pour chaque endpoint
Documentation API - Guides complets avec exemples de code pour tous les frameworks
Phase 4 : Gestion des médias
Les uploads de médias utilisent UploadThing avec extraction automatique des métadonnées. Chaque fichier obtient largeur, hauteur, taille et type MIME enregistrés automatiquement. Le texte alt est inclus pour l'accessibilité.
La bibliothèque de médias suit l'utilisation – quels articles référencent chaque asset, qui l'a uploadé et quand. Cela permet de supprimer en toute sécurité les médias inutilisés sans casser les articles.
Bibliothèque de médias - Gestion centralisée des assets avec suivi d'utilisation
Phase 5 : Analytics et insights
Les analytics respectueuses de la vie privée suivent les compteurs de vues par article, les sources de référence et la distribution géographique. Le système est léger, respecte la vie privée (pas de cookies, pas de scripts de tracking) et s'intègre directement avec la gestion de contenu.
L'agrégation quotidienne crée des enregistrements OrganizationAnalytics pour le suivi de la performance du contenu. Le tableau de bord affiche les vues totales, les articles tendance et le nouveau contenu publié.
Tableau de bord - Analytics temps réel et vue d'ensemble du contenu
Phase 6 : Collaboration d'équipe
Le contrôle d'accès basé sur les rôles inclut trois rôles : Propriétaire (permissions complètes), Éditeur (gérer tout le contenu) et Rédacteur (créer et éditer ses propres articles). Chaque rôle a des permissions spécifiques pour publier, gérer les catégories et accéder aux analytics.
Les profils d'auteur incluent noms d'affichage, bios, avatars et liens sociaux. Le contenu publié via l'API est attribué au bon auteur, maintenant la responsabilité sur tous les canaux de publication.
Gestion d'équipe - Gérer les membres de l'organisation et leurs rôles
Défis techniques et solutions
Construire des fonctionnalités scalables a nécessité des décisions architecturales réfléchies.
Défis techniques résolus :
- Schéma Prisma modulaire : Schéma divisé entre fichiers pour la maintenabilité, avec script de build pour les fusionner pour Prisma
- Sécurité des Server Actions : Implémentation de vérifications d'authentification appropriées et isolation d'organisation pour toutes les mutations
- Optimisation d'images : Composant Next.js Image avec UploadThing pour performance optimale sur tous les appareils
- Rate Limiting API : Suivi d'utilisation par clé API avec requêtes database efficaces pour prévenir les abus
- Mises à jour temps réel : React Query avec updates optimistes pour feedback UI instantané tout en maintenant la cohérence des données
- Type Safety : TypeScript de bout en bout du schéma database aux réponses API aux composants UI
Le Résultat : une plateforme qui grandit avec vous
Le résultat est un CMS headless qui sert à la fois les créateurs de contenu et les développeurs. Les équipes de contenu obtiennent un éditeur intuitif et un workflow de publication. Les équipes de développement obtiennent une API propre avec documentation complète. Les organisations bénéficient des analytics, de la collaboration d'équipe et de la propriété des données.
La plateforme scale avec vos besoins. Commencez avec un simple blog, puis ajoutez des membres d'équipe, intégrez dans des applications mobiles et suivez la performance sur tous les canaux au fil de votre croissance.
Puissant pour les équipes, simple pour les créateurs solo, flexible selon les besoins.
Stack technique
- Frontend : Next.js 15, React 19, TypeScript, Tailwind CSS, shadcn/ui
- Éditeur : Tiptap avec coloration syntaxique Shiki et intégration UploadThing
- Backend : Routes API Next.js, Server Actions, Prisma ORM
- Base de données : PostgreSQL avec schéma Prisma modulaire
- Authentification : better-auth avec support d'organisation et liens magiques
- Paiements : Intégration Stripe avec gestion d'abonnements
- Email : react-email avec intégration Resend
- Médias : UploadThing pour uploads et stockage de fichiers fiables
- Analytics : Analytics personnalisées axées sur la vie privée avec agrégation quotidienne
- Composants UI : Primitives Radix UI avec styling personnalisé
Cod'Blog combine des APIs développeur-friendly avec des interfaces créateur-friendly dans une plateforme sécurisée et scalable. Que vous construisiez un blog personnel, une base de connaissances d'entreprise ou un hub de contenu, il fournit la base pour créer, gérer et distribuer du contenu.
Projet Précédent
Quack WorldProjet Suivant
Zenvest