____ _____ __ __ ____ ___ _ ____ ____
| _ \| ____\ \ / /| __ ) / _ \ / \ | _ \| _ \
| | | | _| \ \ / / | _ \| | | |/ _ \ | |_) | | | |
| |_| | |___ \ V / | |_) | |_| / ___ \| _ <| |_| |
|____/|_____| \_/ |____/ \___/_/ \_\_| \_\____/
A modern, powerful task management platform built with Next.js 16, React 19, and Prisma
DevBoard is a modern task management application designed for developers and teams who value simplicity, speed, and beautiful design. Built with cutting-edge web technologies, it provides a seamless experience for organizing and tracking your work.
- Intuitive Task Management: Create, organize, and track tasks with ease
- Label System: Categorize tasks with customizable colored labels
- Priority Levels: Assign priority (Low, Medium, High, Urgent) to stay focused
- Status Tracking: Track progress through TODO, IN_PROGRESS, IN_REVIEW, and DONE states
- Modern UI: Beautiful, accessible components built with Tailwind CSS and Radix UI
- Type-Safe: Full TypeScript support across the entire stack
- Database-Driven: PostgreSQL with Prisma ORM for reliable data management
- Next.js 16 - App Router with React Server Components
- React 19 - With React Compiler enabled for optimized performance
- Tailwind CSS v4 - Utility-first CSS framework
- Radix UI - Accessible component primitives
- TypeScript - Strict mode for type safety
- Prisma - Next-generation ORM for PostgreSQL
- PostgreSQL - Robust, scalable database
- Next.js API Routes - Serverless API endpoints
- npm Workspaces - Monorepo management
- tsup - Fast TypeScript bundler for component library
- ESLint - Code linting
- Prisma Studio - Database GUI
This is a monorepo managed with npm workspaces:
devboard/
├── packages/
│ ├── web/ # Next.js application (main app)
│ └── ui/ # Shared React component library
├── CLAUDE.md # AI assistant guidelines
└── package.json # Root package with workspace configuration
The main Next.js application with:
- App Router for file-based routing
- Prisma integration for database operations
- API routes for task management
- Server and client components
A beautiful, reusable component library featuring:
- Button, Input, Textarea, Badge, Card components
- Select, Label, Separator (Radix UI based)
- Advanced Item component for list layouts
- Full TypeScript support
- Tailwind CSS styling
- Node.js 20+
- npm (comes with Node.js)
- PostgreSQL database
- Clone the repository
git clone https://github.com/skyisthelimit/devboard.git
cd devboard- Install dependencies
npm install- Set up environment variables
Create a .env file in packages/web/:
DATABASE_URL="postgresql://user:password@localhost:5432/devboard?schema=public"- Set up the database
cd packages/web
npx prisma migrate dev
npx prisma db seed- Start the development server
# From the root directory
npm run devVisit http://localhost:3000 to see your application!
# Start development server
npm run dev
# Build all packages
npm run build
# Run linting across all packages
npm run lint
# Type checking across all packages
npm run type-check
# Run tests (if configured)
npm run testFrom packages/web/:
# Run migrations
npm run db:migrate
# Seed the database
npm run db:seed
# Open Prisma Studio (database GUI)
npm run db:studio
# Generate Prisma Client
npx prisma generate# Build the UI package
npm run build --workspace=packages/ui
# Watch mode (auto-rebuild)
npm run dev --workspace=packages/uimodel Task {
id String @id @default(cuid())
title String
description String?
status Status @default(TODO)
priority Priority @default(MEDIUM)
dueDate DateTime?
labels Label[]
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}- Status:
TODO,IN_PROGRESS,IN_REVIEW,DONE - Priority:
LOW,MEDIUM,HIGH,URGENT
The @devboard-interactive/ui package provides a comprehensive set of components:
- Button - Multiple variants (default, destructive, outline, secondary, ghost, link)
- Badge - Status indicators with color variants
- Card - Container with header, content, and footer sub-components
- Input - Styled text input
- Textarea - Multi-line text input
- Label - Accessible form labels (Radix UI)
- Select - Dropdown select with animations (Radix UI)
- Separator - Visual dividers
- Item - Advanced compositional component for lists
See the UI package README for detailed documentation.
This project uses the new React Compiler (enabled in Next.js 16) for automatic optimization of React components. No manual memoization needed!
- Custom output path:
src/generated/prisma - Singleton client pattern with hot-reload support
- PostgreSQL adapter for connection pooling
- Auto-generation on
npm install
Using the latest Tailwind CSS with PostCSS for modern styling capabilities.
Full type safety across the entire codebase with strict TypeScript configuration.
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project includes a CLAUDE.md file with comprehensive guidelines for AI assistants working on the codebase. It includes:
- Architecture overview
- Development commands
- Common patterns and practices
- Database management instructions
This project is licensed under the MIT License.
- Repository: github.com/skyisthelimit/devboard
- Issues: github.com/skyisthelimit/devboard/issues
- Author: Sandeep Prasad
Made with ❤️ for developers, by developers
⭐ Star this repo if you find it useful!