fullstack-dev

name	fullstack-dev
description	Comprehensive fullstack development skill combining architecture, testing, security, DevOps, and code quality best practices for building modern web applications from frontend to backend.

Fullstack Development Skill

This skill provides expert guidance for building complete, production-ready web applications. It combines best practices from Clean Architecture, Domain-Driven Design, Test-Driven Development, security principles, and DevOps practices.

When to Use This Skill

• Building new web applications (frontend + backend)
• Implementing features with architectural best practices
• Setting up testing strategies (unit, integration, e2e)
• Improving code quality and security
• Deploying applications to cloud infrastructure
• Optimizing application performance
• Creating data visualizations and dashboards
• Writing maintainable, scalable code

Core Principles

1. Architecture & Design (Clean Architecture + DDD)

Project Structure:

src/
├── domain/           # Core business logic (entities, value objects)
├── application/      # Use cases, services, DTOs
├── infrastructure/   # Database, external services, APIs
├── presentation/     # HTTP handlers, controllers, middleware
└── shared/          # Utilities, constants, helpers

Naming Conventions:

• ✅ Use domain-specific names: OrderCalculator, UserAuthenticator, PaymentProcessor
• ❌ Avoid generic names: utils.js, helpers.js, common.js

Key Rules:

• Early return pattern: Always use early returns for better readability
• Single Responsibility: Each class/function has ONE clear purpose
• Dependency Injection: Pass dependencies explicitly, don't create inside functions
• Library-First: Search for existing solutions BEFORE writing custom code
  • Auth → Use Auth0, Supabase, or NextAuth
  • Retry Logic → Use cockatiel or p-retry
  • Form Validation → Use Zod, Yup, or Joi
  • State Management → Use Redux, Zustand, or Jotai
  • ORM → Use Prisma, TypeORM, or Sequelize

Code Size Limits:

• Functions: max 50 lines
• Components: max 80 lines
• Files: max 200 lines
• Nesting: max 3 levels deep

2. Frontend Development (React + Modern Stack)

React Components:

// ✅ GOOD: Functional component with clear purpose
interface UserCardProps {
  userId: string;
  onEdit: (id: string) => void;
}

export function UserCard({ userId, onEdit }: UserCardProps) {
  const user = useQuery(['user', userId], fetchUser);
  
  if (user.isLoading) return <Skeleton />;
  if (user.isError) return <ErrorFallback error={user.error} />;
  
  return (
    <div className="card">
      <h3>{user.data.name}</h3>
      <button onClick={() => onEdit(userId)}>Edit</button>
    </div>
  );
}

// ❌ AVOID: Overly complex, mixed concerns
function UserComponent({ data, onAction, ...props }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  // ... 200 lines of mixed logic
}

Component Structure:

• Keep components focused (max 80 lines)
• Use React hooks properly (useQuery, useState, useEffect)
• Extract complex logic to custom hooks or services
• Use TypeScript for type safety
• Apply styling consistently (Tailwind CSS recommended)

State Management:

• Local state (useState) for simple component state
• React Query (TanStack Query) for server state
• Zustand/Redux for complex global state
• Context API for theme/auth state

3. Backend Development (Node.js/Express or Framework of Choice)

API Design:

// Use RESTful conventions and proper HTTP methods
GET    /api/users           // List all users
POST   /api/users           // Create user
GET    /api/users/:id       // Get single user
PUT    /api/users/:id       // Update user
DELETE /api/users/:id       // Delete user

Error Handling:

// ✅ Structured error handling
try {
  const user = await userService.getUser(id);
  if (!user) {
    throw new NotFoundError(`User ${id} not found`);
  }
  return user;
} catch (error) {
  if (error instanceof NotFoundError) {
    res.status(404).json({ error: error.message });
  } else if (error instanceof ValidationError) {
    res.status(400).json({ error: error.message });
  } else {
    res.status(500).json({ error: 'Internal server error' });
  }
}

Database:

• Use an ORM (Prisma, TypeORM, Sequelize) - never write raw SQL
• Apply migrations for schema changes
• Use proper indexes for performance
• Implement soft deletes where appropriate
• Use transactions for multi-step operations

Authentication & Security:

// Use established libraries
// Auth: NextAuth, Auth0, Supabase, Passport
// Session: express-session + redis or JWT with refresh tokens
// Password hashing: bcrypt
// API keys: stored in secure vault (HashiCorp Vault, AWS Secrets Manager)

// ✅ Always validate and sanitize input
const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

const validated = schema.parse(req.body);

4. Testing Strategy (Test-Driven Development)

Testing Pyramid:

        UI/E2E Tests (10%)
       /              \\
      /                \\
  Integration Tests (30%)
    /                   \\
   /                     \\
Unit Tests (60%)

Unit Tests:

