Hostlink

Where teams host their work — A focused project tracker for small teams, built for hackathon PS 09.

Hostlink sits between scattered chat threads and heavyweight tools like Jira, giving teams enough structure to stay aligned without the complexity of enterprise project management software.

Problem Statement

Small teams need clarity on who's doing what, when things are due, and what's ready to ship — but most tools either bury you in features you'll never use or leave you stitching updates together from Slack threads. Hostlink gives teams a shared workspace that's light enough to use daily and clear enough to trust.

Features

Implemented:

• Projects & Tasks — Full CRUD for projects and tasks with ownership, priorities, and due dates
• Kanban Board — Drag-and-drop workflow across Backlog → In Progress → Review → Done with validated state transitions
• List View — Sortable, filterable task table with search and pagination
• Task Details — Right-side drawer with full task editing, comment threads, and activity history
• Comments — Threaded discussions on every task
• Overdue Tracking — Visual flags and counts for tasks past their due date
• Analytics — Per-project completion percentage, burndown chart, workload distribution, and overdue list (updates live as tasks move)
• My Tasks — Personal view grouping your assigned tasks by Overdue / Today / This Week / Later / Completed
• Workspace Analytics — Aggregate stats across all projects
• Team Directory — View all team members
• Settings — Dark mode toggle and user preferences
• Demo Mode — Switch between demo users without authentication
• Mobile Responsive — Full functionality on 360-414px viewports
• Animations — Polished transitions and micro-interactions via Framer Motion

Tech Stack

Frontend

• Framework: Next.js 16.3.3 (App Router, React 19)
• Language: TypeScript 5.7.3
• Styling: Tailwind CSS 4.3.3
• UI Components: shadcn/ui (built on Base UI)
• Drag & Drop: dnd-kit 6.3.1 + @dnd-kit/sortable 10.0.0
• Charts: Recharts 3.8.0
• Animations: Framer Motion 13.4.4
• State Management: Zustand 5.0.15
• Date Handling: date-fns 4.4.0
• Icons: Lucide React 1.16.0
• Notifications: Sonner 2.0.8

Backend

• Database: SQLite (via Prisma, production-ready for Postgres)
• ORM: Prisma 5.22.0 + @prisma/client 5.22.0
• API: Next.js API Routes (Route Handlers)
• Runtime: Node.js with tsx 4.23.15 for scripts

Development

• Package Manager: pnpm 12.3.4
• Build Tool: Turbopack (Next.js 16)
• Testing: Node.js built-in test runner
• Analytics: Vercel Analytics 1.6.1

Folder Structure

hostlink/
├── app/                      # Next.js App Router pages and API routes
│   ├── (app)/               # Main app layout group
│   │   ├── [section]/       # Dynamic routes for /my-tasks, /analytics, /team, /settings
│   │   └── projects/        # Project routes
│   │       ├── [id]/        # Project detail with [[...view]] catch-all for /board, /list, /analytics
│   │       └── page.tsx     # Projects home
│   ├── api/                 # API Route Handlers
│   │   ├── users/          # GET /api/users
│   │   ├── projects/       # CRUD for projects
│   │   │   └── [id]/       # Project detail, tasks, analytics
│   │   ├── tasks/          # Task CRUD, move, comments
│   │   ├── comments/       # Comment deletion
│   │   └── my-tasks/       # Personal task list
│   ├── login/              # Demo login page
│   ├── page.tsx            # Marketing landing page
│   └── layout.tsx          # Root layout
├── components/              # React components
│   ├── analytics/          # Chart components (burndown, completion ring, workload)
│   ├── board/              # Kanban board, columns, task cards, quick-add
│   ├── landing/            # Marketing page, login page, product preview
│   ├── layout/             # App shell, sidebar, topbar, breadcrumbs, search
│   ├── list/               # Task table, status dropdown, filters
│   ├── projects/           # Project list, cards, new project modal
│   ├── task/               # Task drawer, modal, fields, activity feed, toolbar
│   ├── ui/                 # Base UI components (button, dialog, badge, etc.)
│   └── workspace/          # My Tasks, Team, Settings, Workspace Analytics
├── lib/                    # Utilities and business logic
│   ├── api.ts             # API client functions (calls backend routes)
│   ├── db.ts              # Prisma client singleton
│   ├── hooks.ts           # React hooks (useSWR wrappers)
│   ├── seed.ts            # Database seed script
│   ├── store.ts           # Zustand state (UI state only, domain data from API)
│   ├── types.ts           # TypeScript types
│   ├── utils.ts           # Utility functions (transitions, analytics, sorting)
│   └── *.test.ts          # Test files
├── prisma/
│   └── schema.prisma      # Database schema
├── public/                 # Static assets
├── .env                    # Environment variables
├── package.json            # Dependencies and scripts
└── README.md               # This file

Data Model / Schema

The database uses Prisma ORM with the following tables:

User

• id (String, primary key)
• name (String)
• email (String, unique)
• role (String) — e.g. "Team Lead", "Developer", "Designer"
• color (String) — for avatar theming
• createdAt (DateTime)

Project

• id (String, primary key)
• name (String)
• description (String, optional)
• color (String) — for project card/icon
• createdAt (DateTime)
• updatedAt (DateTime, optional)
• Relations: members (ProjectMember[]), tasks (Task[]), taskEvents (TaskEvent[])

ProjectMember (join table)

• id (String, primary key, auto-generated UUID)
• projectId (String, foreign key)
• userId (String, foreign key)
• Unique constraint on (projectId, userId)

This is the beginning of the README. Read the rest at the original. Read the full README ↗