A modern todo management application built with Next.js 14, TypeScript, and PostgreSQL. This project demonstrates full-stack web development with API routes, database integration, and modern React patterns.

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Database: PostgreSQL
• ORM: Prisma
• Styling: Tailwind CSS
• Validation: Yup
• Runtime: Node.js 20.x

• ✅ Full CRUD operations for todos
• 📊 RESTful API endpoints
• 🗃️ Database integration with Prisma ORM
• 🎨 Modern UI with Tailwind CSS
• 🔧 TypeScript for type safety
• 📦 Docker containerized database
• 🌱 Database seeding functionality

• Node.js 20.x
• npm 10.x
• Docker and Docker Compose

1. Start the database

docker compose up -d

2. Copy environment template

cp .env.template .env

3. Configure environment variables

⚠️ IMPORTANT: If running the app with npm run dev (outside Docker), ensure DATABASE_URL in .env uses localhost:

DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres"

If running the app inside Docker, use the container name:

DATABASE_URL="postgresql://postgres:postgres@todos-db:5432/postgres"

4. Install dependencies

npm install

5. Setup database schema

npx prisma db push
npx prisma generate

6. Start development server

npm run dev

7. Seed the database (optional)

Visit http://localhost:3000/api/seed or run the endpoint to populate with sample data.

The application uses a simple Todo model:

model Todo {
  id          String   @id @default(uuid())
  description String
  completed   Boolean  @default(false)
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

npx prisma init          # Initialize Prisma (already done)
npx prisma migrate dev   # Create and apply migrations
npx prisma generate      # Generate Prisma Client
npx prisma db push       # Push schema changes to database
npx prisma studio        # Open Prisma Studio (database GUI)

├── prisma/
│   └── schema.prisma          # Database schema
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   ├── todos/         # Todo CRUD endpoints
│   │   │   └── seed/          # Database seeding
│   │   ├── globals.css        # Global styles
│   │   ├── layout.tsx         # Root layout
│   │   └── page.tsx           # Home page
│   └── lib/
│       └── prisma.ts          # Prisma client configuration
├── docker-compose.yml         # PostgreSQL container setup
└── .env                       # Environment variables