ClawJira: React Jira Clone with Kanban

Purpose and Significance

ClawJira is an open-source project management application that demonstrates how to build a Jira-like workflow tool using modern web technologies. Built with React, Node.js, and SQLite, it provides developers with a practical reference implementation for creating collaborative task management systems. The project bridges frontend and backend development, making it valuable for learning full-stack patterns and real-time collaboration features in the open-source AI ecosystem.

Key Features

• Dual View Modes: Switch between List View for project management and Kanban View for visual task workflow with drag-and-drop status columns (To Do, In Progress, Done)
• Projects and Spaces: Hierarchical organization—create projects, then organize tasks within spaces for structured team workflows
• Task Management: Create, edit, and delete tasks with full CRUD operations across both view modes
• Responsive Design: Mobile-first approach using Tailwind CSS ensures usability across desktop, tablet, and mobile devices
• Toast Notifications: Real-time visual feedback for all user actions using react-hot-toast
• Drag-and-Drop: Seamless task movement between status columns powered by react-beautiful-dnd

Technology Stack

Frontend: React with Vite for fast development and optimized builds. Tailwind CSS provides utility-first styling with minimal configuration.

Backend: Node.js with Express handles API routing and server logic. Prisma ORM abstracts SQLite database operations with type-safe queries.

Database: SQLite provides lightweight, file-based persistence suitable for development and small deployments. Prisma migrations manage schema evolution.

Getting Started

Clone the repository and install dependencies with Node.js 18+. Run npm install to fetch all packages, then npm run migrate to set up the SQLite database schema. Generate the Prisma client with npm run generate, then start the development server using npm run dev. The application launches at http://localhost:3000.

Core scripts include npm run frontend:dev for frontend-only development, npm run build for production compilation, and npm run test for running the test suite. Environment variables (DATABASE_URL, PORT) are configured via .env file.

Who It's For

• Full-Stack Developers: Learn React+Node integration patterns, Prisma ORM usage, and API design
• Frontend Engineers: Study Vite configuration, React state management, and Tailwind CSS implementation
• Database Designers: Understand SQLite schema design and Prisma migration workflows
• Open-Source Contributors: Contribute to an active project with MIT licensing and clear development structure
• Students: Reference implementation for coursework in web development and software architecture

Project Structure

The codebase follows a standard full-stack layout: frontend React components in src/, Express server configuration in src/server.js, and database schema in prisma/schema.prisma. Build configuration includes Vite (vite.config.js), Tailwind (tailwind.config.js), and test runner (vitest.config.js) setup for immediate development productivity.

API Endpoints

RESTful endpoints cover project management (GET/POST/PUT/DELETE /api/projects), space organization (GET/POST /api/projects/:id/spaces), and task operations (GET/POST /api/spaces/:id/tasks, PUT/DELETE /api/tasks/:id). Each endpoint follows standard HTTP conventions for predictable integration.

Deployment

Deploy to Vercel via CLI (vercel command) or Git integration. Configure build command as npm run build with output directory dist. The project includes ecosystem.config.js for PM2 process management in production environments.

Resources

• Repository: GitHub – matekolonics/claw-jira
• License: MIT (permissive open-source)
• Documentation: README.md includes setup, scripts, and deployment guides

Last updated: February 2026. Actively maintained with 21 commits and zero open issues.