Building a Fullstack App
Work through a comprehensive project, integrating all learned concepts into a complete, fullstack Next.js application.
Fullstack App: Task Manager
Welcome to building a real-world fullstack application with Next.js 15! In this lesson, we'll integrate all the concepts you've learned to create a simple task manager.
Our app will allow users to:
- Sign in securely.
- View their personal tasks.
- Add new tasks.
- Mark tasks as complete.
This will demonstrate how Server Components, Client Components, Server Actions, data fetching, and authentication work together.
Project Init & Database Setup
First, let's set up our project and define the database schema using Prisma. We'll need models for users and tasks.
- Initialize Next.js:
npx create-next-app@latest my-fullstack-app - Install Prisma:
npm install prisma @prisma/client - Initialize Prisma:
npx prisma init --datasource-provider sqlite(or your preferred DB)
Here's a basic schema.prisma for our task manager:
// prisma/schema.prisma
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "sqlite" // or "postgresql", "mysql"
url = env("DATABASE_URL")
}
model User {
id String @id @default(cuid())
email String @unique
name String?
password String // Hashed password
tasks Task[]
}
model Task {
id String @id @default(cuid())
title String
completed Boolean @default(false)
userId String
user User @relation(fields: [userId], references: [id])
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}All lessons in this course
- Deployment to Vercel
- Building a Fullstack App
- Project Review & Best Practices
- Monitoring & Error Tracking in Production