What I did before vide code agent-engineering.dev, a medium-like, content sharing platform.

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.