Building First Commit: A Platform Where Vibe Coders Share What They Build
First Commit started as a wild idea: what if developers could share their AI-built apps directly from the terminal, complete with the full conversation that built them? What followed was 5,000+ messages with Claude Code, multiple pivots, and the creation of a platform that turns Claude Code sessions into shareable build stories — published via MCP without ever leaving the terminal.
firstcommit.ioNext.js 16React 19TypeScriptSupabaseTailwind CSS v4Framer MotionModel Context Protocol (MCP)OpenAI APIOAuth 2.0 / PKCELucide Reactnext-themespdf-parseESLintPostgreSQL4w ago
Builder of firstcommit.io. I ship with AI and share the journey.
0 followers5 karmaJoined Feb 2026
Build This
8 stages to follow
Paste this in your AI coding tool to build your own version, guided by the approach in this guide.
Build the project from this First Commit guide: 05703f36-2bad-4703-8990-b6a0ced7fa32No source repo linked — follow the guide stages to build from scratch.
Requires First Commit MCP connected
How it was built
8 stages1
Architecture & Initial MVP
Started from scratch defining the vision: a vibecoding social platform where developers share AI-built apps with the full conversation attached. Chose Next.js 16 with App Router, Supabase for auth and database, and Tailwind CSS v4. Built the JSONL parser for Claude Code conversations, the gallery feed with Reddit-like cards, user authentication, profiles with karma and join dates, categories, and the initial post creation flow with file upload and chat import.
~700 messages2
Social Features & Profiles
Built the full social layer: profile pages with tabs (posted, comments, liked, saved), follow system with auto-counting triggers, inline profile editing, GitHub and LinkedIn links, comment threading with nested replies, post likes and saves with optimistic updates, and edit/delete functionality for both posts and comments with soft-delete pattern.
~500 messages3
Chat Timeline & Guide Builder
Built the interactive chat timeline — the centerpiece of each post showing the full Claude Code conversation with role badges, collapsible long messages, tool action grouping, and progressive loading for large conversations. Then over-engineered a full guide builder with drag-and-drop steps, block categorization, markdown editors, and a two-column layout with Framer Motion reordering.
~800 messages4
The Great Pivot
Realized the guide builder was overengineered for the target audience. Deleted 14 files and 1,700 lines of code. Replaced with an auto-generation flow: upload a conversation, Claude API analyzes it and generates title, description, tech tags, and key moment highlights. Publishing went from a 30-minute curation process to a one-click action.
~600 messages5
MCP Server & OAuth
Built the Model Context Protocol server at /api/mcp with full OAuth 2.0 + PKCE authentication. Users connect with a single terminal command. The MCP exposes tools for publishing, editing, deleting, reading, and searching posts — all from within Claude Code. Added a beautiful /connect page with copy-to-clipboard command and step-by-step instructions.
~700 messages6
Performance Optimization
Converted key pages from client-side useEffect fetching to Server Components with server-side data fetching. Added unstable_cache for database queries, next/image for feed card optimization, and eliminated render-blocking animations. Fixed a subtle caching bug where request-scoped Supabase clients prevented cache hits.
~600 messages7
i18n & Search
Added full Spanish language support with a React Context-based i18n system using TypeScript dictionaries — no external dependencies. Built live search with a dropdown, server-side caching, and automatic query translation from Spanish to English using the OpenAI API so Spanish-speaking users can find English-tagged content.
~500 messages8
Multi-Tool & Living Resume
Expanded beyond Claude Code to support multiple AI tools with a cycling hero section and tool selector. Added the living resume feature — a Harvard-format resume page that users can update via MCP, with published guides linkable as portfolio projects. Added profile avatars, CV upload, sidebar with platform stats, and the connect page redesign.
~578 messagesComments
No comments yet
Builder of firstcommit.io. I ship with AI and share the journey.
0 followers5 karmaJoined Feb 2026
Build This
8 stages to follow
Paste this in your AI coding tool to build your own version, guided by the approach in this guide.
Build the project from this First Commit guide: 05703f36-2bad-4703-8990-b6a0ced7fa32No source repo linked — follow the guide stages to build from scratch.
Requires First Commit MCP connected
More like this
Building a Full-Stack ERP Intelligence Platform: From Legacy Database to CRM, Treasury & Cable Price Analytics
01mo ago
From Battle Royale Ball Pit to Marble Race: Building a 24/7 YouTube Shorts Game in Pure Pygame
01mo ago
Building a Real-Time Queue System for a Shop on a Raspberry Pi with a Touchscreen
01mo ago
Redesigning a Guitar Teacher's Website: From Generic Landing to Online Class Machine
01mo ago
Rebuilding a Dog Rescue Website from Scratch: Scraping, Crawling, and Modernizing Yankee Chihuahua Rescue
01mo ago
More like this
Building a Full-Stack ERP Intelligence Platform: From Legacy Database to CRM, Treasury & Cable Price Analytics
01mo ago
From Battle Royale Ball Pit to Marble Race: Building a 24/7 YouTube Shorts Game in Pure Pygame
01mo ago
Building a Real-Time Queue System for a Shop on a Raspberry Pi with a Touchscreen
01mo ago
Redesigning a Guitar Teacher's Website: From Generic Landing to Online Class Machine
01mo ago
Rebuilding a Dog Rescue Website from Scratch: Scraping, Crawling, and Modernizing Yankee Chihuahua Rescue
01mo ago