What is Medium ?
Medium.com is an open, subscription-based publishing platform founded in 2012 by Evan Williams, functioning as a hybrid of social journalism, blogs, and professional publications.
As of 2024–2025, it reported around $61M in annual revenue, aiming for profitability with over 850k subscribers. A 2016 valuation placed it around $600M, though recent figures are not publicly disclosed.
This post shares my first-hand experience "vibe coding" a specialized clone of Medium but specifically for software agents, AI engineers, and agentic framework developers. The goal? Build a community-driven platform where contributors share tutorials, implementation notes, and technical discoveries.
Which Core Medium Features Did We Clone ?
Answer: We focused on cloning the core engagement and publishing functions that
define Medium’s UX and SEO footprint while tailoring them to agent
engineering content.
Here are the key features we replicated:
User Authentication: Secure sign-up/login without vendor lock-in
Rich Text Editor: Supports SEO-optimized, server-rendered rich text
Content Management System (CMS) for content storage and metadata tagging
Search Functionality: Full-text = via Atlas Search
Publishing Notifications: Email updates when new content goes live
Each feature was designed to be modular, AI-editing-friendly, and SSR-ready for Next.js.
How We Designed the Solution Architecture ?
How Did We Handle User Authentication?
I selected Clerk.dev for authentication. It offers secure, privacy-first authentication that integrates seamlessly with any React or Next.js app.
Why Clerk?
No vendor lock-in
Simple integration—reducing dev effort
Excellent support for OAuth and passwordless login
Once implemented, we no longer needed to manage session or token logic manually.
How Did We Implement the Rich Text Editor?
Rich text editing is the heart of platforms like Medium. It's critical for both user experience and SEO rendering. After testing multiple open-source editors, including Tiptap and Lexical, Google’s AI recommendations consistently surfaced BlockNote as the most adaptable solution in 2026.
BlockNote was chosen because it offers:
Notion-like block editing
Server-Side Rendering (SSR) compatibility with Next.js
Image uploading and in-line embeds
Code block formatting (vital for technical blogs)
Before finalizing BlockNote, I deep-dived into its documentation, an essential step since most LLMs had limited training data
on this newer open-source project. Through manual MVP testing, I
validated SSR performance, upload handling, and theme extension.
That hands-on verification avoided potential technical debt, ensuring our editor could scale to thousands of concurrent users.
What Powers Our Content Management and Search?
Database & CMS: We chose MongoDB Atlas for flexible schema design and document storage efficiency—perfect for content-heavy applications.
Search Functionality: Instead of deploying Elasticsearch clusters, we leveraged Atlas Search, which provides indexing and ranking similar to Elastic but with zero maintenance overhead and native MongoDB integration. This sharply reduced infrastructure complexity.
How Do We Handle Content Publishing Notifications?
For notifications, AWS Simple Email Service (SES) was selected.
Cost: Only $0.10 per 1,000 emails, significantly undercutting Resend or Mailgun.
Scalability: Pay-as-you-go pricing fits startup budgets.
Challenge: Requires justification and sandbox promotion from AWS, but worth the setup time given reliability and lower cost.
How We Prepared the AI Coding Environment
Before starting “video-assisted coding” (AI-co-development via tools like Cursor or Claude), I created a structured project environment. This step improves AI comprehension and token efficiency.
Infra Provisioning Checklist
Database: MongoDB Atlas (with Atlas Search)
Email: AWS SES
Repository: GitHub project repo
Auth: Clerk setup
Project Environment Files
AGENTS.md : Defines project scope, architecture, and intended features (serves as a PRD for AI agents).
rules.md: Contains personal coding preferences (e.g., SSR over CSR, server actions over REST API).
skills.md: Documents missing AI knowledge (e.g., how to use Vercel AI SDK or BlockNote features).
Tech Stack Notes: Includes framework versions, libraries, and configuration patterns.
Tech Stack Setup
Framework: Next.js 16
ORM: Prisma or Drizzle (depending on DB complexity)
UI Libraries: TailwindCSS + Shadcn UI
Env Management: .env.local configuration
Once all this was configured, we began AI-guided pair programming (“vide coding”), iteratively prompting the AI to generate, review, and refactor code blocks.