How I Built a Full Next.js Project Using AI Tools Step by Step: Complete Guide With Code

# Project initialization — standard Next.js setup
# AI was used for architecture decisions AFTER this step, not during
npx create-next-app@latest task-app \
  --typescript \
  --tailwind \
  --app \
  --src-dir \
  --import-alias '@/*'

cd task-app

# Add Prisma
npm install prisma @prisma/client
npx prisma init

# Add NextAuth
npm install next-auth @auth/prisma-adapter

# Add shadcn/ui
npx shadcn-ui@latest init

# Architecture Planning Prompt Used With Claude
---
Planning a Next.js 14 App Router project for a task management app.
Features: user auth, teams, projects, tasks with assignments and status.

Provide:
1. Recommended folder structure under src/ with reasoning
2. Which data relationships need Prisma relations vs IDs
3. Where to put server actions vs API routes for this use case
4. Auth strategy recommendation: NextAuth sessions vs JWT

Constraints:
- Single developer, so simplicity over scalability
- Deploying to Vercel, database on PlanetScale
- Want to avoid over-engineering at this stage

Do not write any code yet — provide structure and reasoning only.
---

// schema.prisma — final version after AI generation and review
// Two fields were added manually: TeamMember.role and Task.teamId

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider     = "mysql"
  url          = env("DATABASE_URL")
  relationMode = "prisma"
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
  teamMembers   TeamMember[]
  assignedTasks Task[]    @relation("AssignedTasks")
  createdTasks  Task[]    @relation("CreatedTasks")
  createdAt     DateTime  @default(now())
  updatedAt     DateTime  @updatedAt
}

model Team {
  id        String       @id @default(cuid())
  name      String
  slug      String       @unique
  members   TeamMember[]
  projects  Project[]
  tasks     Task[]       // tasks assigned to team not individual
  createdAt DateTime     @default(now())
  updatedAt DateTime     @updatedAt
}

model TeamMember {
  id        String   @id @default(cuid())
  userId    String
  teamId    String
  role      String   @default("member") // ADDED MANUALLY — AI missed this
  user      User     @relation(fields: [userId], references: [id])
  team      Team     @relation(fields: [teamId], references: [id])
  createdAt DateTime @default(now())

  @@unique([userId, teamId])
  @@index([userId])
  @@index([teamId])
}

model Project {
  id          String   @id @default(cuid())
  name        String
  description String?
  teamId      String
  team        Team     @relation(fields: [teamId], references: [id])
  tasks       Task[]
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt

  @@index([teamId])
}

model Task {
  id          String    @id @default(cuid())
  title       String
  description String?
  status      String    @default("todo")
  priority    String    @default("medium")
  projectId   String
  project     Project   @relation(fields: [projectId], references: [id])
  assigneeId  String?
  assignee    User?     @relation("AssignedTasks", fields: [assigneeId], references: [id])
  teamId      String?   // ADDED MANUALLY — for team assignments
  team        Team?     @relation(fields: [teamId], references: [id])
  creatorId   String
  creator     User      @relation("CreatedTasks", fields: [creatorId], references: [id])
  dueDate     DateTime?
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt

  @@index([projectId])
  @@index([assigneeId])
  @@index([teamId])
  @@index([creatorId])
}

// src/actions/tasks.ts
// First action written manually to establish pattern
// Subsequent actions AI-generated using this as context reference

'use server'

import { revalidatePath } from 'next/cache'
import { getServerSession }    from 'next-auth'
import { authOptions }         from '@/lib/auth'
import { prisma }              from '@/lib/prisma'
import type { Task }           from '@prisma/client'

type CreateTaskInput = {
  title:       string
  description?: string
  projectId:   string
  assigneeId?: string
  priority?:   string
  dueDate?:    Date
}

export async function createTask(input: CreateTaskInput) {
  const session = await getServerSession(authOptions)
  if (!session?.user?.id) {
    throw new Error('Unauthorized')
  }

  // Verify user has access to the project
  const project = await prisma.project.findFirst({
    where: {
      id:   input.projectId,
      team: { members: { some: { userId: session.user.id } } }
    }
  })

  if (!project) {
    throw new Error('Project not found or access denied')
  }

  const task = await prisma.task.create({
    data: {
      ...input,
      creatorId: session.user.id,
      status:    'todo'
    },
    include: {
      assignee: { select: { id: true, name: true, image: true } },
      creator:  { select: { id: true, name: true, image: true } }
    }
  })

  revalidatePath(`/projects/${input.projectId}`)
  return { success: true, task }
}

export async function updateTaskStatus(
  taskId: string,
  status: 'todo' | 'in_progress' | 'done'
) {
  const session = await getServerSession(authOptions)
  if (!session?.user?.id) throw new Error('Unauthorized')

  // Verify access through project team membership
  const task = await prisma.task.findFirst({
    where: {
      id:      taskId,
      project: { team: { members: { some: { userId: session.user.id } } } }
    },
    include: { project: true }
  })

  if (!task) throw new Error('Task not found or access denied')

  const updated = await prisma.task.update({
    where: { id: taskId },
    data:  { status }
  })

  revalidatePath(`/projects/${task.projectId}`)
  return { success: true, task: updated }
}