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

Pattern Use When Avoid When

REST API CRUD operations, simple data fetching Complex nested data, real-time needs

GraphQL Complex data requirements, mobile apps Simple APIs, caching is critical

WebSockets Real-time updates, chat, live feeds One-time data fetches

Server-Sent Events Server-to-client streaming only Bidirectional communication needed

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