Workshop with Claude AI - up1/workshop-ai-with-technical-team GitHub Wiki

Workshop with Claude AI

Claude Code

Install

$npm install -g @anthropic-ai/claude-code
$claude

Simple workflow

Implement [google.png] then screenshot it with Puppeteer and iterate until it look like the google

Plan mode

  • Create PRD (Product Requirement Documentation)
I want to build a personal finance tracker web app. Follow from below:

- Clean, modern interface (think Notion meets Mint)
- Track income, expenses, and savings goals
- Beautiful charts and insights
- Built with React and a simple backend
- Should feel fast and delightful to use

Project Memory and Documentation with CLAUDE.md

  • Conventions
  • Decisions
  • Context

Start with /init and manage context with /compact

# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Architecture

This is a full-stack personal finance tracker with a React frontend and Node.js/Express backend:

- **Frontend**: React 18 with Vite, single-page application with tab-based navigation
- **Backend**: Express.js REST API with SQLite database
- **Database**: SQLite3 with three main tables: transactions, categories, savings_goals
- **Communication**: Frontend calls backend API at `http://localhost:3001/api/`

The frontend uses a simple tab-based architecture managed by `App.jsx` with three main components:
- Dashboard (overview/stats)
- Transactions (CRUD operations)
- Goals (savings goals management)

Backend follows MVC pattern with routes handling API endpoints and database model managing SQLite operations.

## Database Schema

SQLite database auto-initializes with three tables:
- `categories`: id, name, color, icon (pre-populated with 9 default categories)
- `transactions`: id, type (income/expense), amount, description, category_id, date
- `savings_goals`: id, title, target_amount, current_amount, target_date

Testing

I want bulletproof testing for our finance tracker. Here's what I'm thinking:

- Unit tests for all utility functions (currency formatting, date calculations, validation)
- Component tests using React Testing Library for every UI component
- Integration tests for our API endpoints with proper database setup/teardown
- End-to-end tests for critical user flows like adding transactions and viewing reports
- Performance tests to ensure the app stays fast as data grows

Set up the testing infrastructure with proper configuration, then write comprehensive tests for our existing features. I want to be confident that changes won't break anything.

Performance optimization

Our finance tracker is getting slower as users add more transactions. I'm seeing these specific issues:

- Dashboard takes 3+ seconds to load when users have 1000+ transactions
- The transaction list scrolling feels janky
- Our bundle size has grown to over 1MB
- API responses for transaction queries are taking 400ms+

I want to optimize this systematically. Start with a performance audit - analyze our bundle, identify database query bottlenecks, and find frontend performance issues. Then implement the highest-impact optimizations first.

I want to see before/after metrics for everything we change.

CI/CD

I need a rock-solid CI/CD pipeline for our finance tracker. Here's what I want to happen:

For every pull request:
- Run the full test suite (unit, integration, E2E)
- Check TypeScript compilation 
- Verify code formatting with Prettier
- Run ESLint for code quality issues
- Build the production bundle successfully
- Run security audits on dependencies
- Check for any breaking changes

For main branch merges:
- Everything from PR checks
- Deploy to a staging environment automatically
- Run smoke tests against staging
- Send a Slack notification about deployment status

For tagged releases:
- Deploy to production with zero downtime
- Run post-deployment health checks
- Update monitoring dashboards

Make this bulletproof - I never want broken code to reach production.

Add MCP

$claude mcp add brave-search -s project -- npx @modelcontextprotocol/server-brave-search

Check MCP status

/mcp

Using

Search for best practices for financial data security and implement appropriate measures in our API

Reference websites