Tutorial: Construcción de una app full-stack de forma remota con Tactic Remote

Este tutorial te guía a través de la construcción de una aplicación full-stack completa — una API de gestión de tareas con un frontend React — completamente a través de Tactic Remote. Dirigirás Claude Code desde tu iPhone mientras tu Mac hace el trabajo pesado.

Al final, tendrás una aplicación funcional y experiencia práctica con el flujo de trabajo de desarrollo remoto que Tactic Remote posibilita.

Requisitos previos

Antes de comenzar, asegúrate de tener:

• Tactic Remote configurado y conectado (Guía de primeros pasos)
• Node.js 18+ instalado en tu Mac
• Un directorio de proyecto funcional (usaremos ~/projects/taskflow)

Parte 1: Configuración del proyecto (10 minutos)

Abre Tactic Remote en tu iPhone e inicia una nueva sesión apuntando a tu directorio de proyecto.

Prompt 1: Scaffolding del proyecto

Envía este prompt a Claude Code:

Create a full-stack task management application called TaskFlow.

Backend:
- Express.js server with TypeScript
- SQLite database with better-sqlite3
- RESTful API: CRUD for tasks and projects
- Input validation with zod

Frontend:
- React 18 with TypeScript
- Vite for bundling
- Tailwind CSS for styling
- React Query for data fetching

Set up the monorepo structure with packages/api and packages/web.
Use a root package.json with workspaces.

Claude Code trabajará durante 3-5 minutos en esta tarea. Verás cómo crea directorios, escribe archivos de configuración e instala dependencias. Es un buen momento para dejar el teléfono — Tactic Remote te notificará cuando la tarea se complete o si necesita aprobación.

Qué observar: Claude Code probablemente solicitará aprobación para ejecutar npm install. Apruébalo desde la notificación — está instalando las dependencias de tu proyecto.

Prompt 2: Verificar la configuración

Una vez completado el scaffolding, verifica que todo funciona:

Start both the API server and the frontend dev server.
Run any initial tests. Report the URLs where each is accessible.

Deberías ver que Claude Code inicia los servidores y te reporta URLs como http://localhost:3001 para la API y http://localhost:5173 para el frontend.

Parte 2: Construcción de la API (20 minutos)

Ahora construyamos la API backend con lógica de negocio sustancial.

Prompt 3: Esquema de base de datos y modelos

Create the database schema and models:

Tables:
- projects: id, name, description, color (hex), created_at, updated_at
- tasks: id, project_id (FK), title, description, status (todo/in_progress/done),
  priority (low/medium/high/urgent), due_date, created_at, updated_at

Include:
- Migration system that runs on server start
- Type-safe model layer with full TypeScript types
- Seed data: 2 sample projects with 5 tasks each

Este prompt demuestra un beneficio clave del desarrollo asistido por IA: describes el qué y Claude se encarga del cómo. El resultado incluirá modelos tipados correctamente, migraciones SQL y datos de prueba — trabajo que a un desarrollador humano le tomaría 30-60 minutos.

Prompt 4: Rutas de API con validación

Implement the full REST API:

Projects:
- GET /api/projects (list all, with task counts)
- POST /api/projects (create, validate with zod)
- PUT /api/projects/:id (update)
- DELETE /api/projects/:id (cascade delete tasks)

Tasks:
- GET /api/projects/:id/tasks (list by project, support ?status= filter)
- POST /api/projects/:id/tasks (create with validation)
- PUT /api/tasks/:id (update, including status transitions)
- DELETE /api/tasks/:id

Include proper error handling with consistent error response format.
Add request logging middleware.

Nota sobre aprobación: Claude Code puede solicitar aprobación para modificar múltiples archivos. Revisa la lista de archivos en la tarjeta de aprobación — debería limitarse a archivos dentro del directorio packages/api/ de tu proyecto. Si ves algún archivo fuera de este alcance, rechaza y clarifica el prompt.

Prompt 5: Probar la API

