React Tutorial #25: Full-Stack Project — Task Manager App
You have reached the final tutorial. Let’s build a complete full-stack Task Manager that uses everything you have learned in this series. What We Are Building A task manager app where users can: Sign in with GitHub Create, complete, and delete tasks See only their own tasks Filter tasks by status Tech stack: Next.js 15 (App Router) TypeScript Prisma v6 + PostgreSQL NextAuth.js v5 (GitHub OAuth) Tailwind CSS v4 Project Setup npx create-next-app@latest taskmanager # Choose: TypeScript, ESLint, Tailwind CSS, src/, App Router, Turbopack cd taskmanager npm install prisma @prisma/client next-auth@beta npm install @hookform/resolvers react-hook-form zod npx prisma init Database Schema // prisma/schema.prisma generator client { provider = "prisma-client-js" } datasource db { provider = "postgresql" url = env("DATABASE_URL") } model User { id String @id @default(cuid()) email String @unique emailVerified DateTime? name String? image String? createdAt DateTime @default(now()) tasks Task[] accounts Account[] sessions Session[] } model Task { id String @id @default(cuid()) title String description String? done Boolean @default(false) priority Priority @default(MEDIUM) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt userId String user User @relation(fields: [userId], references: [id], onDelete: Cascade) } enum Priority { LOW MEDIUM HIGH } Notice we use String @id @default(cuid()) instead of Int @id @default(autoincrement()). cuid() generates random IDs that are safe to use in URLs without exposing sequential numbers. ...