Kisstrack: Your Kanban App On SQLite

A modern, full-stack kanban board application built with Next.js, TypeScript, Prisma, and Tailwind CSS. This application provides a complete project management solution with drag-and-drop functionality, role-based access control, real-time updates, and a beautiful user interface.

Features

Core Functionality

• User Authentication: Secure sign-up and sign-in with password hashing
• Role-Based Access Control (RBAC): Superadmin and User roles with different permissions
• Board Management: Create, edit, and delete kanban boards (users can only manage their own)
• Column Management: Add, reorder, and remove columns within boards
• Task Management: Create, edit, delete, and move tasks between columns
• Drag & Drop: Intuitive drag-and-drop interface for tasks and columns
• Priority Levels: Task prioritization (Low, Medium, High, Urgent)
• Due Dates: Set and track task deadlines with overdue indicators
• Real-time Updates: Instant UI updates when data changes
• Profile Management: Update personal information and change passwords
• Activity Stream: Dashboard activity log showing recent task updates across all boards

Admin Features (Superadmin Only)

• Admin Panel: Comprehensive system administration dashboard
• System Statistics: View total users, boards, tasks, and role distribution
• User Management: View, edit, and delete users with role assignment
• System Settings: Control user registration and platform-wide settings
• User Analytics: Track user activity and board creation patterns

User Experience

• Responsive Design: Works seamlessly on desktop, tablet, and mobile
• Modern UI: Clean, intuitive interface with smooth animations and gradients
• Loading States: Proper loading indicators and error handling
• Form Validation: Client and server-side validation
• Search Functionality: Search across tasks and boards
• Analytics Dashboard: Board statistics, progress tracking, and productivity metrics
• Local Avatars: Automatically generated avatar images based on user initials
• Dynamic Page Titles: Context-aware page titles throughout the application

Security & Access Control

• Data Isolation: Users can only view and edit their own boards
• Ownership Verification: API-level checks ensure users can't access others' data
• Role-Based Permissions: Superadmins have system-wide access, users have personal access
• Password Security: Bcrypt hashing with salt rounds for secure password storage
• Session Management: Secure authentication with localStorage-based sessions

Technical Features

• TypeScript: Full type safety throughout the application
• Prisma ORM: Type-safe database operations with SQLite
• SQLite Database: Lightweight, file-based database perfect for development
• API Routes: RESTful API endpoints for all CRUD operations
• Authentication Context: Global state management for user sessions
• Error Handling: Comprehensive error handling and user feedback
• Next.js 15: Latest Next.js features including async params support

Tech Stack

• Frontend: Next.js 15, React 19, TypeScript
• Styling: Tailwind CSS
• Database: SQLite with Prisma ORM
• Authentication: Custom JWT-less authentication with bcrypt
• Icons: Lucide React
• UI Components: Custom components with Radix UI primitives

Installation

1. Clone the repository

   git clone https://github.com/tuxedosoft/Kisstrack.git
   cd kanban-app

2. Install dependencies

   npm install

3. Set up environment variables

   Option A: Use the setup script (Recommended)

   node scripts/setup-env.js

   Option B: Create manually Create a .env file in the root directory:

   DATABASE_URL="file:./dev.db"
   NEXT_PUBLIC_SITE_NAME="KanbanFlow"

   Customize your site name: Edit the NEXT_PUBLIC_SITE_NAME variable to change the application name throughout the UI.

4. Generate Prisma client

   npx prisma generate

5. Run database migrations

   npx prisma db push

6. Seed the database (Optional but recommended)

   # Reset database and seed with initial users and system settings
   npm run reset-db
   
   # Or seed users only
   npm run seed
   
   # Or seed system settings only
   npm run seed-settings

   Default Accounts:

   • Superadmin: superadmin@example.com / superadmin123
   • User: user@example.com / user123

7. Start the development server

   npm run dev

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

Database Schema

The application uses the following database schema:

Users

• id: Unique identifier
• name: User's full name
• email: Unique email address
• password: Hashed password
• image: Profile image URL
• role: User role (SUPERADMIN or USER)
• createdAt, updatedAt: Timestamps

