Planero
Full-stack SaaS · Production-ready

Planero

Next.jsTypeScriptTailwindPrismaPostgreSQL

Note: Planero is a portfolio project, not client work. The goal was to demonstrate the kind of complexity that separates a real web application from a plain website — authentication, real-time data, role models.

The challenge

Drag-and-drop Kanban boards are a popular UI pattern, but they're more technically demanding than they look: the user expects instant visual feedback when moving a task, while the actual database state needs to update in the background — including error handling if something goes wrong.

The technical approach

Optimistic UI updates. When a task is moved, the interface updates immediately while the request to the database runs in the background. If it fails, the previous state is restored. The result feels instant without compromising data integrity.

Flexible data modeling for teams and workspaces. Instead of a rigid "one user, one board" model, the data structure was designed to support multiple teams, multiple workspaces, and different board configurations from the start — without requiring a later migration.

Role-based access control (RBAC). Not every user should be able to perform every action. Permission logic is implemented centrally, not scattered across frontend conditionals — which makes it auditable and extensible.

Timeline view as a second perspective on the same data. The Kanban board and the timeline view both read from the same underlying data structure but render it differently — proof that good data modeling supports multiple views without duplicating data.

Technical stack

Next.js, TypeScript, Tailwind, Prisma, and PostgreSQL — deliberately without additional real-time infrastructure like WebSockets, where polling or optimistic updates are sufficient.


View the live demo · Code on GitHub

Need an internal tool or a SaaS MVP? Let's talk.