A modern, production-ready TODO application built with React Router v7 and deployed on Cloudflare Workers.

• ✅ Full CRUD Operations: Create, Read, Update, Delete todos
• 🔄 Real-time State Management: Toggle completion status
• ✏️ Inline Editing: Edit todos directly in the interface
• 📱 Responsive Design: Mobile-first, touch-friendly interface
• 🗄️ Persistent Storage: SQLite D1 database
• 🚀 Edge Deployment: Cloudflare Workers for global performance
• ⚡️ Hot Module Replacement: Fast development experience
• ��� TypeScript: Full type safety
• 🎨 TailwindCSS: Modern, responsive styling

Install the dependencies:

npm install

1. Database Setup - Run an initial database migration:

npm run db:migrate

2. Start Development Server:

npm run dev

Your application will be available at http://localhost:5173.

1. Cloudflare Account - Create a free account at cloudflare.com
2. API Token - Create an API token with the following permissions:
   • Account: Cloudflare Workers:Edit
   • Account: D1:Edit
   • Zone: Zone:Read (if using custom domain)

1. Create D1 Database:

npx wrangler d1 create todo-db

2. Update Configuration - Update wrangler.jsonc with the generated database ID:

{
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "todo-db",
      "database_id": "your-database-id-here"
    }
  ]
}

3. Run Production Migration:

CLOUDFLARE_API_TOKEN="your-token" npx wrangler d1 migrations apply todo-db --remote

4. Deploy to Production:

npm run deploy

5. Register Workers.dev Subdomain (if needed):
   • Visit the provided dashboard URL to register your subdomain
   • Or configure a custom domain in Cloudflare Dashboard

Set your API token as an environment variable:

export CLOUDFLARE_API_TOKEN="your-api-token"

Local Development:

# Check local database
npx wrangler d1 execute --local DB --command "SELECT * FROM todos;"

# Apply local migrations
npm run db:migrate

Production:

# Check production database
npx wrangler d1 execute --remote DB --command "SELECT * FROM todos;"

# Apply production migrations
npx wrangler d1 migrations apply todo-db --remote

Create a production build:

npm run build

• Add TODOs: Use the input field to create new tasks
• Toggle Completion: Click the checkbox to mark tasks as complete/incomplete
• Edit TODOs: Click on the task text to edit inline
• Delete TODOs: Click the trash icon to remove tasks
• Responsive Design: Works seamlessly on mobile and desktop

• Frontend: React Router v7, React 19, TypeScript
• Styling: TailwindCSS with responsive design
• Database: SQLite (D1 for Cloudflare Workers)
• Testing: Vitest (unit/integration), Playwright (E2E)
• Deployment: Cloudflare Workers with Edge computing
• ORM: Drizzle ORM for type-safe database operations

Built with ❤️ using React Router v7 and Cloudflare Workers.