Write integration tests for all API endpoints using vitest and supertest.
Test both success cases and error cases (invalid input, not found, etc.).
Run the tests and report results.

Observa los resultados de los tests fluir a través de tu vista del terminal. Las pruebas verdes son satisfactorias incluso en la pantalla de un teléfono. Si alguna prueba falla, Claude Code normalmente diagnosticará y corregirá el problema automáticamente.

Parte 3: Construcción del frontend (25 minutos)

Prompt 6: Componentes de UI principales

Build the frontend UI:

1. Layout with sidebar (project list) and main area (task board)
2. ProjectList component: shows projects with task counts and color indicators
3. TaskBoard component: kanban-style columns for todo/in_progress/done
4. TaskCard component: shows title, priority badge, due date
5. Drag-and-drop between columns to change task status

Use React Query for all data fetching. Show loading skeletons.
Style with Tailwind - clean, modern look with the project color as accent.

Este es el prompt más sustancial hasta ahora. Claude Code generará varios componentes, configurará el enrutamiento, configurará React Query e implementará drag-and-drop. Espera 5-8 minutos de trabajo.

Prompt 7: Formularios e interacciones

Add interactive features:

1. Create Project modal: name, description, color picker
2. Create Task modal: title, description, priority selector, due date picker
3. Inline task editing: click to edit title, click priority to cycle through levels
4. Delete confirmation dialogs for projects and tasks
5. Toast notifications for successful operations

All forms should validate input and show helpful error messages.

Prompt 8: Pulido y diseño responsivo

Polish the UI:

1. Make everything fully responsive (mobile-friendly at 375px+)
2. Add empty states for projects and tasks (with calls-to-action)
3. Add a search/filter bar: filter tasks by title or status
4. Add keyboard shortcuts: N for new task, / for search
5. Add subtle animations for card transitions and modal open/close

Fix any visual issues you notice.

Parte 4: Integración y verificación final (10 minutos)

Prompt 9: Verificación de extremo a extremo

Verify the complete application:

1. Start the API server and frontend
2. Create a new project through the UI
3. Add several tasks with different priorities
4. Move tasks between columns
5. Edit and delete tasks
6. Test responsive layout at mobile sizes
7. Report any issues found and fix them

Provide the final URLs to access the application.

Prompt 10: Documentación

Create a README.md in the project root with:

1. Project description and screenshot placeholder
2. Tech stack overview
3. Getting started instructions (install, run, test)
4. API endpoint documentation with example requests/responses
5. Project structure explanation

Lo que acabas de construir

En aproximadamente una hora dirigiendo Claude Code desde tu teléfono, has creado:

• Una API TypeScript Express con persistencia SQLite
• Un frontend React con tablero kanban drag-and-drop
• Operaciones CRUD completas con validación
• Tests de integración
• Diseño responsivo
• Documentación del proyecto

Esta es una aplicación no trivial — cientos de líneas de código en docenas de archivos. Y la construiste sin sentarte frente a tu escritorio.

Consejos para el desarrollo full-stack remoto

Divide el trabajo en fases claras. No intentes describir toda la aplicación en un solo prompt. El prompting fase por fase da mejores resultados porque cada prompt se construye sobre trabajo verificado de la fase anterior.

Verifica después de cada fase. Pide a Claude Code que ejecute tests o inicie servidores después de cada pieza importante de trabajo. Detectar problemas temprano previene problemas en cascada.

Usa las notificaciones de aprobación sabiamente. El flujo de aprobación no es solo una característica de seguridad — es un punto de control donde puedes revisar lo que Claude Code está haciendo y corregir el rumbo si es necesario.

No observes continuamente. Todo el punto del desarrollo remoto es la libertad. Inicia un prompt, deja tu teléfono, vuelve cuando recibas una notificación. Confía en el sistema.

Próximos pasos

• Gestión avanzada de sesiones — Domina los flujos de trabajo multi-sesión
• Automatización de revisiones de código con Tactic Remote — Configura la revisión de código asistida por IA