📋 Task Board Application

A modern, full-stack task board application built with Next.js 15, React 19, TypeScript, and PostgreSQL. This application provides a beautiful and intuitive interface for managing tasks, boards, and columns with drag-and-drop functionality.

✨ Features

• 🔐 Authentication System: JWT-based authentication with secure password hashing
• 📊 Multiple Boards: Create and manage multiple task boards
• 📝 Task Management: Create, edit, and delete tasks with descriptions
• ✅ Subtasks: Break down tasks into smaller, manageable subtasks
• 🎨 Customizable Columns: Create custom columns with different colors
• 🖱️ Drag & Drop: Intuitive drag-and-drop interface for task management
• 🌓 Dark Mode: Built-in dark mode support with next-themes
• 📱 Responsive Design: Fully responsive UI that works on all devices
• 🚀 Server Actions: Utilizes Next.js 15 server actions for optimal performance
• 🎯 Type-Safe: Full TypeScript support throughout the application

🛠️ Tech Stack

Frontend

• Next.js 15 - React framework with App Router
• React 19 - Latest React with concurrent features
• TypeScript 5 - Type-safe JavaScript
• Tailwind CSS 4 - Utility-first CSS framework
• Radix UI - Accessible component primitives
• dnd-kit - Modern drag-and-drop toolkit
• React Hook Form - Performant form validation
• Zod - TypeScript-first schema validation
• Sonner - Beautiful toast notifications
• Lucide React - Icon library

Backend

• Next.js API Routes - RESTful API endpoints
• Drizzle ORM - TypeScript ORM for PostgreSQL
• PostgreSQL - Relational database
• JWT - JSON Web Tokens for authentication
• bcryptjs - Password hashing
• Pino - Fast JSON logger

Architecture Pattern

• Repository Pattern - Data access layer abstraction
• Controller Pattern - Business logic separation
• Service Layer - Reusable business logic
• Type-Safe API - End-to-end type safety

📁 Project Structure

task-board/
├── app/                          # Next.js App Router
│   ├── actions/                  # Server actions
│   │   └── auth.ts              # Authentication actions
│   ├── api/                     # API routes
│   │   ├── boards/              # Board endpoints
│   │   ├── columns/             # Column endpoints
│   │   ├── tasks/               # Task endpoints
│   │   └── subtasks/            # Subtask endpoints
│   ├── auth/                    # Authentication pages
│   │   ├── login/
│   │   └── register/
│   ├── dashboard/               # Main dashboard
│   ├── layout.tsx               # Root layout
│   └── page.tsx                 # Home page
├── components/                   # React components
│   ├── dashboard/               # Dashboard-specific components
│   │   ├── board-view.tsx
│   │   ├── column-view.tsx
│   │   ├── header.tsx
│   │   ├── sidebar.tsx
│   │   └── task-card.tsx
│   ├── modals/                  # Modal dialogs
│   │   ├── board-modal.tsx
│   │   ├── column-modal.tsx
│   │   ├── task-modal.tsx
│   │   ├── task-details-modal.tsx
│   │   └── delete-modal.tsx
│   ├── ui/                      # Reusable UI components
│   └── providers.tsx            # App providers
├── controllers/                  # Business logic controllers
│   ├── board.controller.ts
│   ├── column.controller.ts
│   ├── task.controller.ts
│   ├── subtask.controller.ts
│   └── index.ts
├── repositories/                 # Data access layer
│   ├── board.repository.ts
│   ├── column.repository.ts
│   ├── task.repository.ts
│   ├── subtask.repository.ts
│   └── user.repository.ts
├── db/                          # Database configuration
│   ├── schemas/                 # Database schemas
│   │   ├── users.schema.ts
│   │   ├── boards.schema.ts
│   │   ├── columns.schema.ts
│   │   ├── tasks.schema.ts
│   │   ├── subtasks.schema.ts
│   │   ├── relations.ts
│   │   └── index.ts
│   ├── schema.ts               # Schema exports
│   └── index.ts                # Database connection
├── hooks/                       # Custom React hooks
│   ├── use-boards.ts
│   ├── use-columns.ts
│   ├── use-tasks.ts
│   └── use-subtasks.ts
├── lib/                        # Utility libraries
│   ├── auth.ts                 # Server-side auth
│   ├── auth-client.ts          # Client-side auth
│   ├── jwt.ts                  # JWT utilities
│   ├── logger.ts               # Logging utilities
│   ├── types.ts                # TypeScript types
│   ├── utils.ts                # Helper functions
│   └── validations.ts          # Zod schemas
├── scripts/                    # Utility scripts
│   └── seed.ts                # Database seeding
├── drizzle.config.ts          # Drizzle ORM config
├── middleware.ts              # Next.js middleware
├── next.config.ts             # Next.js configuration
├── package.json               # Dependencies
├── tailwind.config.ts         # Tailwind configuration
└── tsconfig.json              # TypeScript configuration