// Test individual functions/methods
describe('OrderCalculator', () => {
  it('should calculate total with tax', () => {
    const order = { items: [{ price: 100 }] };
    const total = calculateTotal(order);
    expect(total).toBe(115); // 100 + 15% tax
  });

  it('should apply discount', () => {
    const order = { items: [{ price: 100 }], discount: 0.1 };
    const total = calculateTotal(order);
    expect(total).toBe(103.5); // (100 - 10) * 1.15
  });
});

Integration Tests:

// Test multiple components working together
describe('User Service with Database', () => {
  it('should create and retrieve user', async () => {
    const user = await userService.create({ email: '[e-mail]' });
    const retrieved = await userService.getById(user.id);
    expect(retrieved.email).toBe('[e-mail]');
  });
});

E2E Tests (Playwright):

// Test complete user flows
test('user should be able to register and login', async ({ page }) => {
  await page.goto('http://localhost:3000/register');
  await page.fill('input[name="email"]', '[e-mail]');
  await page.fill('input[name="password"]', 'SecurePassword123');
  await page.click('button[type="submit"]');
  
  expect(page.url()).toContain('/dashboard');
});

Test Libraries:

• Unit: Jest, Vitest
• Integration: Jest with database
• E2E: Playwright, Cypress
• Mocking: Jest, MSW (Mock Service Worker)

5. Security & Vulnerability Testing

FFUF Web Fuzzing for Penetration Testing:

# Directory discovery
ffuf -w wordlist.txt -u https://target.com/FUZZ -ac

# API endpoint discovery
ffuf -w api-endpoints.txt -u https://api.target.com/v1/FUZZ -ac

# Parameter fuzzing (requires authentication)
ffuf --request authenticated_req.txt -w params.txt -ac

# IDOR testing (finds insecure direct object references)
ffuf --request req.txt -w user_ids.txt -ac -mc 200

Security Checklist:

• ✅ Use HTTPS everywhere
• ✅ Implement CORS correctly
• ✅ Use secure headers (CSP, X-Frame-Options, etc.)
• ✅ Hash passwords with bcrypt (12 rounds minimum)
• ✅ Validate and sanitize all inputs
• ✅ Use parameterized queries (ORM handles this)
• ✅ Implement rate limiting on APIs
• ✅ Log security events
• ✅ Regular dependency updates
• ✅ Use security scanning tools (npm audit, Snyk)

6. Data Visualization (D3.js or Chart Libraries)

Chart Selection:

• Line/Area charts: Time series, trends
• Bar charts: Comparisons, categories
• Pie/Donut charts: Proportions
• Scatter: Correlations
• Heatmaps: Density, patterns
• Network graphs: Relationships

Example with Recharts (Simpler Alternative):

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

export function SalesChart({ data }) {
  return (
    <LineChart width={800} height={400} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Line type="monotone" dataKey="sales" stroke="#8884d8" />
    </LineChart>
  );
}

7. DevOps & Deployment

CI/CD Pipeline:

# Example GitHub Actions
name: Deploy

on:
  push:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm install
      - run: npm run lint
      - run: npm run test
      - run: npm run build

  deploy:
    needs: test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Deploy to AWS
        run: |
          aws s3 cp dist/ s3://my-bucket --recursive
          aws cloudfront create-invalidation --distribution-id $DIST_ID --paths "/*"

Deployment Environments:

• Development: Local machine + Docker
• Staging: AWS/Vercel/Railway with latest code
• Production: AWS/Vercel/Railway with tagged releases

Infrastructure as Code (AWS CDK):

// Define infrastructure in code
const app = new cdk.App();
const stack = new cdk.Stack(app, 'fullstack-stack');

const bucket = new s3.Bucket(stack, 'frontend-bucket', {
  websiteIndexDocument: 'index.html',
  publicReadAccess: true,
});

const distribution = new cloudfront.Distribution(stack, 'distribution', {
  defaultBehavior: { origin: new S3Origin(bucket) },
});

8. Git Workflow

Branching Strategy (Git Flow):

main (production)
  ├── release/v1.0.0
  │   └── hotfix/critical-bug
  └── develop (staging)
      ├── feature/user-auth
      ├── feature/payment-integration
      └── feature/dashboard

Commit Messages:

feat: add user authentication
fix: correct payment calculation
docs: update API documentation
test: add tests for auth service
refactor: simplify order service
chore: update dependencies

Git Worktrees for Parallel Work:

# Create isolated workspace for feature
git worktree add ../feature-branch feature/new-feature

# Switch between features without stashing
cd ../feature-branch
# Work on feature...

# Cleanup
git worktree remove ../feature-branch

9. Performance Optimization

Frontend:

• Code splitting: Load only needed JavaScript
• Lazy loading: Images, components on-demand
• Caching: Static assets with long-lived cache headers
• Minification: Reduce bundle size
• Critical rendering path: Optimize above-fold content

Backend:

