📋 Collaborative-TODO - Collaborative Task Management Platform

A modern, real-time collaborative task management application built with Next.js 15, featuring intuitive list organization, team collaboration, and seamless user experience.

✨ Features

🔐 Secure Authentication

• Clerk Integration: Secure user authentication and management
• Protected Routes: Middleware-based route protection
• User Profiles: Integrated user profile management

📝 Smart Task Management

• List Organization: Create and organize tasks into custom lists
• Task Properties: Add titles, descriptions, priorities (Low/Medium/High), and status tracking
• Progress Tracking: Visual progress indicators with completion percentages
• Task Filtering: Easy task management with status updates (Todo, In Progress, Completed)

👥 Real-time Collaboration

• List Sharing: Share lists with team members via email

• Permission Management: Granular permissions (View/Edit access)

• Shared Indicators: Clear visual indicators for shared lists

🎨 Modern User Interface

• Responsive Design: Mobile-first, fully responsive interface
• Clean UI: Modern design with Tailwind CSS
• Interactive Elements: Smooth animations and transitions
• Dark Theme Support: Coming soon

📊 Advanced Features

• Pagination: Efficient data loading for large datasets
• Search & Filter: Quick task and list discovery
• Data Persistence: Reliable PostgreSQL database with Prisma ORM
• Type Safety: Full TypeScript support with tRPC

🚀 Tech Stack

Frontend

• Next.js 15 - React framework with App Router
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first CSS framework
• Lucide React - Beautiful icons

Backend & Database

• tRPC - End-to-end typesafe APIs
• Prisma - Next-generation ORM
• PostgreSQL - Robust relational database

Authentication & Real-time

• Clerk - Complete authentication solution

State & Data Management

• TanStack Query - Powerful data synchronization
• Zod - TypeScript-first schema validation

🛠️ Installation & Setup

Prerequisites

• Node.js (v18 or higher)
• npm or yarn or pnpm
• PostgreSQL database
• Clerk account for authentication

1. Clone the Repository

git clone <repository-url>

2. Install Dependencies

npm install
# or
yarn install
# or
pnpm install

3. Environment Configuration

Create a .env.local file in the root directory:

# Database
DATABASE_URL="postgresql://username:password@localhost:5432/"

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

4. Database Setup

# Generate Prisma client
npx prisma generate

# Run database migrations
npx prisma db push

# Optional: Seed the database
npx prisma db seed

5. Run the Application

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 in your browser.

📱 Usage Guide

Getting Started

1. Sign Up/Sign In: Create an account or sign in using Clerk authentication
2. Create Your First List: Click "Add List" on the dashboard
3. Add Tasks: Click into a list and start adding tasks with details
4. Collaborate: Share lists with team members using their email addresses

Managing Tasks

• Create Tasks: Click "Add Task" and fill in details (title, description, priority, status)
• Update Status: Toggle between Todo, In Progress, and Completed
• Set Priority: Assign Low, Medium, or High priority levels
• Edit/Delete: Use the action buttons to modify or remove tasks

Collaboration Features

• Share Lists: Click the share button and enter collaborator emails
• Set Permissions: Choose between View (read-only) or Edit access
• Monitor Shared Lists: Shared lists are clearly marked with team indicators

🏗️ Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── (auth)/            # Authentication routes
│   ├── api/               # API routes
│   ├── dashboard/         # Dashboard pages
│   └── layout.tsx         # Root layout
├── components/            # Reusable UI components
│   ├── dashboard/         # Dashboard-specific components
│   ├── ui/               # Generic UI components
│   └── providers.tsx      # Context providers
├── hooks/                 # Custom React hooks
├── server/               # tRPC server configuration
│   └── routers/          # API route handlers
├── types/                # TypeScript type definitions
└── utils/                # Utility functions

🔧 API Documentation

tRPC Routers

Lists Router (/src/server/routers/lists.ts)

• getAll - Fetch paginated user lists
• getById - Get specific list details
• create - Create new list
• delete - Delete list (owner only)

Tasks Router (/src/server/routers/tasks.ts)

• getByListId - Fetch paginated list tasks
• create - Create new task
• update - Update task details
• delete - Delete task
• toggleComplete - Toggle task completion status

Share Router (/src/server/routers/share.ts)

• shareList - Share list with user
• getSharedUsers - Get list collaborators
• removeUserFromList - Remove collaborator access
• updatePermission - Update user permissions

🎯 Development Guidelines

Code Style

• TypeScript: Strict type checking enabled
• ESLint: Code linting with Next.js configuration
• Prettier: Code formatting (recommended)

Component Patterns

• Server Components: Used for static content and data fetching
• Client Components: Used for interactive features
• Custom Hooks: Business logic abstraction
• Error Boundaries: Graceful error handling

Database Best Practices

• Prisma Schema: Centralized data modeling
• Migrations: Version-controlled database changes
• Indexes: Optimized query performance
• Relations: Properly defined foreign keys and cascading

Built with ❤️ using Next.js and modern web technologies