🚀 Quick Start

See QUICKSTART.md for detailed setup instructions.

Prerequisites

• Node.js 20.x or higher
• PostgreSQL 14.x or higher
• npm or yarn package manager

Installation

1. Clone the repository

   git clone <repository-url>
   cd task-board

2. Install dependencies

   npm install

3. Setup environment variables

   cp .env.example .env.local

   Edit .env.local and add your database URL:

   DATABASE_URL=postgresql://user:password@localhost:5432/taskboard
   JWT_SECRET=your-secret-key-here

4. Setup database

   # Generate migrations
   npm run db:generate
   
   # Push schema to database
   npm run db:push
   
   # (Optional) Seed with sample data
   npm run db:seed

5. Run development server

   npm run dev

6. Open your browser Navigate to http://localhost:3000

📖 Documentation

• Quick Start Guide - Get up and running quickly
• Architecture Documentation - Detailed system architecture
• API Documentation - API endpoints and usage (if created)

🏗️ Architecture Overview

This application follows a clean, layered architecture:

1. Presentation Layer (Components & Pages)

   • React components with TypeScript
   • Custom hooks for state management
   • Form handling with React Hook Form

2. API Layer (Next.js API Routes)

   • RESTful endpoints
   • Authentication middleware
   • Request validation with Zod

3. Controller Layer

   • Business logic orchestration
   • Data transformation
   • Error handling

4. Repository Layer

   • Database operations
   • Query abstraction
   • Data access patterns

5. Database Layer

   • PostgreSQL with Drizzle ORM
   • Type-safe queries
   • Relational data modeling

For detailed architecture information, see ARCHITECTURE.md.

🔒 Authentication

The application uses JWT (JSON Web Tokens) for authentication:

• Server-side: Validates tokens in API routes
• Client-side: Stores tokens in localStorage
• Token expiration: 7 days
• Password hashing: bcryptjs with salt rounds of 10

🗄️ Database Schema

The database consists of 5 main tables:

• users - User accounts
• boards - Task boards
• columns - Board columns
• tasks - Tasks within columns
• subtasks - Subtasks within tasks

All relationships are enforced at the database level with foreign keys and cascade deletes.

📝 Available Scripts

npm run dev          # Start development server with Turbopack
npm run build        # Build for production
npm run start        # Start production server
npm run db:generate  # Generate Drizzle migrations
npm run db:migrate   # Run migrations
npm run db:push      # Push schema to database
npm run db:studio    # Open Drizzle Studio (database GUI)
npm run db:seed      # Seed database with sample data

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

• Next.js - The React Framework
• Drizzle ORM - TypeScript ORM
• Radix UI - Accessible components
• dnd-kit - Drag and drop toolkit
• Tailwind CSS - CSS framework

📧 Support

For support, email gooduru.vineeth@gmail.com or open an issue in the repository.

---

Made with ❤️ using Next.js and React