About coding-with-claude

coding-with-claude is a multi-tenant developer publishing platform for AI-assisted coding sessions. Professional developers work alongside Claude to build production-quality applications, and every coding session is captured and published as a technical blog post organized by project.

Our flagship project is the platform itself — we are building coding-with-claude with Claude. Nearly every feature, bug fix, and architectural decision is made in collaboration with AI and documented for the community to learn from.

We use Claude Code, Anthropic's official CLI tool, as a senior engineering partner. Claude Code brings deep understanding of software architecture, best practices, and the ability to work across the entire codebase.

Working with an AI coding assistant changes the nature of a developer's role. Rather than focusing on each line of code, the developer makes strategic decisions, provides context, and guides the development process. Claude handles implementation details, helps analyze architectural patterns and accelerate delivery. Human guidance and oversight ensures consistency, coding standards, and quality.

Every coding session demonstrates this collaborative workflow in action, showing both the successes and the learning moments that come from human-AI pairing.

Every coding session on this platform originates from a real Claude Code transcript. Our custom transcript parser processes raw JSONL files exported from Claude Code, extracting the conversation, tool calls, code changes, and file operations into structured data.

The parser handles the complexity of AI coding sessions: nested tool calls, multi-file edits, and conversation threading. The result is a readable, navigable coding session that preserves the full context of the development process — what was asked, what Claude suggested, and what actually changed in the codebase.

The website uses an islands architecture to balance performance with interactivity. Pages are pre-rendered as static HTML during the build process, ensuring fast initial loads and strong SEO. Interactive components — theme toggles, navigation menus, conversation filters — are activated on the client side only where needed.

For SEO purposes, all content states are rendered to HTML at build time rather than conditionally rendered on the client. When a page offers multiple views (such as table and card layouts), both are present in the static HTML with CSS controlling visibility. This ensures search engines index all content regardless of which view a user has selected.

coding-with-claude is built as a collection of microservices, each running in Docker containers. This architecture provides several benefits:

• Vendor independence: No lock-in to any cloud provider. The entire platform can be deployed to any infrastructure that runs Docker.
• Scalability: Individual services can be scaled independently based on actual load patterns.
• Maintainability: Clear boundaries between services make the codebase easier to understand and modify.
• Reliability: Service isolation means issues in one component don't bring down the entire platform.

The codebase is organized as a monorepo with over 17 packages, managed by pnpm workspaces and orchestrated by Turborepo. This structure enables:

• Shared types and utilities: Common code lives in dedicated packages, ensuring consistency across frontend and backend.
• Parallel builds: Turborepo caches build outputs and runs tasks in parallel, keeping development fast as the codebase grows.
• Clear boundaries: Each package has a defined responsibility — authentication, content delivery, database access, static site generation — making the system easier to understand and modify.

The platform is built with a modern, production-proven technology stack:

• Cloudflare Pages: Streamlined, developer-focused platform for building, deploying, and scaling modern web applications.
• TypeScript: Full-stack type safety from database to frontend, catching errors at compile time rather than runtime.
• React 19: The latest React with server components and improved performance for the web frontend.
• Custom SSG: A purpose-built static site generator that discovers routes dynamically from backend APIs, pre-renders React components to HTML, and generates sitemaps.
• Node.js: JavaScript runtime powering all backend microservices.
• MariaDB: Reliable relational database with strong schema enforcement and transaction support.
• Docker: Containerization for consistent development and deployment environments.