Tutoriel : Construire une application full-stack à distance avec Tactic Remote

Ce tutoriel vous guide à travers la construction d'une application full-stack complète — une API de gestion de tâches avec un frontend React — entièrement via Tactic Remote. Vous dirigerez Claude Code depuis votre iPhone pendant que votre Mac fait le gros du travail.

À la fin, vous aurez une application fonctionnelle et une expérience pratique du workflow de développement à distance que Tactic Remote rend possible.

Prérequis

Avant de commencer, assurez-vous d'avoir :

• Tactic Remote configuré et connecté (Guide de démarrage)
• Node.js 18+ installé sur votre Mac
• Un répertoire de projet fonctionnel (nous utiliserons ~/projects/taskflow)

Partie 1 : Configuration du projet (10 minutes)

Ouvrez Tactic Remote sur votre iPhone et démarrez une nouvelle session pointant vers votre répertoire de projet.

Prompt 1 : Scaffolding du projet

Envoyez ce prompt à 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 travaillera pendant 3-5 minutes sur cette tâche. Vous verrez la création de répertoires, l'écriture de fichiers de configuration et l'installation de dépendances. C'est un bon moment pour poser votre téléphone — Tactic Remote vous notifiera quand la tâche est terminée ou si une approbation est nécessaire.

À surveiller : Claude Code demandera probablement une approbation pour exécuter npm install. Approuvez depuis la notification — il installe les dépendances de votre projet.

Prompt 2 : Vérifier la configuration

Une fois le scaffolding terminé, vérifiez que tout fonctionne :

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

Vous devriez voir Claude Code démarrer les serveurs et rapporter des URLs comme http://localhost:3001 pour l'API et http://localhost:5173 pour le frontend.

Partie 2 : Construction de l'API (20 minutes)

Construisons maintenant l'API backend avec une logique métier substantielle.

Prompt 3 : Schéma de base de données et modèles

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

Ce prompt démontre un avantage clé du développement assisté par l'IA : vous décrivez le quoi et Claude gère le comment. Le résultat inclura des modèles correctement typés, des migrations SQL et des données de test — un travail qui prendrait 30-60 minutes à un développeur humain.

Prompt 4 : Routes API avec validation

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.

Note sur l'approbation : Claude Code peut demander une approbation pour modifier plusieurs fichiers. Vérifiez la liste des fichiers dans la carte d'approbation — elle devrait se limiter aux fichiers dans le répertoire packages/api/ de votre projet. Si vous voyez des fichiers hors de ce périmètre, refusez et clarifiez le prompt.

Prompt 5 : Tester l'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.

Regardez les résultats des tests défiler dans votre vue terminal. Les tests verts sont satisfaisants même sur l'écran d'un téléphone. Si des tests échouent, Claude Code diagnostiquera et corrigera généralement le problème automatiquement.

Partie 3 : Construction du frontend (25 minutes)

Prompt 6 : Composants UI principaux

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.

C'est le prompt le plus substantiel jusqu'ici. Claude Code générera plusieurs composants, configurera le routage, configurera React Query et implémentera le drag-and-drop. Attendez-vous à 5-8 minutes de travail.

Prompt 7 : Formulaires et interactions

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 : Finitions et design responsive

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.

Partie 4 : Intégration et vérification finale (10 minutes)

Prompt 9 : Vérification de bout en bout

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

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

Ce que vous venez de construire

En environ une heure de direction de Claude Code depuis votre téléphone, vous avez créé :

• Une API TypeScript Express avec persistance SQLite
• Un frontend React avec tableau kanban drag-and-drop
• Des opérations CRUD complètes avec validation
• Des tests d'intégration
• Un design responsive
• De la documentation projet

C'est une application non triviale — des centaines de lignes de code dans des dizaines de fichiers. Et vous l'avez construite sans vous asseoir à votre bureau.

Conseils pour le développement full-stack à distance

Découpez le travail en phases claires. N'essayez pas de décrire l'application entière en un seul prompt. Le prompting phase par phase donne de meilleurs résultats car chaque prompt s'appuie sur le travail vérifié de la phase précédente.

Vérifiez après chaque phase. Demandez à Claude Code d'exécuter les tests ou de démarrer les serveurs après chaque pièce importante de travail. Détecter les problèmes tôt empêche les problèmes en cascade.

Utilisez les notifications d'approbation judicieusement. Le flux d'approbation n'est pas seulement une fonctionnalité de sécurité — c'est un point de contrôle où vous pouvez examiner ce que fait Claude Code et corriger le cap si nécessaire.

Ne surveillez pas en continu. Tout l'intérêt du développement à distance est la liberté. Lancez un prompt, posez votre téléphone, revenez quand vous recevez une notification. Faites confiance au système.

Prochaines étapes

• Gestion avancée des sessions — Maîtrisez les workflows multi-sessions
• Automatiser les revues de code avec Tactic Remote — Mettez en place la revue de code assistée par l'IA