• Database indexing: Fast queries
• Caching: Redis for frequently accessed data
• Connection pooling: Reuse database connections
• Async operations: Non-blocking I/O
• Load balancing: Distribute traffic

Monitoring:

// Use Application Performance Monitoring
// Services: New Relic, DataDog, Sentry, LogRocket

// Track key metrics
metrics.recordLatency('api.users.get', duration);
metrics.incrementCounter('api.errors');
metrics.recordGauge('db.connections.active', activeConnections);

Workflow for Building Features

Step 1: Plan & Design

1. Define requirements and acceptance criteria
2. Sketch API endpoints and data models
3. Design database schema
4. Plan component structure (frontend)

Step 2: Write Tests First (TDD)

// Write test before implementation
describe('createUser', () => {
  it('should create user with valid email', async () => {
    const user = await createUser({ email: '[e-mail]' });
    expect(user.id).toBeDefined();
    expect(user.email).toBe('[e-mail]');
  });
});

Step 3: Implement Backend

1. Create database schema/migration
2. Implement service layer
3. Create API endpoints
4. Add authentication/authorization
5. Write integration tests

Step 4: Implement Frontend

1. Create React components
2. Integrate with API
3. Add form validation
4. Handle errors gracefully
5. Write E2E tests

Step 5: Security Review

# Run security checks
npm audit
npx snyk test

# Run FFUF tests on staging
ffuf -w api-wordlist.txt -u https://staging.app/api/FUZZ -ac

Step 6: Deploy & Monitor

1. Run full test suite
2. Build for production
3. Deploy to staging
4. Run E2E tests on staging
5. Deploy to production
6. Monitor metrics and logs

Step 7: Iterate

1. Gather user feedback
2. Monitor performance
3. Fix bugs and security issues
4. Plan improvements

Technology Stack Recommendations

Frontend

• Framework: React 18+ with TypeScript
• State Management: TanStack Query + Zustand
• Styling: Tailwind CSS
• UI Components: shadcn/ui, Radix UI
• Testing: Vitest + React Testing Library
• E2E: Playwright

Backend

• Runtime: Node.js 18+ or Bun
• Framework: Express, NestJS, or FastAPI
• Database: PostgreSQL with Prisma ORM
• Authentication: NextAuth, Auth0, or Supabase
• API Documentation: OpenAPI/Swagger
• Testing: Jest, Supertest
• Logging: Winston, Pino

DevOps & Infrastructure

• Hosting: AWS, Vercel, Railway, Render
• Container: Docker
• CI/CD: GitHub Actions, GitLab CI
• Infrastructure as Code: AWS CDK or Terraform
• Monitoring: DataDog, New Relic, or Sentry
• Database Hosting: AWS RDS, Railway, or Supabase

Common Patterns

Error Handling

// Create custom error classes
class AppError extends Error {
  constructor(public statusCode: number, message: string) {
    super(message);
  }
}

class ValidationError extends AppError {
  constructor(message: string) {
    super(400, message);
  }
}

// Use in middleware
app.use((err, req, res, next) => {
  if (err instanceof AppError) {
    res.status(err.statusCode).json({ error: err.message });
  } else {
    res.status(500).json({ error: 'Internal server error' });
  }
});

Async/Await Best Practices

// ✅ Good: Parallel operations when possible
const [user, posts] = await Promise.all([
  getUser(id),
  getPosts(userId),
]);

// ❌ Avoid: Sequential when parallel is possible
const user = await getUser(id);
const posts = await getPosts(user.id);

API Response Format

// Consistent response structure
interface ApiResponse<T> {
  success: boolean;
  data?: T;
  error?: {
    code: string;
    message: string;
  };
  meta?: {
    timestamp: string;
    version: string;
  };
}

Tools & Resources

Code Quality

• ESLint: Linting
• Prettier: Code formatting
• TypeScript: Type safety
• SonarQube: Code analysis

Testing

• Jest: Unit testing
• Playwright: E2E testing
• Mock Service Worker: API mocking
• Storybook: Component testing

Performance

• Lighthouse: Web performance auditing
• WebPageTest: Detailed performance analysis
• Chrome DevTools: Browser debugging
• Bundle Analyzer: JavaScript bundle analysis

Security

• FFUF: Web fuzzing
• npm audit: Dependency vulnerabilities
• Snyk: Security scanning
• OWASP Top 10: Security best practices

Notes for Claude

• When building features, emphasize TDD approach
• Always recommend using established libraries instead of custom code
• Ensure proper error handling and validation
• Consider security implications at every step
• Optimize for performance and user experience
• Use TypeScript for type safety
• Follow SOLID principles and Clean Architecture
• Implement proper logging and monitoring
• Write comprehensive tests (unit, integration, E2E)
• Use git best practices and semantic commits
• Document API endpoints with OpenAPI/Swagger
• Consider accessibility (a11y) in frontend development
• Plan for scalability from the start