Todo App with Next.js, TypeScript, and Cloudflare D1

A modern, full-stack todo application built with Next.js, TypeScript, Tailwind CSS, and Cloudflare D1 database using Prisma ORM.

Features

• ✅ CRUD Operations: Create, read, update, and delete todos
• 🎯 Priority System: Set priorities (LOW, MEDIUM, HIGH) with color coding
• ✏️ Edit in Place: Click on any todo to edit directly
• 🎨 Modern UI: Responsive design with Tailwind CSS
• ⚡ Fast Database: Powered by Cloudflare D1 and Prisma ORM
• 🔄 Real-time Updates: Optimistic UI updates with error handling
• 📱 Mobile Friendly: Responsive design for all devices

Tech Stack

• Frontend: Next.js 15, React 19, TypeScript
• Styling: Tailwind CSS v4
• Database: Cloudflare D1 (SQLite-compatible)
• ORM: Prisma with D1 adapter
• Icons: Lucide React
• Deployment: Cloudflare Pages
• Deployment: Cloudflare Pages (recommended)

Getting Started

Prerequisites

• Node.js 18.18 or later
• npm or yarn
• Cloudflare account (for production D1 database)

Local Development Setup

1. Clone and install dependencies:

   npm install

2. Set up the database:

   # Generate Prisma client
   npx prisma generate
   
   # Create and migrate the local database
   npx prisma db push
   
   # Seed with sample data
   npm run db:seed

3. Start the development server:

   npm run dev

4. Open your browser and navigate to http://localhost:3000

Database Schema

The todo application uses a simple schema with the following model:

model Todo {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  completed Boolean  @default(false)
  priority  Priority @default(MEDIUM)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

enum Priority {
  LOW
  MEDIUM
  HIGH
}

Production Setup with Cloudflare D1

1. Create a D1 Database

npx wrangler d1 create your-database-name

This will output database configuration like:

[[d1_databases]]
binding = "DB"
database_name = "your-database-name"
database_id = "your-database-id"

2. Update wrangler.toml

Add the database configuration to your wrangler.toml:

name = "your-app-name"
compatibility_date = "2024-12-05"

[[d1_databases]]
binding = "DB"
database_name = "your-database-name"
database_id = "your-database-id"

3. Create Migration SQL

Generate SQL migration from your Prisma schema:

npx prisma migrate diff \
  --from-empty \
  --to-schema-datamodel ./prisma/schema.prisma \
  --script \
  --output migrations/0001_initial.sql

4. Apply Migration to D1

# Create migration file
npx wrangler d1 migrations create your-database-name initial_schema

# Copy the generated SQL to the migration file
# Then apply to local D1
npx wrangler d1 migrations apply your-database-name --local

# Apply to remote D1
npx wrangler d1 migrations apply your-database-name --remote

5. Update Environment Variables

For production, update your environment variables:

# Get these from Cloudflare dashboard
CLOUDFLARE_ACCOUNT_ID=your-account-id
CLOUDFLARE_DATABASE_ID=your-database-id
CLOUDFLARE_D1_TOKEN=your-api-token

6. Update Prisma Configuration

Create a prisma.config.ts file for production D1 support:

import path from 'node:path'
import type { PrismaConfig } from 'prisma'
import { PrismaD1HTTP } from '@prisma/adapter-d1'
import 'dotenv/config'

type Env = {
  CLOUDFLARE_D1_TOKEN: string
  CLOUDFLARE_ACCOUNT_ID: string
  CLOUDFLARE_DATABASE_ID: string
}

export default {
  earlyAccess: true,
  schema: path.join('prisma', 'schema.prisma'),
  migrate: {
    async adapter(env) {
      return new PrismaD1HTTP({
        CLOUDFLARE_D1_TOKEN: env.CLOUDFLARE_D1_TOKEN,
        CLOUDFLARE_ACCOUNT_ID: env.CLOUDFLARE_ACCOUNT_ID,
        CLOUDFLARE_DATABASE_ID: env.CLOUDFLARE_DATABASE_ID,
      })
    },
  },
} satisfies PrismaConfig<Env>

7. Deploy to Cloudflare Pages

1. Connect your repository to Cloudflare Pages
2. Set the build command: npm run build
3. Set the output directory: .next
4. Add environment variables in the Cloudflare Pages dashboard
5. Deploy!

API Endpoints

• GET /api/todos - Fetch all todos
• POST /api/todos - Create a new todo
• PATCH /api/todos/[id] - Update a todo
• DELETE /api/todos/[id] - Delete a todo

Project Structure

src/
├── app/
│   ├── api/todos/          # API routes
│   ├── globals.css         # Global styles
│   ├── layout.tsx          # Root layout
│   └── page.tsx           # Home page
├── components/
│   ├── TodoForm.tsx       # Todo creation form
│   ├── TodoItem.tsx       # Individual todo item
│   └── TodoList.tsx       # Main todo list component
├── lib/
│   └── prisma.ts          # Prisma client setup
└── types/
    └── todo.ts            # TypeScript types

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run db:seed - Seed database with sample data

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

MIT License - see LICENSE file for details.

Resources

• Next.js Documentation
• Prisma Documentation
• Cloudflare D1 Documentation
• Tailwind CSS Documentation