튜토리얼: Tactic Remote로 풀스택 앱 원격 개발하기

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.

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

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

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.

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.

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.

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.

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.

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.

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