## What We'll Build We'll create a simple Task Management app with the following features: - Create tasks - Read/Display tasks - Update task status - Delete tasks - Modern UI with Tailwind CSS ## Prerequisites - Node.js (v16 or later) - MongoDB Atlas account (free tier works great) - Basic knowledge of React/Next.js - Text editor (VS Code recommended) ## Step 1: Project Setup ### Initialize Next.js Project ```bash npx create-next-app@latest prisma-todo-app cd prisma-todo-app ``` When prompted, select: - `TypeScript`: Yes - `ESLint`: Yes - `Tailwind` CSS: Yes - `App Router`: Yes - Customize default import alias: No ### Install Prisma and Dependencies ```bash # Install Prisma npm install prisma @prisma/client # Install additional dependencies npm install @types/node # Initialize Prisma npx prisma init ``` ## Step 2: MongoDB Setup ### Create MongoDB Atlas Cluster 1. Go to [MongoDB Atlas](https://www.mongodb.com/cloud/atlas) 2. Create a free account 3. Create a new cluster (choose the free M0 tier) 4. Create a database user with read/write permissions 5. Add your IP address to the IP whitelist (or use 0.0.0.0/0 for development) 6. Get your connection string ### Environment Configuration Update your `.env` file: ```env # Database DATABASE_URL="mongodb+srv://username:password@cluster.mongodb.net/taskdb?retryWrites=true&w=majority" # Replace username, password, and cluster with your actual values ``` ## Step 3: Prisma Schema Setup The Prisma schema is the heart of your application - it defines your data structure and how Prisma interacts with your database. ### Understanding the Schema File Structure Update `prisma/schema.prisma`: ```prisma // 1. GENERATOR BLOCK - Tells Prisma what client to generate generator client { provider = "prisma-client-js" } // 2. DATASOURCE BLOCK - Database connection configuration datasource db { provider = "mongodb" // Database type url = env("DATABASE_URL") // Connection string from .env } // 3. MODEL BLOCK - Your data structure definition model Task { id String @id @default(auto()) @map("_id") @db.ObjectId // DATA FIELDS title String // Required string field description String? // Optional string completed Boolean @default(false) // Boolean with default value // TIMESTAMP FIELDS createdAt DateTime @default(now()) // Auto-set creation time updatedAt DateTime @updatedAt // Auto-update modification time // COLLECTION MAPPING @@map("tasks") // MongoDB collection name } ``` ### Breaking Down Each Component #### 1. Generator Block ```prisma generator client { provider = "prisma-client-js" } ``` **What it does:** - Tells Prisma to generate a JavaScript/TypeScript client - This client contains all the methods you'll use to interact with your database - Alternative providers exist for other languages (Python, Go, etc.) #### 2. Datasource Block ```prisma datasource db { provider = "mongodb" url = env("DATABASE_URL") } ``` **What it does:** - `provider = "mongodb"` - Tells Prisma you're using MongoDB (not PostgreSQL, MySQL, etc.) - `url = env("DATABASE_URL")` - Reads connection string from environment variables - This is where Prisma learns how to connect to your specific database #### 3. Model Definition - Field by Field **The ID Field (MongoDB Special Case):** ```prisma id String @id @default(auto()) @map("_id") @db.ObjectId ``` Let's break this down piece by piece: - `id` - The field name in your Prisma model - `String` - The TypeScript type this will become - `@id` - Marks this as the primary key - `@default(auto())` - MongoDB will auto-generate the value - `@map("_id")` - Maps to MongoDB's required `_id` field - `@db.ObjectId` - Stores as MongoDB's `ObjectId` type **Regular Data Fields:** ```prisma title String // Required field description String? // Optional field (note the ?) completed Boolean @default(false) // Has a default value ``` **Timestamp Fields:** ```prisma createdAt DateTime @default(now()) // Set once when created updatedAt DateTime @updatedAt // Updates automatically on changes ``` **Collection Mapping:** ```prisma @@map("tasks") ``` - Maps your `Task` model to a MongoDB collection named "tasks" - Without this, it would default to "Task" (capitalized) ### What Happens When You Run the Commands #### 1. `npx prisma generate` ```bash npx prisma generate ``` **This command:** - Reads your `schema.prisma` file - Generates a type-safe client in `node_modules/.prisma/client/` - Creates TypeScript types for your models - Provides methods for all CRUD operations **Files created:** ``` node_modules/.prisma/client/ ├── index.js # Main client code ├── index.d.ts # TypeScript definitions ├── runtime/ # Prisma runtime code └── schema.prisma # Copy of your schema ``` **What you get:** ```typescript // These types are automatically generated: type Task = { id: string title: string description: string | null completed: boolean createdAt: Date updatedAt: Date } // These methods are automatically available: prisma.task.create() prisma.task.findMany() prisma.task.findUnique() prisma.task.update() prisma.task.delete() ``` #### 2. `npx prisma db push` ```bash npx prisma db push ``` **This command:** - Connects to your MongoDB database - Creates the "tasks" collection if it doesn't exist - Sets up any indexes or constraints **What happens in MongoDB:** 1. Connects to your MongoDB Atlas cluster 2. Creates database `"taskdb"` (from your connection string) 3. Creates collection "tasks" 4. The collection is ready to receive documents #### 3. Test database connection: ```bash npx prisma studio ``` This opens a GUI to view your database. ## Step 4: Prisma Client Setup The Prisma Client is your gateway to the database. This step sets up a singleton pattern to prevent multiple Prisma Client instances in development. Create `lib/prisma.ts`: ```typescript import { PrismaClient } from '@prisma/client' // Step 1: Type the global object const globalForPrisma = globalThis as unknown as { prisma: PrismaClient | undefined } // Step 2: Use existing client or create new one export const prisma = globalForPrisma.prisma ?? new PrismaClient() // Step 3: Store client globally in development if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma ``` ### Breaking Down Each Line #### Line 1: Import the Generated Client ```typescript import { PrismaClient } from '@prisma/client' ``` - This imports the client that was generated when you ran `npx prisma generate` - It contains all your type-safe database methods - It knows about your `Task` model and its fields #### Line 2-4: Global Type Definition ```typescript const globalForPrisma = globalThis as unknown as { prisma: PrismaClient | undefined } ``` **What's happening:** - `globalThis` - A global object that persists across hot reloads - `as unknown as` - TypeScript casting to add our custom property - `prisma: PrismaClient | undefined` - Defines the type of our global property **Why we need this:** - TypeScript doesn't know about custom properties on `globalThis` - We need to tell it that `globalThis.prisma` might exist #### Line 6: The Core Logic ```typescript export const prisma = globalForPrisma.prisma ?? new PrismaClient() ``` **This line uses the `nullish coalescing operator` (`??`):** - If `globalForPrisma.prisma` exists → use it - If `globalForPrisma.prisma` is `undefined` → create new `PrismaClient()` **Translation:** "Give me the existing Prisma client, or create a new one if none exists" #### Line 8-9: Development Storage ```typescript if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma ``` **Why only in development:** - Production environments don't have hot reloading - In production, the module is loaded once and stays loaded - Global storage is only needed to survive development hot reloads ## Step 5: API Routes ### Create Tasks API Route Create `app/api/tasks/route.ts`: ```typescript import { NextRequest, NextResponse } from 'next/server' import { prisma } from '@/lib/prisma' // GET - Fetch all tasks export async function GET() { try { const tasks = await prisma.task.findMany({ orderBy: { createdAt: 'desc' } }) return NextResponse.json(tasks) } catch (error) { return NextResponse.json( { error: 'Failed to fetch tasks' }, { status: 500 } ) } } // POST - Create a new task export async function POST(request: NextRequest) { try { const body = await request.json() const { title, description } = body if (!title) { return NextResponse.json( { error: 'Title is required' }, { status: 400 } ) } const task = await prisma.task.create({ data: { title, description: description || null } }) return NextResponse.json(task, { status: 201 }) } catch (error) { return NextResponse.json( { error: 'Failed to create task' }, { status: 500 } ) } } ``` ### Create Individual Task API Route Create `app/api/tasks/[id]/route.ts`: ```typescript import { NextRequest, NextResponse } from 'next/server' import { prisma } from '@/lib/prisma' // GET - Fetch single task export async function GET( request: NextRequest, { params }: { params: { id: string } } ) { try { const task = await prisma.task.findUnique({ where: { id: params.id } }) if (!task) { return NextResponse.json( { error: 'Task not found' }, { status: 404 } ) } return NextResponse.json(task) } catch (error) { return NextResponse.json( { error: 'Failed to fetch task' }, { status: 500 } ) } } // PUT - Update task export async function PUT( request: NextRequest, { params }: { params: { id: string } } ) { try { const body = await request.json() const { title, description, completed } = body const task = await prisma.task.update({ where: { id: params.id }, data: { ...(title && { title }), ...(description !== undefined && { description }), ...(completed !== undefined && { completed }) } }) return NextResponse.json(task) } catch (error) { return NextResponse.json( { error: 'Failed to update task' }, { status: 500 } ) } } // DELETE - Delete task export async function DELETE( request: NextRequest, { params }: { params: { id: string } } ) { try { await prisma.task.delete({ where: { id: params.id } }) return NextResponse.json({ message: 'Task deleted successfully' }) } catch (error) { return NextResponse.json( { error: 'Failed to delete task' }, { status: 500 } ) } } ``` **Conditional Update Logic:** ```typescript data: { ...(title && { title }), ...(description !== undefined && { description }), ...(completed !== undefined && { completed }) } ``` This uses **spread operator with conditional logic**: - **`...(title && { title })`**: Only includes `title` if it's truthy (not empty string, null, undefined) - **`...(description !== undefined && { description })`**: Includes `description` if it's explicitly provided (even if empty string or null) - **`...(completed !== undefined && { completed })`**: Includes `completed` if provided (even if false) ## Step 6: Frontend Components ### Task Form Component Create `components/TaskForm.tsx`: ```typescript 'use client' import { useState } from 'react' interface TaskFormProps { onTaskCreated: () => void } export default function TaskForm({ onTaskCreated }: TaskFormProps) { const [title, setTitle] = useState('') const [description, setDescription] = useState('') const [isLoading, setIsLoading] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!title.trim()) return setIsLoading(true) try { const response = await fetch('/api/tasks', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title, description }) }) if (response.ok) { setTitle('') setDescription('') onTaskCreated() } } catch (error) { console.error('Failed to create task:', error) } finally { setIsLoading(false) } } return (

