For official documentation, see the Anthropic Claude Code docs. MCP specifications are available at modelcontextprotocol.io.
Claude Code is not just for automation — it excels at full application development. I built a complete finance dashboard called “THE STASH” through pair programming with Claude Code, integrating the freee accounting API with real-time data visualization and AI-powered spending analysis.
This article presents a Claude Code app development case study, covering the entire journey from design to deployment.
What Is THE STASH?
THE STASH is a Streamlit-based finance dashboard designed to track monthly savings toward an annual target. Here are its core features:
- freee API integration — Automatically fetches bank and credit card transaction data
- Income/expense dashboard — Visualizes monthly income, expenses, and savings with charts
- Category analysis — Breaks down spending by food, transport, subscriptions, and more
- AI analysis — Uses the Claude API to analyze spending patterns and suggest savings
- Monthly summary — Auto-generates review reports at month-end
📊 THE STASH System Architecture
Technical Stack
the-stash/
├── app.py # Streamlit main app
├── src/
│ ├── analyzer.py # Analysis engine
│ ├── narrator.py # AI text generation
│ ├── database.py # SQLite management
│ └── freee_client.py # freee API integration
├── scripts/
│ └── daily_sync.py # Daily data sync
└── docs/
├── design-guidelines.md
└── detailed-design.md- Frontend: Streamlit — Build web apps with Python only, no design skills needed
- Database: SQLite — Lightweight, zero-config, sufficient for personal use
- Accounting API: freee API — Automatic bank and card transaction retrieval
- AI analysis: Claude API (Anthropic SDK) — Spending pattern analysis and savings advice
- Deployment: ngrok fixed URL — Access the dashboard from anywhere via smartphone
The Claude Code App Development Process
Step 1: Design Phase
I started by describing the goal: “Build a finance app using freee data to manage monthly savings targets.” Claude Code generated a design document, which I reviewed and refined through several rounds of feedback. The final design document was saved in docs/ and served as the reference throughout development.
Step 2: Implementation Phase
With the design locked in, I simply said “build it.” Claude Code created files, wrote code, and ran tests. Meanwhile, my contributions were limited to:
- freee API OAuth setup — Credentials were configured manually for security
- UI design feedback — “Make it simpler,” “Change the chart colors,” etc.
- Business logic decisions — “Classify this as fixed expense,” “Exclude this account”
In essence, Claude Code app development lets you focus on what to build and how it should look, while the AI handles the actual coding. This dramatically accelerates the development cycle.
Step 3: Operations Phase
Daily data synchronization was automated as a scheduled task. Every day, the job fetches the latest transactions from freee and updates the SQLite database. Additionally, I configured a ngrok fixed URL so the dashboard is accessible from my phone when away from home.
Five Tips for Claude Code App Development
- Create a design document first — Jumping straight to code leads to direction drift. Align on the design before implementation
- Build small, iterate often — Building everything at once makes corrections extremely costly
- Manage security yourself — API keys and OAuth credentials must be set up manually. Never let AI handle secrets
- Automate through deployment — Do not stop at code. Include hosting, operations, and data sync in your plan
- Ship an MVP first — Start with minimum viable features, then add capabilities based on real usage
The greatest advantage of Claude Code app development is that you can turn ideas into working applications quickly, regardless of your programming background. With good design sense and clear requirements, the AI handles the implementation.
Next Up
The final article covers Desktop Automation. You will learn how to control browsers and desktop applications with Windows MCP and k-chrome MCP.
