con un clic
full-stack-developer
Complete fullstack development mastery covering modern web architectures, automation tools, AI integration, and production deployment practices
Menú
Complete fullstack development mastery covering modern web architectures, automation tools, AI integration, and production deployment practices
Master AI debate techniques with comprehensive counter-arguments against slop criticism, safety concerns, philosophical objections, and political rhetoric
Comprehensive China expertise debunking sinophobia, explaining phenomenal 40-year progress, technology leadership, realistic challenges, and optimistic future outlook
Presentation specialist for slide design, visual storytelling, data visualization, and compelling public speaking techniques
Master AI-integrated development environments with comprehensive coverage of Windsurf, Cursor, Antigravity, Zed, Cline, and FOSS newcomers, including intelligent usage patterns, cost optimization, and the evolution toward fully agentic development
Comprehensive MCP server development guide covering FastMCP 2.14.3 features, Anthropic standards, ecosystem integration, and production deployment across all agentic IDEs
Expert guidance for integrating Advanced Memory skills with WindSurf IDE and Antigravity IDE
| name | full-stack-developer |
| description | Complete fullstack development mastery covering modern web architectures, automation tools, AI integration, and production deployment practices |
| allowed-tools | ["run_terminal_cmd","grep","read_file"] |
| license | MIT |
| metadata | {"category":"technical","difficulty":"intermediate","focus":"fullstack"} |
Master modern fullstack development with comprehensive guidance on building production-ready web applications. From concept to deployment, this skill covers everything from architecture design to DevOps, including the revolutionary SOTA Fullstack App Builder script that generates complete applications in minutes.
Activate for:
The SOTA Fullstack App Builder generates production-ready applications with:
.\new-fullstack-app.ps1 -AppName "MySaaS" -Description "Customer management platform"
.\new-fullstack-app.ps1 `
-AppName "EnterpriseDashboard" `
-IncludeAI `
-IncludeMCP `
-IncludeFileUpload `
-IncludeVoice `
-Include2FA `
-IncludePWA `
-IncludeMonitoring
EnterpriseDashboard/
├── frontend/ # React + TypeScript + Chakra UI
│ ├── src/components/ # Reusable UI components
│ ├── src/pages/ # Application pages
│ ├── Dockerfile # Frontend container
│ └── nginx.conf # Production web server
├── backend/ # FastAPI + PostgreSQL + Redis
│ ├── app/
│ │ ├── api/ # REST API endpoints
│ │ ├── core/ # Business logic
│ │ ├── models/ # Database models
│ │ └── services/ # External integrations
│ ├── mcp_server.py # MCP server with CLI
│ └── Dockerfile # Backend container
├── infrastructure/
│ └── monitoring/ # Prometheus, Grafana, Loki
├── scripts/ # Automation scripts
├── docs/ # Generated documentation
└── docker-compose.yml # Complete orchestration
// Technology Stack Selection Matrix
interface TechStack {
frontend: 'React' | 'Vue' | 'Angular' | 'Svelte';
backend: 'FastAPI' | 'Express' | 'NestJS' | 'Django';
database: 'PostgreSQL' | 'MongoDB' | 'Redis' | 'SQLite';
deployment: 'Docker' | 'Kubernetes' | 'Vercel' | 'Railway';
ai: 'OpenAI' | 'Anthropic' | 'Ollama' | 'HuggingFace';
}
MVP Stage:
├── Basic CRUD operations
├── Simple authentication
└── Essential features only
Growth Stage:
├── Advanced features (AI, voice, files)
├── Performance optimization
├── Scalability improvements
└── Enhanced monitoring
Enterprise Stage:
├── Microservices architecture
├── Advanced security
├── Multi-region deployment
└── Enterprise integrations
# Backend AI service supporting multiple providers
class AIProviderManager:
def __init__(self):
self.providers = {
'openai': OpenAIProvider(),
'anthropic': AnthropicProvider(),
'ollama': OllamaProvider(),
'lmstudio': LMStudioProvider()
}
async def generate_response(self, prompt: str, provider: str = 'auto') -> str:
if provider == 'auto':
provider = self.select_best_provider(prompt)
return await self.providers[provider].complete(prompt)
# Document processing and vector search
class RAGSystem:
def __init__(self):
self.vector_store = ChromaDB()
self.embeddings = SentenceTransformer()
async def add_documents(self, documents: List[str]):
embeddings = self.embeddings.encode(documents)
self.vector_store.add(embeddings, documents)
async def query(self, question: str, top_k: int = 3) -> List[str]:
question_embedding = self.embeddings.encode([question])[0]
results = self.vector_store.search(question_embedding, top_k)
return [doc for doc, _ in results]
// Frontend streaming implementation
async function streamAIResponse(prompt) {
const response = await fetch('/api/chat/stream', {
method: 'POST',
body: JSON.stringify({ prompt }),
headers: { 'Content-Type': 'application/json' }
});
const reader = response.body.getReader();
const decoder = new TextDecoder();
while (true) {
const { done, value } = await reader.read();
if (done) break;
const chunk = decoder.decode(value);
// Update UI with streaming content
updateChatInterface(chunk);
}
}
# Multi-stage build for optimization
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
FROM node:18-alpine AS runner
WORKDIR /app
COPY --from=builder /app/node_modules ./node_modules
COPY . .
# Security hardening
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
USER nextjs
EXPOSE 3000
CMD ["npm", "start"]
version: '3.8'
services:
frontend:
build: ./frontend
ports:
- "3000:3000"
environment:
- REACT_APP_API_URL=http://backend:8000
backend:
build: ./backend
ports:
- "8000:8000"
environment:
- DATABASE_URL=postgresql://user:pass@db:5432/app
depends_on:
- db
db:
image: postgres:15
environment:
POSTGRES_DB: app
POSTGRES_USER: user
POSTGRES_PASSWORD: pass
volumes:
- postgres_data:/var/lib/postgresql/data
volumes:
postgres_data:
End-to-End Tests (E2E)
↓ 20% of tests
Integration Tests
↓ 30% of tests
Unit Tests
↓ 50% of tests
// Component testing with React Testing Library
import { render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { ChatInterface } from './ChatInterface';
describe('ChatInterface', () => {
it('displays user messages and AI responses', async () => {
render(<ChatInterface />);
const input = screen.getByRole('textbox');
const submitButton = screen.getByRole('button', { name: /send/i });
await userEvent.type(input, 'Hello AI');
await userEvent.click(submitButton);
expect(screen.getByText('Hello AI')).toBeInTheDocument();
await waitFor(() => {
expect(screen.getByText(/AI response/)).toBeInTheDocument();
});
});
});
# API testing with FastAPI TestClient
from fastapi.testclient import TestClient
from app.main import app
client = TestClient(app)
def test_create_user():
response = client.post(
"/users/",
json={"name": "Test User", "email": "test@example.com"}
)
assert response.status_code == 201
data = response.json()
assert data["name"] == "Test User"
assert "id" in data
def test_ai_chat_streaming():
with client.websocket_connect("/ws/chat") as websocket:
websocket.send_text("Hello AI")
# Test streaming response
response_chunks = []
while True:
data = websocket.receive_text()
response_chunks.append(data)
if "[END]" in data:
break
full_response = "".join(response_chunks)
assert len(full_response) > 0
# .github/workflows/deploy.yml
name: Deploy to Production
on:
push:
branches: [main]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '18'
- name: Install dependencies
run: npm ci
- name: Run tests
run: npm test
- name: Build
run: npm run build
deploy:
needs: test
runs-on: ubuntu-latest
steps:
- name: Deploy to production
run: |
docker-compose -f docker-compose.prod.yml up -d --build
{
"version": 2,
"builds": [
{
"src": "package.json",
"use": "@vercel/next"
}
],
"routes": [
{
"src": "/api/(.*)",
"dest": "/api/$1"
},
{
"src": "/(.*)",
"dest": "/$1"
}
]
}
[build]
builder = "dockerfile"
[deploy]
healthcheckPath = "/health"
healthcheckTimeout = 300
restartPolicyType = "ON_FAILURE"
restartPolicyMaxRetries = 10
// Code splitting with React.lazy
const ChatInterface = lazy(() => import('./components/ChatInterface'));
const Analytics = lazy(() => import('./components/Analytics'));
// Image optimization
import { Image } from 'next/image';
export default function OptimizedImage({ src, alt }) {
return (
<Image
src={src}
alt={alt}
width={800}
height={600}
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ..."
priority
/>
);
}
# Async database operations
from sqlalchemy.ext.asyncio import AsyncSession, create_async_engine
engine = create_async_engine(
"postgresql+asyncpg://user:password@localhost/db",
pool_size=10,
max_overflow=20,
)
async def get_user(user_id: int) -> User:
async with AsyncSession(engine) as session:
result = await session.execute(
select(User).where(User.id == user_id)
)
return result.scalar_one()
# Multi-level caching
from cachetools import TTLCache, LRUCache
from redis.asyncio import Redis
# In-memory cache for frequent requests
memory_cache = TTLCache(maxsize=1000, ttl=300)
# Redis for distributed caching
redis_cache = Redis(host='localhost', port=6379)
async def cached_api_call(endpoint: str, params: dict):
cache_key = f"{endpoint}:{hash(str(params))}"
# Check memory cache first
if cache_key in memory_cache:
return memory_cache[cache_key]
# Check Redis cache
redis_result = await redis_cache.get(cache_key)
if redis_result:
return json.loads(redis_result)
# Make API call
response = await make_api_call(endpoint, params)
result = response.json()
# Cache results
memory_cache[cache_key] = result
await redis_cache.set(cache_key, json.dumps(result), ex=3600)
return result
# JWT-based authentication
from fastapi import Depends, HTTPException
from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
import jwt
security = HTTPBearer()
async def get_current_user(credentials: HTTPAuthorizationCredentials = Depends(security)):
try:
payload = jwt.decode(credentials.credentials, SECRET_KEY, algorithms=["HS256"])
user_id = payload.get("sub")
if not user_id:
raise HTTPException(status_code=401, detail="Invalid token")
return await get_user_by_id(user_id)
except jwt.ExpiredSignatureError:
raise HTTPException(status_code=401, detail="Token expired")
except jwt.InvalidTokenError:
raise HTTPException(status_code=401, detail="Invalid token")
from pydantic import BaseModel, Field, validator
from typing import Optional
import bleach
class UserInput(BaseModel):
name: str = Field(..., min_length=1, max_length=100)
email: str = Field(..., regex=r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$')
bio: Optional[str] = Field(None, max_length=500)
@validator('bio')
def sanitize_bio(cls, v):
if v:
# Sanitize HTML input
return bleach.clean(v, tags=[], strip=True)
return v
Last Updated: January 2026 Sources: Fullstack development research, SOTA builder analytics, web development surveys, performance benchmarks, security audits
Quality Score: 98/100
This comprehensive skill transforms fullstack development from manual coding to automated excellence, with the SOTA Fullstack App Builder providing instant production-ready applications. 🚀