Full Stack Developer - Guía de Entorno

Esta guía combina las herramientas necesarias para desarrollo frontend y backend, optimizando la configuración para trabajar con Claude Code en proyectos full stack.

Resumen

El desarrollador full stack necesita un entorno que cubra:

• Frontend: React/Vue/Angular + TypeScript
• Backend: Node.js/.NET/Python
• Bases de datos: PostgreSQL, MongoDB, Redis
• DevOps básico: Docker, CI/CD

---

Instalación Rápida

Node.js + pnpm

# Windows
winget install OpenJS.NodeJS.LTS
corepack enable
corepack prepare pnpm@latest --activate

# macOS
brew install node@22
corepack enable

# Verificar
node --version   # 22.x
pnpm --version   # 9.x

Docker

# Windows/macOS
# Descargar Docker Desktop: https://docker.com/products/docker-desktop

# Linux
curl -fsSL https://get.docker.com | sh
sudo usermod -aG docker $USER

# Verificar
docker --version
docker compose version

Git + GitHub CLI

# Windows
winget install Git.Git GitHub.cli

# macOS
brew install git gh

# Configurar
git config --global user.name "Tu Nombre"
git config --global user.email "tu@email.com"
gh auth login

---

Stack Recomendados

T3 Stack (TypeScript Full Stack)

# Next.js + tRPC + Prisma + Tailwind
pnpm create t3-app@latest

# Incluye:
# - Next.js 15 (App Router)
# - TypeScript
# - Tailwind CSS
# - tRPC (API type-safe)
# - Prisma (ORM)
# - NextAuth.js (Auth)

MERN Stack

# Frontend: React + Vite
pnpm create vite@latest client -- --template react-ts

# Backend: Express + TypeScript
mkdir server && cd server
pnpm init
pnpm add express mongoose cors dotenv
pnpm add -D typescript @types/node @types/express tsx

# MongoDB
docker run -d --name mongo -p 27017:27017 mongo:7

.NET + React

# Backend
dotnet new webapi -n Api -o src/Api
dotnet add src/Api package Npgsql.EntityFrameworkCore.PostgreSQL

# Frontend
pnpm create vite@latest client -- --template react-ts

# Base de datos
docker run -d --name postgres -e POSTGRES_PASSWORD=dev -p 5432:5432 postgres:16

---

Bases de Datos (Docker)

# docker-compose.yml
version: '3.8'

services:
  postgres:
    image: postgres:16
    environment:
      POSTGRES_USER: dev
      POSTGRES_PASSWORD: dev
      POSTGRES_DB: myapp
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data

  mongodb:
    image: mongo:7
    ports:
      - "27017:27017"
    volumes:
      - mongo_data:/data/db

  redis:
    image: redis:7-alpine
    ports:
      - "6379:6379"

volumes:
  postgres_data:
  mongo_data:

# Levantar servicios
docker compose up -d

# Ver logs
docker compose logs -f postgres

# Parar
docker compose down

---

IDE: Visual Studio Code

Extensiones Recomendadas

# TypeScript/JavaScript
code --install-extension ms-vscode.vscode-typescript-next
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode

# React
code --install-extension dsznajder.es7-react-js-snippets
code --install-extension bradlc.vscode-tailwindcss

# Backend
code --install-extension ms-dotnettools.csharp          # .NET
code --install-extension ms-python.python               # Python
code --install-extension prisma.prisma                  # Prisma

# Bases de datos
code --install-extension mtxr.sqltools
code --install-extension mtxr.sqltools-driver-pg
code --install-extension mongodb.mongodb-vscode

# DevOps
code --install-extension ms-azuretools.vscode-docker

# Productividad
code --install-extension usernamehw.errorlens
code --install-extension christian-kohler.path-intellisense
code --install-extension formulahendry.auto-rename-tag

settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "typescript.preferences.importModuleSpecifier": "relative",
  "emmet.includeLanguages": {
    "typescriptreact": "html"
  },
  "[prisma]": {
    "editor.defaultFormatter": "Prisma.prisma"
  }
}

---

Comandos Frecuentes

Desarrollo

# Frontend
pnpm dev                    # Servidor desarrollo
pnpm build                  # Build producción
pnpm test                   # Tests

# Backend Node.js
pnpm tsx watch src/index.ts # Con hot reload
pnpm vitest                 # Tests

# Backend .NET
dotnet watch run            # Con hot reload
dotnet test                 # Tests

# Full stack (monorepo)
pnpm dev --filter=client    # Solo frontend
pnpm dev --filter=server    # Solo backend

Base de Datos

# Prisma
npx prisma migrate dev
npx prisma studio
npx prisma generate

# Entity Framework
dotnet ef migrations add InitialCreate
dotnet ef database update

# PostgreSQL CLI
psql -h localhost -U dev -d myapp

Docker

docker compose up -d        # Levantar servicios
docker compose logs -f      # Ver logs
docker compose down         # Parar
docker compose ps           # Estado

---

Estructura Monorepo

myapp/
├── apps/
│   ├── web/                # Next.js / React
│   │   ├── src/
│   │   ├── package.json
│   │   └── tsconfig.json
│   └── api/                # Backend
│       ├── src/
│       ├── package.json
│       └── tsconfig.json
├── packages/
│   ├── ui/                 # Componentes compartidos
│   ├── db/                 # Prisma schema
│   └── config/             # ESLint, TS configs
├── docker-compose.yml
├── package.json
├── pnpm-workspace.yaml
└── turbo.json              # Si usas Turborepo

pnpm-workspace.yaml:

packages:
  - 'apps/*'
  - 'packages/*'

---

Verificación del Entorno

#!/bin/bash
echo "=== Verificación Entorno Full Stack ==="

echo -e "\n--- Runtime ---"
node --version
pnpm --version

echo -e "\n--- Docker ---"
docker --version
docker compose version

echo -e "\n--- Git ---"
git --version
gh --version 2>/dev/null || echo "GitHub CLI no instalado"

echo -e "\n--- Bases de Datos (Docker) ---"
docker ps --format "table {{.Names}}\t{{.Status}}" | grep -E "postgres|mongo|redis" || echo "No hay contenedores de BD activos"

echo -e "\n--- CLIs de BD ---"
psql --version 2>/dev/null || echo "psql no instalado"
mongosh --version 2>/dev/null || echo "mongosh no instalado"

echo -e "\n=== Verificación Completa ==="

---

Recursos

Consulta las guías específicas para profundizar:

• Frontend: React/Next.js, Vue
• Backend: Node.js, .NET, Python
• Bases de datos: DBA Guide
• DevOps: DevOps Guide