BlogCraft

The Challenge

Les créateurs de contenu et les développeurs se heurtent souvent à des workflows de rédaction fragmentés. Ils jonglent entre des éditeurs en texte brut sans mise en forme, des CMS surchargés à la courbe d'apprentissage abrupte, et des outils d'IA distincts pour générer du contenu. Aucun de ces outils ne s'intègre correctement, et l'export du contenu en Markdown pour les blogs statiques (Hugo, Astro, Jekyll) exige une conversion manuelle qui casse la mise en forme et les métadonnées. Au-delà de l'expérience d'édition, les outils de blog auto-hébergés offrent rarement une assistance IA intégrée. Les rédacteurs qui veulent de l'aide de l'IA doivent copier-coller entre ChatGPT et leur éditeur, perdant le contexte et la mise en forme à chaque fois. Il fallait une plateforme unique et ciblée combinant édition de texte enrichi, rédaction assistée par IA et export Markdown adapté aux développeurs, le tout dans une interface fluide. De plus, le projet devait permettre une séparation nette des responsabilités entre frontend et backend, être déployable sous forme de conteneurs Docker indépendants, et rester suffisamment léger pour tourner sur une infrastructure cloud gratuite sans sacrifier l'expérience utilisateur.

The Solution

BlogCraft a été architecturé comme un monorepo npm workspace avec deux packages indépendants : un frontend Next.js 15 utilisant les React Server Actions pour des appels API sécurisés côté serveur, et une API REST Express.js avec l'ORM Prisma pour la persistance des données. Cette séparation permet à chaque service de scaler et de se déployer indépendamment via des conteneurs Docker sur Render, tout en partageant une couche d'authentification cohérente grâce à des jetons signés HMAC-SHA256 et des cookies httpOnly. L'éditeur repose sur TipTap avec une barre d'outils complète prenant en charge les titres, listes, blocs de code, alignement du texte, liens, et une extension d'image redimensionnable personnalisée qui gère à la fois les images par URL et les téléversements de fichiers en base64, avec préréglages de largeur et contrôles d'alignement. La rédaction par IA est propulsée par Google Gemini 2.5-Flash avec trois modes distincts — Générer, Améliorer et Continuer — qui diffusent les réponses HTML directement dans l'éditeur en temps réel, en préservant la mise en forme et le contexte. L'export Markdown utilise la bibliothèque Turndown avec des règles personnalisées pour les images, générant automatiquement un frontmatter YAML avec le titre, la description, les tags et la date. Des modèles préconçus (Guide pratique, Listicle, Étude de cas) offrent aux rédacteurs une structure de départ, et le tableau de bord personnel fournit une gestion CRUD complète des articles enregistrés avec des actions d'édition, de suppression et de création rapide.