InsForge: AIに最適化されたバックエンドでフルスタックアプリケーションを構築する

mkdir task-manager
cd task-manager

I'm using InsForge as my backend platform, call InsForge MCP's fetch-docs tool to learn about InsForge instructions.

Set up a React + TypeScript project using Vite for a task manager app. 
Install @insforge/sdk, react, react-dom and the usual dev dependencies. 

Create a proper folder structure with src/lib/ for the InsForge client, 
src/components/ for Auth, TaskList, and TaskForm components, and src/types/ 
for TypeScript interfaces. 

Also set up the .env file with VITE_INSFORGE_BASE_URL and VITE_INSFORGE_ANON_KEY - 
I'll grab those from my InsForge dashboard.

Configure src/lib/insforge.ts to use InsForge SDK. Import createClient from 
@insforge/sdk, pull in the baseUrl and anonKey from the environment variables, 
and set up the client with autoRefreshToken and persistSession enabled. Export 
the db, storage, and auth clients so I can use them throughout the app.

Also create the TypeScript types in src/types/task.ts. I need a Task interface 
with all the fields like id, title, description, status (pending/in_progress/completed), 
priority (low/medium/high), due_date, user_id, attachment_url, created_at, and 
updated_at. Plus a User interface and some helper types like CreateTaskInput and 
UpdateTaskInput.

Use InsForge MCP tools to create a tasks table. I need columns for id (uuid 
primary key), title (required text), description, status (default 'pending'), 
priority (default 'medium'), due_date, user_id (foreign key to auth.users), 
attachment_url, created_at, and updated_at timestamps. 

Enable Row Level Security so users can only see and modify their own tasks - 
set up the policies to check that auth.uid() matches the user_id for all operations.

Also create a storage bucket called 'task-attachments' for file uploads.

Create an Auth component in src/components/Auth.tsx. I need a form with email 
and password inputs, and a mode toggle to switch between sign-in and sign-up. 

Use the InsForge auth client to handle authentication - call auth.signUp() or 
auth.signIn() depending on the mode. Show a loading state on the button, handle 
errors with an alert, and reload the page on success to refresh the session.

Create a TaskForm component in src/components/TaskForm.tsx that takes an 
onTaskCreated callback. Add form fields for title, description, priority 
(dropdown with low/medium/high), due date, and file attachment. When submitting, 
if there's a file, upload it to the 'task-attachments' storage bucket first, 
then insert the task into the database with InsForge db client. Reset the form 
after creation.

Also create a TaskList component in src/components/TaskList.tsx. Fetch all tasks 
on mount, ordered by created_at. Display each task with its details - title, 
description, priority, status, due date, and attachment link if it exists. Add 
buttons to update the status (Start, Complete) and to delete tasks. Update the 
task status in the database when clicked, and show a confirmation dialog before 
deleting.

Create the main App component in src/App.tsx. Check for an existing session on 
mount using auth.getSession() and listen for auth state changes. Show a loading 
state initially, then conditionally render either the Auth component if there's 
no session, or the task manager interface if the user is logged in. 

The task manager should have a header with the title and a sign-out button, then 
the TaskForm and TaskList components. Also create the main.tsx entry point to 
render the App.

Start the development server using npm run dev