Skip to content
PRAVAR
Product Systems· 2025

HelpDesk Lite

A small helpdesk app I built with ticket intake, admin triage, a Kanban board, role-based access, audit logs, email notifications, and Vercel deployment.

RoleFull-Stack Engineer (solo)
Timeline2025
StatusLive + open source
Drag-and-drop Kanban
Role-based ticket flow
Vercel + PostgreSQL deploy
HelpDesk Lite
The Hook

I wanted to build the boring parts of a support tool: tickets, roles, comments, status changes, audit logs, and deployment. Those are the parts that make a CRUD app feel real.

Business Use Case

I used the project to model a small team's support workflow: public ticket intake, admin review, comments, ownership, status changes, and an audit trail. It connects to my APMAC-style internal tool work because the core questions are the same: who owns the request, what changed, and what history should be visible.

Problem

A ticketing app is simple until you add the real workflow details: users should only see their own tickets, admins need a different view, status changes need history, and deployment needs environment variables, auth secrets, and a database. I built HelpDesk Lite to practice those pieces together.

Approach

Next.js App Router handles the app structure, Prisma models the users/tickets/comments/audit logs, and PostgreSQL stores the data. I used NextAuth for credentials-based auth, @dnd-kit for the Kanban board, and explicit server-side actions for ticket changes so the audit log can record who did what.

Architecture
  1. 01Next.js 14 App Router — Server Components for fast initial loads, Server Actions for mutations.
  2. 02Prisma ORM → PostgreSQL — type-safe queries, schema migrations versioned in repo.
  3. 03NextAuth.js — credentials provider, bcryptjs hashing, role-aware middleware.
  4. 04@dnd-kit — accessible drag-and-drop with keyboard support and ARIA announcements.
  5. 05Audit log layer — records ticket actions with actor and timestamp.
  6. 06Email — Nodemailer path for notifications, with deployment constraints around serverless timeouts.
  7. 07Validation — Zod schemas paired with React Hook Form on the client.
Challenges & Decisions

Real-time across tabs

I wanted ticket updates to feel current, but I did not want to overbuild the project with a full WebSocket system. The current version keeps the workflow simple; if I revisit it, I would add a small SSE or polling layer only where it improves the admin experience.

Drag-and-drop accessibility

The Kanban board was easy to make mouse-friendly and harder to make keyboard-friendly. I used @dnd-kit because it gives me a path toward keyboard sensors and ARIA announcements, but I would still want more accessibility testing before calling the board finished.

Free-tier deployment friction

The local app and the Vercel app did not have the same constraints. File uploads, email, and database setup all needed special handling once the app was serverless. This was a useful reminder that 'it works locally' is only half the project.

Audit log growth

The audit log records useful history, but I have not solved long-term audit retention yet. For a real deployment, I would need retention rules, archive summaries, or some way to keep the table from growing forever.

Results
  • Live deployment at help-desk-flax.vercel.app.
  • Core ticket flow works: create a ticket, view it by role, move it through statuses, comment, and preserve history.
  • Setup/deploy docs cover the main path, but the app still depends on correct database and auth environment configuration.
What I'd Change
  • ·This is a working demo app, not a Zendesk replacement. Email, uploads, and long-term audit retention are still the rough parts.
  • ·I would add stronger permission tests before trusting it with real support data.
  • ·I would also simplify the deployment story so a new user does not have to think as much about database setup and seed credentials.
Stack

Frontend

Next.js 14React 19TypeScriptTailwind CSSRadix UI@dnd-kitReact Hook Form + Zod

Backend

Next.js Server ActionsPrisma ORMNextAuth.jsNodemailerbcryptjs

Storage

PostgreSQL (Vercel Postgres / Neon / Supabase)

Quality

Playwright E2E