A modern, full-stack task management application built with Next.js 15, featuring user authentication and comprehensive task management capabilities.

This Task Manager application allows authenticated users to efficiently manage their personal tasks. Users can create, view, update, and delete tasks with features like priority levels, status tracking, and advanced filtering options.

• 🔐 User Authentication: Secure sign-up and login system
• ✅ Task Management: Complete CRUD operations for tasks
• 🎯 Priority Levels: Categorize tasks as low, medium, or high priority
• 📊 Status Tracking: Mark tasks as pending or completed
• 🔍 Advanced Filtering: Sort and filter tasks by priority and status
• 📱 Responsive Design: Works seamlessly on desktop and mobile devices
• ⚡ Real-time Updates: Instant feedback with optimistic UI updates
• 🛡️ Data Validation: Comprehensive validation on both client and server
• 🔒 Task Privacy: Users can only access their own tasks

• Frontend: Next.js 15 (App Router), React, TypeScript
• UI Components: Shadcn/ui, Tailwind CSS
• Backend: Next.js API Routes
• Database: PostgreSQL
• ORM: Prisma
• Validation: Zod
• Authentication: JWT with secure HTTP-only cookies
• State Management: React hooks and context
• Form Handling: React Hook Form

• Node.js 18+
• PostgreSQL database
• npm package manager

git clone https://github.com/adnan425/task-manager
cd task-manager

npm install
# or
yarn install

Create a .env file in the root directory with the following variables:

DATABASE_URL="postgresql://neondb_owner:npg_kohf2WpULz9a@ep-shy-sea-a41r6vji-pooler.us-east-1.aws.neon.tech/neondb?sslmode=require"
JWT_SECRET="fsfrr32fsfrew"
NEXT_PUBLIC_API_URL="http://localhost:3000"

# Generate Prisma client (with custom output path)
npx prisma generate

# Run database migrations
npx prisma migrate dev

Note: The Prisma client is generated in src/generated/prisma as configured in the schema.

npm run dev
# or
yarn dev

The application will be available at http://localhost:3000

For testing purposes, you can use the following default credentials:

• Email: m.adnan6425@gmail.com
• Password: Adnan425@@

task-manager/
├── app/                    # Next.js 15 app directory
│   ├── (auth)/            # Authentication pages
│   │   ├── sign-in/      # Login page
│   │   └── sign-up/      # Registration page
│   ├── api/              # API routes
│   │   ├── sign-in/      # Login API endpoint
│   │   ├── sign-up/      # Registration API endpoint
│   │   └── tasks/        # Tasks CRUD API endpoints
│   └── globals.css       # Global styles
├── components/            # React components
│   ├── tasks/            # Task-related components
│   │   ├── TableHeader.tsx
│   │   ├── TableList.tsx
│   │   └── TaskForm.tsx
│   └── ui/               # Shadcn UI components
│       └── Header.tsx
├── generated/            # Generated files
│   └── prisma/          # Prisma client
├── hooks/                # Custom React hooks
│   ├── auth/            # Authentication hooks
│   ├── useSignIn.ts
│   ├── useSignUp.ts
│   └── useTasks.ts      # Tasks management hook
├── lib/                  # Utility functions and configurations
│   ├── axiosInstance.ts  # Axios configuration
│   ├── config.ts         # App configuration
│   ├── logoutAction.ts   # Logout server action
│   ├── prisma.ts        # Prisma client instance
│   ├── utils.ts         # Utility functions
│   └── withAuth.ts      # Authentication middleware
├── prisma/              # Database schema and migrations
│   └── schema.prisma    # Prisma schema definition
├── schemas/             # Zod validation schemas
└── middlewares/         # Middleware functions

• POST /api/sign-up - User registration
• POST /api/sign-in - User login

• GET /api/tasks - Get all tasks for authenticated user
• POST /api/tasks - Create a new task
• PUT /api/tasks/[id] - Update a specific task
• DELETE /api/tasks/[id] - Delete a specific task

• JWT tokens stored in HTTP-only cookies
• Secure password hashing with bcrypt
• Protected routes with middleware

• Zod schemas for request validation
• Client-side form validation
• Server-side data integrity checks

• Real-time updates with optimistic UI
• Advanced filtering and sorting
• Pagination for large datasets

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  password  String   // Hashed password
  firstName String
  lastName  String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  Task      Task[]
}

model Task {
  id          String   @id @default(cuid())
  title       String
  description String
  priority    Priority
  status      Status
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  userId      String
  user        User     @relation(fields: [userId], references: [id])
}

enum Priority {
  low
  medium
  high
}

enum Status {
  pending
  completed
}

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

1. Next.js 15 with App Router: Chosen for its excellent developer experience, built-in API routes, and server-side rendering capabilities.

2. Prisma ORM: Selected for its type safety, excellent TypeScript integration, and ease of use with PostgreSQL.

3. Shadcn/ui: Provides accessible, customizable components that integrate well with Tailwind CSS.

4. Zod Validation: Enables consistent validation across client and server with TypeScript integration.

5. JWT Authentication: Offers a stateless authentication solution that scales well.

This project is licensed under the MIT License - see the LICENSE file for details.

• Next.js team for the amazing framework
• Shadcn for the beautiful UI components
• Prisma team for the excellent ORM