Tutorial: Eine Full-Stack-App remote bauen mit Tactic Remote

Dieses Tutorial führt dich durch den Bau einer kompletten Full-Stack-Anwendung — einer Aufgabenverwaltungs-API mit React-Frontend — vollständig über Tactic Remote. Du steuerst Claude Code von deinem iPhone, während dein Mac die schwere Arbeit übernimmt.

Am Ende hast du eine funktionierende Anwendung und praktische Erfahrung mit dem Remote-Entwicklungsworkflow, den Tactic Remote ermöglicht.

Voraussetzungen

Stelle vor dem Start sicher, dass du Folgendes hast:

• Tactic Remote eingerichtet und verbunden (Erste-Schritte-Anleitung)
• Node.js 18+ auf deinem Mac installiert
• Ein funktionierendes Projektverzeichnis (wir verwenden ~/projects/taskflow)

Teil 1: Projekteinrichtung (10 Minuten)

Öffne Tactic Remote auf deinem iPhone und starte eine neue Sitzung, die auf dein Projektverzeichnis zeigt.

Prompt 1: Projekt-Scaffolding

Sende diesen Prompt an 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 wird 3-5 Minuten an dieser Aufgabe arbeiten. Du siehst, wie Verzeichnisse erstellt, Konfigurationsdateien geschrieben und Abhängigkeiten installiert werden. Das ist ein guter Zeitpunkt, das Telefon wegzulegen — Tactic Remote benachrichtigt dich, wenn die Aufgabe abgeschlossen ist oder eine Genehmigung benötigt wird.

Worauf achten: Claude Code wird wahrscheinlich eine Genehmigung für npm install anfordern. Genehmige dies über die Benachrichtigung — es installiert die Abhängigkeiten deines Projekts.

Prompt 2: Setup überprüfen

Nach Abschluss des Scaffoldings überprüfe, ob alles funktioniert:

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

Du solltest sehen, wie Claude Code die Server startet und URLs wie http://localhost:3001 für die API und http://localhost:5173 für das Frontend meldet.

Teil 2: API bauen (20 Minuten)

Jetzt bauen wir die Backend-API mit substanzieller Geschäftslogik aus.

Prompt 3: Datenbankschema und Modelle

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

Dieser Prompt demonstriert einen zentralen Vorteil der KI-gestützten Entwicklung: Du beschreibst das Was und Claude übernimmt das Wie. Das Ergebnis umfasst korrekt typisierte Modelle, SQL-Migrationen und Testdaten — Arbeit, die einen menschlichen Entwickler 30-60 Minuten kosten würde.

Prompt 4: API-Routen mit Validierung

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.

Genehmigungshinweis: Claude Code kann eine Genehmigung zur Änderung mehrerer Dateien anfordern. Überprüfe die Dateiliste in der Genehmigungskarte — sie sollte auf Dateien innerhalb des packages/api/-Verzeichnisses deines Projekts beschränkt sein. Wenn du Dateien außerhalb dieses Bereichs siehst, lehne ab und kläre den Prompt.

Prompt 5: API testen

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.

Beobachte die Testergebnisse in deiner Terminal-Ansicht. Grüne Tests sind auch auf einem Telefonbildschirm befriedigend. Wenn Tests fehlschlagen, wird Claude Code das Problem typischerweise automatisch diagnostizieren und beheben.

Teil 3: Frontend bauen (25 Minuten)

Prompt 6: Kern-UI-Komponenten

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.

Dies ist der umfangreichste Prompt bisher. Claude Code wird mehrere Komponenten generieren, Routing einrichten, React Query konfigurieren und Drag-and-drop implementieren. Erwarte 5-8 Minuten Arbeit.

Prompt 7: Formulare und Interaktionen

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: Feinschliff und responsives Design

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.

Teil 4: Integration und finale Überprüfung (10 Minuten)

Prompt 9: End-to-End-Überprüfung

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: Dokumentation

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

Was du gerade gebaut hast

In etwa einer Stunde Steuerung von Claude Code vom Telefon aus hast du erstellt:

• Eine TypeScript Express API mit SQLite-Persistenz
• Ein React-Frontend mit Drag-and-drop-Kanban-Board
• Vollständige CRUD-Operationen mit Validierung
• Integrationstests
• Responsives Design
• Projektdokumentation

Das ist eine nicht-triviale Anwendung — Hunderte von Codezeilen in Dutzenden von Dateien. Und du hast sie gebaut, ohne am Schreibtisch zu sitzen.

Tipps für Remote-Full-Stack-Entwicklung

Teile die Arbeit in klare Phasen. Versuche nicht, die gesamte Anwendung in einem Prompt zu beschreiben. Phasenweises Prompting liefert bessere Ergebnisse, weil jeder Prompt auf verifizierter Arbeit der vorherigen Phase aufbaut.

Überprüfe nach jeder Phase. Bitte Claude Code, Tests auszuführen oder Server zu starten nach jedem wichtigen Arbeitsteil. Früh erkannte Probleme verhindern Kaskadenfehler.

Nutze Genehmigungsbenachrichtigungen weise. Der Genehmigungsfluss ist nicht nur ein Sicherheitsfeature — er ist ein Kontrollpunkt, an dem du überprüfen kannst, was Claude Code tut, und bei Bedarf korrigieren kannst.

Beobachte nicht ständig. Der ganze Sinn der Remote-Entwicklung ist Freiheit. Starte einen Prompt, leg dein Telefon weg, komm zurück wenn du eine Benachrichtigung bekommst. Vertraue dem System.

Nächste Schritte

• Erweiterte Sitzungsverwaltung — Meistere Multi-Sitzungs-Workflows
• Automatisierung von Code-Reviews mit Tactic Remote — Richte KI-gestütztes Code-Review ein