Boards

• id: Unique identifier
• title: Board title
• description: Board description
• userId: Owner of the board (foreign key)
• createdAt, updatedAt: Timestamps

Columns

• id: Unique identifier
• title: Column title
• order: Column position
• boardId: Parent board (foreign key)
• createdAt, updatedAt: Timestamps

Tasks

• id: Unique identifier
• title: Task title
• description: Task description
• priority: Priority level (LOW, MEDIUM, HIGH, URGENT)
• dueDate: Task deadline
• columnId: Parent column (foreign key)
• order: Task position
• createdAt, updatedAt: Timestamps

SystemSettings

• id: Unique identifier
• allowUserRegistration: Boolean flag to enable/disable user registration
• updatedBy: User ID who last updated the settings (foreign key)
• updatedAt: Last update timestamp

API Endpoints

Note: Most endpoints require a userId query parameter or in the request body to ensure proper access control and data isolation.

Authentication

• POST /api/auth/signin - User sign-in

Users

• GET /api/users - Get all users (requires userId query param)
• POST /api/users - Create new user
• GET /api/users/[id] - Get specific user
• PUT /api/users/[id] - Update user (superadmin can edit any user)
• DELETE /api/users/[id] - Delete user
• PATCH /api/users/profile - Update current user's profile

Boards

• GET /api/boards?userId={userId} - Get user's boards (users see only their own, superadmins see all)
• POST /api/boards - Create new board (requires userId in body)
• GET /api/boards/[id]?userId={userId} - Get specific board (ownership verified)
• PUT /api/boards/[id] - Update board (ownership verified, requires userId in body)
• DELETE /api/boards/[id]?userId={userId} - Delete board (ownership verified)
• GET /api/boards/[id]/stats?userId={userId} - Get board statistics (ownership verified)
• GET /api/boards/activity?userId={userId} - Get activity stream for user's boards

Columns

• GET /api/columns?boardId={boardId}&userId={userId} - Get board's columns (ownership verified)
• POST /api/columns - Create new column (requires userId in body, ownership verified)
• GET /api/columns/[id]?userId={userId} - Get specific column (ownership verified)
• PUT /api/columns/[id] - Update column (ownership verified, requires userId in body)
• DELETE /api/columns/[id]?userId={userId} - Delete column (ownership verified)
• POST /api/columns/reorder - Reorder columns (requires userId in body, ownership verified)

Tasks

• GET /api/tasks?columnId={columnId}&userId={userId} - Get column's tasks (ownership verified)
• POST /api/tasks - Create new task (requires userId in body, ownership verified)
• GET /api/tasks/[id]?userId={userId} - Get specific task (ownership verified)
• PUT /api/tasks/[id] - Update task (ownership verified, requires userId in body)
• DELETE /api/tasks/[id]?userId={userId} - Delete task (ownership verified)
• POST /api/tasks/reorder - Move/reorder tasks (requires userId in body, ownership verified)

Admin (Superadmin Only)

• GET /api/admin/stats - Get system-wide statistics
• GET /api/admin/settings - Get system settings
• PATCH /api/admin/settings - Update system settings (requires updatedBy in body)

Search

• GET /api/search?q={query}&userId={userId} - Search tasks and boards (ownership verified)

UI Components

The application includes several reusable UI components:

• Authentication Forms: Sign-in and sign-up forms with validation
• Board Cards: Display board information with statistics
• Column Components: Kanban columns with drag-and-drop tasks
• Task Cards: Individual task display with priority and due date indicators
• Modals: Create/edit forms for boards, columns, and tasks
• Loading States: Spinners and skeleton loaders
• Priority Badges: Color-coded priority indicators (Low, Medium, High, Urgent)
• Activity Stream: Timeline view of recent task updates
• Admin Dashboard: System statistics and user management interface
• Avatar Generator: Local SVG avatar generation based on user initials
• Analytics Dashboard: Board statistics and productivity metrics

Development

Project Structure

