Kanban
Full-Stack Task Management with a Django REST API
A full-stack Kanban board for organizing tasks, built with a Next.js frontend and a Django REST API.
Overview
Kanban is a full-stack task management application inspired by Kanban boards. Users can create boards, organize their work into color-coded columns, and track tasks and their subtasks. The project is split into a Next.js frontend and a Django REST Framework API backed by PostgreSQL.
The problem
Keeping track of tasks across several projects quickly becomes messy without a clear view of what is planned, in progress, and done. Many task management tools are either too heavy for personal use or do not let users shape the workflow around their own stages.
The solution
Kanban gives each user private boards where they define their own columns and move tasks between them. Each task can be broken down into subtasks with a progress indicator, so the status of every piece of work is visible at a glance.
Key features
Boards
Create, rename, and delete boards, with board names kept unique per user.
Custom Columns
Add columns with a name and one of eight color codes to model your own workflow stages.
Tasks and Subtasks
Create and edit tasks with a description and a list of subtasks. Task cards show how many subtasks are completed.
Status Updates
Move a task to another column from its details view and mark subtasks as completed.
User Authentication
Sign up and log in with a username and password. Every board, column, and task is private to its owner.
Light and Dark Themes
Switch between light and dark themes, with a collapsible sidebar to navigate between boards.
Tech stack
Database
Tools & CI
Technical implementation
Decoupled Architecture
A Next.js App Router frontend deployed on Vercel consumes a REST API built with Django and Django REST Framework, deployed separately on Fly.io with a PostgreSQL database.
Nested Serializers
Boards are returned with their columns, tasks, and subtasks in a single response, so the frontend renders a whole board from one request.
Containerized CI/CD
GitHub Actions runs the Django test suite against PostgreSQL, then builds and pushes a Docker image to Docker Hub and deploys it to Fly.io, where database migrations run as a release command.
Code Quality
The backend is covered by model, serializer, and authentication view tests. On the frontend, Husky and lint-staged check code before each commit, alongside ESLint, Prettier, and TypeScript type checks.
Challenges & engineering decisions
Keeping User Data Private
Problem
A REST API that accepts IDs from the client could let a user read another user's data or attach tasks to someone else's columns.
Solution
Scoped every queryset and related-field queryset to the authenticated user, and returned a permission error whenever a referenced board, column, or task belongs to someone else.
Editing Tasks and Subtasks Together
Problem
Editing a task can add, rename, complete, and remove subtasks at the same time, which would otherwise require many separate API calls.
Solution
Implemented a custom update in the task serializer that matches subtasks by ID, updates existing ones, creates new ones, and deletes those missing from the request.
Connecting NextAuth to a Django Backend
Problem
The frontend needed session management, while the backend issues its own JSON Web Tokens.
Solution
Used the NextAuth.js Credentials provider to call the Django login endpoint and store the returned access and refresh tokens in the session, so the frontend can call the API on behalf of the user.
Results & lessons learned
Results
Built and deployed a working full-stack Kanban application with a separate frontend and API, user authentication, nested board data, and an automated test, build, and deployment pipeline for the backend.
Lessons learned
- Nested serializers make an API convenient for the frontend, but writable nested data needs explicit rules for creating, updating, and deleting related records.
- In a multi-user API, every query and every ID sent by the client has to be checked against the current user.
- Connecting NextAuth.js to an external JWT backend requires clear decisions about where tokens are stored and how they reach the API.
- Automating tests, builds, and deployment early makes every later change safer to ship.