I Built an AI SaaS With Claude Code — Full Architecture

Summary

Eric, a software engineer, walks through the architecture and development process behind BookZero.ai, an AI bookkeeping product. He says it reached more than 1,150 monthly active users in 28 days. The product helps businesses organize receipts and bank statements.

Product features

• A dashboard for viewing spending and tax recovery.
• Receipt uploads through the app or Google Drive, including batch uploads.
• OCR processing that extracts details such as vendor, date, and total.
• Bank statement uploads from CSV files or Google Drive.
• Receipt-to-transaction matching based on details such as date, amount, and vendor.
• An AI assistant that answers questions about expenses and can present results as charts.
• A Telegram bot for chatting with the same AI agent, uploading documents, and using slash commands.

Four-part architecture

1. Client: The web app, Telegram bot, and email notifications. The web stack includes Next.js and React 19, along with Tailwind CSS, Chakra UI, TanStack Query, and Zustand.
2. Controller: Handles client requests through app routes, API route handlers, server actions, and shared libraries. Eric describes route handlers as handling calls to external services, while server actions handle internal operations.
3. External services: Supabase for the database and authentication; OpenAI for chat agents; Gemini for OCR; QStash for queued and scheduled background jobs; Upstash Redis for caching; and Stripe, Resend, Google Drive, and Telegram for payments, email, file imports, and messaging.
4. Observability: Sentry tracks errors, logs, and performance. PostHog tracks product analytics, including user activity, funnels, retention, and drop-offs. Eric emphasizes using these tools together to identify product usage patterns and technical failures.

AI-agent integration

Eric’s web chat and Telegram bot use the same AI-agent logic, including shared tool-calling and chat orchestration. He chose to implement the agent in code so the channels could reuse that logic and he could track conversation quality, common intents, and negative responses.

For a simpler, less technical setup, he outlines an alternative using n8n: connect a chat channel to an AI model, then use an MCP server to expose the product’s API to the agent.

Development workflow

Eric says he builds with Claude Code. His process starts with writing a specification and plan, followed by UI design with Claude Design, structured planning, and implementation. He also mentions G-Stack, Superpower brainstorming, and GSD as tools or frameworks in his workflow.

Guides and resources mentioned

• A video on server-side versus client-side rendering strategies.
• A tutorial on building MCP servers from an API.
• A video covering Eric’s full Claude Code workflow.
• A Claude Design tutorial.
• PostHog documentation and a community for further discussion.

No product reviews are presented.

Main speaker and source

Eric is the video’s presenter and the builder of BookZero.ai.