src/
├── app/                    # Next.js app directory
│   ├── api/               # API routes
│   │   ├── admin/         # Admin endpoints (stats, settings)
│   │   ├── auth/          # Authentication endpoints
│   │   ├── boards/        # Board endpoints
│   │   ├── columns/       # Column endpoints
│   │   ├── tasks/         # Task endpoints
│   │   ├── users/         # User endpoints
│   │   └── search/        # Search endpoint
│   ├── admin/             # Admin panel (superadmin only)
│   ├── board/             # Board pages
│   ├── dashboard/         # Dashboard page
│   ├── profile/           # User profile page
│   ├── signup/            # Sign-up page
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home/sign-in page
├── contexts/              # React contexts (AuthContext)
├── lib/                   # Utility functions
│   ├── prisma.ts         # Prisma client instance
│   ├── config.ts         # Site configuration
│   └── avatar.ts         # Avatar generation utility
├── prisma/                # Database schema and migrations
└── scripts/               # Database management scripts
    ├── reset-db.js       # Reset and seed database
    ├── seed-users.js     # Seed users
    └── seed-system-settings.js  # Seed system settings

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run reset-db - Reset database and seed with initial users and system settings
• npm run seed - Seed database with initial users
• npm run seed-settings - Seed system settings

Database Commands

• npx prisma generate - Generate Prisma client
• npx prisma db push - Push schema to database
• npx prisma studio - Open Prisma Studio (visual database browser)
• npx prisma migrate dev - Create and apply migrations

Database Management

Reset Database:

npm run reset-db

This will:

• Delete all existing data (users, boards, tasks, columns, system settings)
• Create a new superadmin user (superadmin@example.com / superadmin123)
• Create a new regular user (user@example.com / user123)
• Initialize system settings with user registration enabled

Seed Users Only:

npm run seed

Seed System Settings Only:

npm run seed-settings

Deployment

Vercel (If you would like to host it here)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Set environment variables in Vercel dashboard
4. Deploy automatically

Other Platforms

The application can be deployed to any platform that supports Next.js:

• Netlify
• Railway
• DigitalOcean App Platform
• AWS Amplify

CPanel Installation

The Server.js file is the one that should be called in your Node.js setup on CPanel environments.

Access Control & Security

User Roles

Superadmin:

• Full system access and monitoring
• Can view all boards across the platform
• Access to admin panel (/admin)
• Can edit and delete any user
• Can manage system settings
• Cannot create boards (read-only access to content)

User:

• Can create and manage their own kanban boards
• Can only view and edit boards they created
• Full CRUD operations on their own boards, columns, and tasks
• Cannot access admin panel
• Cannot view other users' boards

Data Isolation

All API endpoints implement ownership verification:

• Users can only access boards they created
• Board ownership is checked before any operation
• Attempts to access other users' data return 403 Forbidden
• Superadmins have special permissions for system-wide access

System Settings

The application includes system-wide settings managed by superadmins:

• User Registration Toggle: Enable/disable new user sign-ups
• Settings are stored in the database and persist across sessions
• Only superadmins can modify system settings

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Additional Documentation

• API_ENDPOINTS.md: Detailed API endpoint documentation
• USER_ROLES.md: Comprehensive guide to user roles and access control

License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js for the amazing React framework
• Prisma for the excellent ORM
• Tailwind CSS for the utility-first CSS framework
• Lucide for the beautiful icons

Quick Start Guide

First Time Setup

1. Clone and Install

   git clone https://github.com/tuxedosoft/Kisstrack.git
   cd kanban-app
   npm install

2. Environment Setup

   node scripts/setup-env.js

3. Database Setup

   npx prisma generate
   npx prisma db push
   npm run reset-db

4. Start Development

   npm run dev

5. Login

   • Superadmin: superadmin@example.com / superadmin123
   • User: user@example.com / user123

Common Tasks

Create a new board:

1. Login as a regular user
2. Navigate to Dashboard
3. Click "Create New Board"
4. Add columns and tasks

Access admin panel:

1. Login as superadmin
2. Click "Admin Panel" in navigation
3. View system statistics and manage users

Reset database:

npm run reset-db

---

Happy coding! 🎉