KNBN - Task Manager Template
Bolt Templates
1 collaborator
Like this project
Posted May 14, 2025
Task management app for organizing projects with boards, lists, and drag-and-drop cards. Built for teams and solo users who want clarity, simplicity, and speed.
Likes
3
Views
27
Clients
Bolt
Collaborators
Template Name
KNBN
Purpose / Use Case
A Trello-style task management app for organizing projects with boards, lists, and drag-and-drop cards. Built for teams and solo users who want clarity, simplicity, and speed.
What We Told Bolt to Build
"Build a full Kanban-style drag-and-drop project management app. Include support for multiple boards, lists within each board, and tasks within lists. Allow creating, editing, and deleting boards, lists, and tasks. Enable drag-and-drop to move tasks between lists. Each board should have a clean UI with a sidebar to navigate boards and a modal dialog to manage tasks. Use TailwindCSS, Zustand for state management, Radix UI for modals, and React Router for navigation. Use Geist as the main font."
Overview
Homepage
Board
Task
Features
Create, edit, delete boards, lists, and tasks
Drag & drop between lists
Task details shown in modals
Empty state illustrations for clarity
Sidebar with board navigation
Light & dark theme support
Mock data with UUIDs to simulate backend
UX/Implementation Notes
Dialog-driven UX: Task creation, editing, and detail views are handled in lightweight modals — no context loss.
First-time experience: When a board is empty, it prompts you to start with meaningful CTAs.
Back-navigation clarity: Switching between /boards and /boards/:id is intuitive.
Keyboard accessibility & semantic layout: Built with Radix and proper HTML tags.
Modern feel: The Geist font + Tailwind spacing system makes it feel editorial and functional.
Troubleshooting & Gotchas
Charts not rendering? Make sure your mock data is numeric and properly bound to the chart block.
Invoices not displaying totals? Check that each entry includes both hours and rate — missing data can break totals.
Nav looks weird on mobile? Use bottom nav blocks and ensure mobile breakpoints are respected in layout settings.