Add New Task

setTitle(e.target.value)} className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" required />

setDescription(e.target.value)}
          className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent h-24 resize-none"
        />
      </div>
      
      <button
        type="submit"
        disabled={isLoading}
        className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold py-3 px-4 rounded-lg transition duration-200"
      >
        {isLoading ? 'Adding...' : 'Add Task'}
      </button>
    </form>
  )
}
```

### Task List Component

Create `components/TaskList.tsx`:

```typescript
'use client'

import { useState, useEffect } from 'react'

interface Task {
  id: string
  title: string
  description: string | null
  completed: boolean
  createdAt: string
  updatedAt: string
}

interface TaskListProps {
  refreshTrigger: number
}

export default function TaskList({ refreshTrigger }: TaskListProps) {
  const [tasks, setTasks] = useState<Task[]>([])
  const [loading, setLoading] = useState(true)

const fetchTasks = async () => {
    try {
      const response = await fetch('/api/tasks')
      if (response.ok) {
        const data = await response.json()
        setTasks(data)
      }
    } catch (error) {
      console.error('Failed to fetch tasks:', error)
    } finally {
      setLoading(false)
    }
  }

useEffect(() => {
    fetchTasks()
  }, [refreshTrigger])

const toggleComplete = async (id: string, completed: boolean) => {
    try {
      const response = await fetch(`/api/tasks/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ completed: !completed })
      })

if (response.ok) {
        fetchTasks()
      }
    } catch (error) {
      console.error('Failed to update task:', error)
    }
  }

const deleteTask = async (id: string) => {
    if (!confirm('Are you sure you want to delete this task?')) return

try {
      const response = await fetch(`/api/tasks/${id}`, {
        method: 'DELETE'
      })

if (response.ok) {
        fetchTasks()
      }
    } catch (error) {
      console.error('Failed to delete task:', error)
    }
  }

if (loading) {
    return <div className="text-center py-8">Loading tasks...</div>
  }

if (tasks.length === 0) {
    return (
      <div className="text-center py-8 text-gray-500">
        No tasks yet. Add your first task above!
      </div>
    )
  }

return (
    <div className="space-y-4">
      {tasks.map((task) => (
        <div
          key={task.id}
          className={`bg-white p-6 rounded-lg shadow-md border-l-4 ${
            task.completed ? 'border-green-500 bg-green-50' : 'border-blue-500'
          }`}
        >
          <div className="flex items-start justify-between">
            <div className="flex-1">
              <h3 className={`text-lg font-semibold ${
                task.completed ? 'line-through text-gray-600' : 'text-gray-800'
              }`}>
                {task.title}
              </h3>
              {task.description && (
                <p className={`mt-2 ${
                  task.completed ? 'text-gray-500' : 'text-gray-600'
                }`}>
                  {task.description}
                </p>
              )}
              <p className="text-sm text-gray-400 mt-2">
                Created: {new Date(task.createdAt).toLocaleDateString()}
              </p>
            </div>
            
            <div className="flex space-x-2 ml-4">
              <button
                onClick={() => toggleComplete(task.id, task.completed)}
                className={`px-3 py-1 rounded-full text-sm font-medium transition duration-200 ${
                  task.completed
                    ? 'bg-yellow-100 hover:bg-yellow-200 text-yellow-800'
                    : 'bg-green-100 hover:bg-green-200 text-green-800'
                }`}
              >
                {task.completed ? 'Undo' : 'Complete'}
              </button>
              
              <button
                onClick={() => deleteTask(task.id)}
                className="px-3 py-1 bg-red-100 hover:bg-red-200 text-red-800 rounded-full text-sm font-medium transition duration-200"
              >
                Delete
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}
```

### Main Page

Update `app/page.tsx`:

```typescript
'use client'

import { useState } from 'react'
import TaskForm from '@/components/TaskForm'
import TaskList from '@/components/TaskList'

export default function Home() {
  const [refreshTrigger, setRefreshTrigger] = useState(0)

const handleTaskCreated = () => {
    setRefreshTrigger(prev => prev + 1)
  }

return (
    <main className="min-h-screen bg-gray-100">
      <div className="container mx-auto px-4 py-8 max-w-4xl">
        <header className="text-center mb-8">
          <h1 className="text-4xl font-bold text-gray-800 mb-2">
            Task Manager
          </h1>
          <p className="text-gray-600">
            Built with Next.js, Prisma, and MongoDB
          </p>
        </header>

<TaskForm onTaskCreated={handleTaskCreated} />
        <TaskList refreshTrigger={refreshTrigger} />
      </div>
    </main>
  )
}
```

## Step 7: Running the Application

### Start Development Server

```bash
npm run dev
```

Visit `http://localhost:3000` to see your application!

## Step 8: Testing CRUD Operations

1. **Create**: Use the form to add new tasks
2. **Read**: Tasks display automatically
3. **Update**: Click "Complete" to toggle task status
4. **Delete**: Click "Delete" to remove tasks

## Key Prisma Concepts Learned

### 1. Schema Definition

```prisma
model Task {
  id          String   @id @default(auto()) @map("_id") @db.ObjectId
  title       String
  description String?
  completed   Boolean  @default(false)
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}
```

### 2. CRUD Operations

```typescript
// Create
const task = await prisma.task.create({
  data: { title, description }
})

// Read
const tasks = await prisma.task.findMany()
const task = await prisma.task.findUnique({ where: { id } })

// Update
const task = await prisma.task.update({
  where: { id },
  data: { completed: true }
})

// Delete
await prisma.task.delete({ where: { id } })
```

### 3. MongoDB-Specific Features

- ObjectId handling with `@db.ObjectId`
- Collection mapping with `@@map("tasks")`
- Proper ID field setup for MongoDB

## Advanced Features to Explore

### 1. Filtering and Sorting

```typescript
// Get only completed tasks
const completedTasks = await prisma.task.findMany({
  where: { completed: true }
})

// Search tasks by title
const searchResults = await prisma.task.findMany({
  where: {
    title: {
      contains: 'search term',
      mode: 'insensitive'
    }
  }
})
```

### 2. Pagination

```typescript
const tasks = await prisma.task.findMany({
  skip: 0,
  take: 10,
  orderBy: { createdAt: 'desc' }
})
```

### 3. Relations (for future expansion)

```prisma
model User {
  id    String @id @default(auto()) @map("_id") @db.ObjectId
  email String @unique
  tasks Task[]
}

model Task {
  id     String @id @default(auto()) @map("_id") @db.ObjectId
  title  String
  userId String @db.ObjectId
  user   User   @relation(fields: [userId], references: [id])
}
```

## Best Practices

1. **Always use environment variables** for database connections
2. **Use Prisma Client singleton** to avoid connection issues
3. **Handle errors gracefully** in API routes
4. **Validate input data** before database operations
5. **Use TypeScript** for better type safety
6. **Generate Prisma Client** after schema changes

## Deployment Considerations

### 1. Environment Variables

Set `DATABASE_URL` in your deployment platform

### 2. Prisma Generate

Add to your build script:

```json
{
  "scripts": {
    "build": "prisma generate && next build"
  }
}
```

### 3. Database Connection

Ensure your MongoDB cluster allows connections from your deployment platform's IP ranges.

## Conclusion

You've successfully built a complete CRUD application with Prisma, Next.js, and MongoDB! You've learned:

- Setting up Prisma with MongoDB
- Creating schemas and generating clients
- Implementing all CRUD operations
- Building a React frontend
- Connecting everything with API routes

This foundation will help you build more complex applications with Prisma. The ORM makes database operations intuitive while maintaining type safety throughout your application.

---

## 🔗 Project Repository

You can check out the complete source code for this project here:

🗂️ [GitHub Repository](https://github.com/Arifulhaque-02128/prisma-todo-app)</article></body></html>