SyncBoard - Real-time Collaborative Task Board

A real-time collaborative Kanban board built with Next.js, Socket.IO, and PostgreSQL. Features live collaboration, drag-and-drop task management, and real-time presence indicators.

Features

• Real-time Collaboration - See changes instantly across all connected users
• Kanban Board - Drag and drop tasks between columns (Backlog, To Do, In Progress, In Review, Done)
• Workflow Rules - Tasks can only move forward in the workflow
• WIP Limits - Work-in-progress limits on columns to prevent overload
• User Authentication - Secure login/signup with NextAuth.js
• Live Presence - See who's online and what they're working on
• Real-time Chat - Team communication within the board
• Activity Feed - Track all board activity in real-time
• Dark/Light Theme - Toggle between themes

Tech Stack

• Frontend: Next.js 16, React 19, TypeScript, Tailwind CSS
• State Management: Zustand
• Real-time: Socket.IO
• Database: PostgreSQL with Prisma ORM
• Authentication: NextAuth.js
• Animations: Framer Motion

Prerequisites

• Node.js 18+
• PostgreSQL database
• npm or yarn

Getting Started

1. Clone the repository

git clone <repository-url>
cd collaborative-taskboard-next

2. Install dependencies

npm install

3. Set up environment variables

Create a .env file in the root directory:

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

# NextAuth
NEXTAUTH_SECRET="your-secret-key"
NEXTAUTH_URL="http://localhost:3000"

# Socket.IO (optional - defaults to localhost:3001)
NEXT_PUBLIC_SOCKET_URL="http://localhost:3001"

4. Set up the database

# Generate Prisma client
npx prisma generate

# Run migrations
npx prisma migrate dev

# (Optional) Seed the database
npm run db:seed

5. Start the development servers

Run both the Next.js app and Socket.IO server:

npm run dev:all

Or run them separately:

# Terminal 1 - Socket.IO server
npm run dev:server

# Terminal 2 - Next.js app
npm run dev

6. Open the app

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

Scripts

Command	Description
npm run dev	Start Next.js development server
npm run dev:server	Start Socket.IO server
npm run dev:all	Start both servers concurrently
npm run build	Build for production
npm run start	Start production server
npm run db:migrate	Run database migrations
npm run db:push	Push schema changes to database
npm run db:seed	Seed the database
npm run db:studio	Open Prisma Studio

Sharing with Others (ngrok)

To share the app with others over the internet:

1. Start both servers locally
2. Create ngrok tunnels for both ports:

# Terminal 1 - Expose Next.js
ngrok http 3000

# Terminal 2 - Expose Socket.IO
ngrok http 3001

3. Update .env.local with the Socket.IO ngrok URL:

NEXT_PUBLIC_SOCKET_URL=https://your-socket-ngrok-url.ngrok-free.app

4. Restart the Next.js server and share the port 3000 ngrok URL with others.

Project Structure

├── app/                    # Next.js App Router
│   ├── (auth)/            # Authentication pages
│   ├── api/               # API routes
│   └── board/             # Board pages
├── components/            # React components
│   ├── board/            # Kanban board components
│   ├── chat/             # Chat components
│   ├── layout/           # Layout components
│   ├── task/             # Task-related components
│   └── ui/               # Reusable UI components
├── hooks/                 # Custom React hooks
├── lib/                   # Utility functions and configs
├── providers/            # React context providers
├── server/               # Socket.IO server
├── stores/               # Zustand stores
├── types/                # TypeScript type definitions
└── prisma/               # Database schema and migrations

Workflow Rules

Tasks follow a strict forward-only workflow:

Backlog → To Do → In Progress → In Review → Done

• Tasks can move forward any number of steps
• Tasks cannot move backward
• WIP limits apply to "In Progress" (5) and "In Review" (3) columns

License

MIT