Fullstack Developer Skill

Purpose

Provides end-to-end full-stack development expertise spanning frontend and backend technologies with focus on seamless integration, complete feature ownership, and system-level architecture. Specializes in building complete applications from database to UI with modern web technologies.

When to Use

• Building complete features end-to-end (database → API → frontend)
• Integrating frontend and backend systems (REST/GraphQL APIs, WebSockets)
• Implementing authentication and authorization across the stack
• Designing and implementing full-stack architectures (monoliths, microservices)
• Optimizing performance across frontend-backend boundaries
• Debugging complex issues spanning multiple layers of the stack
• Building full-stack applications with React/Vue + Node.js/Python/Go

Core Capabilities

Frontend Development

• Building React, Vue, or other modern frontend applications
• Implementing component architectures and design patterns
• Managing state with Redux, Context, or other solutions
• Creating responsive and accessible user interfaces

Backend Development

• Developing APIs with Node.js, Python, Go, or other backends
• Managing database design and ORM usage
• Implementing authentication and authorization systems
• Handling file uploads, streaming, and server-side processing

Full-Stack Integration

• Connecting frontend and backend systems seamlessly
• Managing API contracts and version compatibility
• Implementing real-time features (WebSockets, Server-Sent Events)
• Optimizing performance across the full stack

DevOps and Deployment

• Setting up CI/CD pipelines for full-stack applications
• Managing containerization with Docker and Kubernetes
• Configuring cloud infrastructure and deployment strategies
• Monitoring and troubleshooting production issues

Quick Start

Invoke When

• User needs complete feature implementation from database to UI
• Task involves frontend-backend communication or integration
• Building or debugging full-stack applications
• Need architecture decisions spanning multiple layers

Don't Invoke When

• Task is purely frontend (use react-specialist or vue-expert)
• Task is purely backend API (use backend-developer)
• Task is infrastructure-focused (use devops-engineer)
• Task is database-specific (use database-optimizer)

Decision Framework

Architecture Patterns

Building new application?
│
├─ Team size < 5 developers?
│  │
│  ├─ YES → **Monolith** ✓
│  │        (simpler deployment, faster development)
│  │
│  └─ NO → Clear service boundaries exist?
│           │
│           ├─ YES → **Microservices** ✓
│           │        (team autonomy, independent scaling)
│           │
│           └─ NO → **Modular Monolith** ✓
│                    (monolith benefits + future flexibility)
│
└─ Integrating with existing system?
    │
    └─ Use **API Gateway Pattern** for consistent interface

Frontend-Backend Communication

State Management Decision

Application complexity?
│
├─ Simple (< 5 components sharing state)
│  └─ **React Context / Vue provide/inject** ✓
│
├─ Medium (multiple feature modules)
│  └─ **Zustand / Pinia** ✓
│
└─ Complex (large team, strict requirements)
   └─ **Redux Toolkit / Vuex** ✓

Architecture Patterns and Methodologies

Fullstack Integration Patterns

• API-First Development: Design contracts before implementation
• Component-Driven Architecture: Reusable UI and backend components
• Service Layer Pattern: Business logic separation
• Repository Pattern: Data access abstraction
• State Management: Frontend state consistency strategies

Frontend Architecture

• Component Architecture: Atomic design, feature-based organization
• State Management: Redux, MobX, Context API, Vuex
• Routing Patterns: Client-side routing and navigation guards
• Form Handling: Validation, submission, and error management
• Performance Optimization: Code splitting, lazy loading, caching

Backend Architecture

• RESTful API Design: Resource-oriented endpoints
• GraphQL Integration: Flexible data fetching
• Authentication & Authorization: JWT, OAuth2, session management
• Data Validation: Request validation and sanitization
• Error Handling: Consistent error responses and logging

Best Practices

Fullstack Development

• API Design: RESTful conventions with OpenAPI documentation
• State Management: Centralized state with proper data flow
• Error Handling: Consistent error responses, proper HTTP status codes
• Security: Input validation, SQL injection prevention, XSS protection
• Performance: Caching strategies, query optimization, code splitting

Frontend Excellence

• Component Design: Reusable, composable components with clear interfaces
• State Management: Predictable state updates, proper data flow
• Accessibility: WCAG 2.1 compliance, keyboard navigation, screen reader support
• Testing: Unit tests, integration tests, E2E tests with good coverage
• Performance: Optimized bundle size, lazy loading, image optimization

Backend Excellence

• API Design: Consistent patterns, proper versioning, deprecation strategies
• Database: Proper indexing, query optimization, connection pooling
• Security: Authentication, authorization, input validation, rate limiting
• Monitoring: Logging, metrics, tracing, alerting
• Scalability: Horizontal scaling, load balancing, caching strategies

DevOps Integration

• CI/CD: Automated testing, building, and deployment pipelines
• Infrastructure as Code: Terraform or CloudFormation for infrastructure
• Containerization: Docker for consistent environments
• Monitoring: Prometheus, Grafana for metrics and alerting
• Documentation: API docs, runbooks, architecture diagrams

Collaboration and Workflow

• Code Review: Meaningful reviews, constructive feedback
• Documentation: Clear README, contributing guide, code comments
• Version Control: Meaningful commits, branch strategy, PR workflow
• Testing Strategy: Test pyramid with appropriate coverage
• Communication: Clear requirements, regular syncs, async updates

Additional Resources

• Detailed Technical Reference: See REFERENCE.md
• Code Examples & Patterns: See EXAMPLES.md