BlogCraft

The Challenge

Content creators and developers often struggle with fragmented writing workflows. They bounce between plain-text editors that lack formatting, bloated CMS platforms with steep learning curves, and separate AI tools for content generation. None of these tools integrate smoothly, and exporting content to Markdown for static-site blogs (Hugo, Astro, Jekyll) requires manual conversion that breaks formatting and metadata.\n\nBeyond the editing experience, self-hosted blogging tools rarely offer AI assistance out of the box. Writers who want AI help must copy-paste between ChatGPT and their editor, losing context and formatting each time. There was a need for a single, focused platform that combines rich-text editing, AI writing, and developer-friendly Markdown export in one streamlined interface.\n\nAdditionally, the project needed to support a clean separation of concerns between frontend and backend, be deployable as independent Docker containers, and remain lightweight enough to run on free-tier cloud infrastructure without sacrificing the user experience.

The Solution

BlogCraft was architected as a npm workspace monorepo with two independent packages: a Next.js 15 frontend using React Server Actions for secure server-side API calls, and an Express.js REST API with Prisma ORM for data persistence. This separation allows each service to scale and deploy independently via Docker containers on Render, while sharing a consistent authentication layer through HMAC-SHA256 signed tokens and httpOnly cookies.\n\nThe editor is built on TipTap with a comprehensive toolbar supporting headings, lists, code blocks, text alignment, links, and a custom resizable image extension that supports both URL-based and base64 file uploads with width presets and alignment controls. AI writing is powered by Google Gemini 2.5-Flash with three distinct modes\u2014Generate, Improve, and Continue\u2014that stream HTML responses directly into the editor in real-time, preserving formatting and context.\n\nMarkdown export uses the Turndown library with custom rules for images, automatically generating YAML frontmatter with title, description, tags, and date metadata. Pre-built templates (How-to Guide, Listicle, Case Study) give writers a starting structure, and the personal dashboard provides full CRUD management of saved posts with edit, delete, and quick-create actions.