Taskmaster

Overview

Taskmaster was my first serious attempt at building a complete product from scratch — not just a frontend exercise, but a real full-stack application with user authentication, a REST API, persistent storage, and enough polish to actually use daily. The motivation was simple: I wanted a task manager that was fast, keyboard-friendly, and didn't overwhelm me with features I'd never use. Most productivity tools at the time were either too minimal (plain text files) or too complex (Jira-like project management suites). Taskmaster sits in the middle — Kanban boards with drag-and-drop, due dates, priority levels, and just enough structure to keep things organised without becoming a chore to maintain. Building it taught me how every layer of a web application connects: React rendering on the client, Express handling API routes, MongoDB persisting data, and JWT tokens tying it all together securely.

Boards & Drag-and-Drop

Tasks are organised into Kanban-style boards with customisable columns (typically To Do, In Progress, Done, but users can rename and add their own). Cards can be dragged between columns and reordered within a column, with the position persisted immediately to the database. The drag interactions use optimistic updates — the UI moves the card instantly and syncs with the server in the background, so the interface never feels sluggish even on slower connections. Each card supports a title, description, due date, priority level (colour-coded), and labels for categorisation. Clicking a card opens a detail modal where you can edit all fields, add notes, and see creation/modification timestamps.

Auth & Persistence

The backend is a Node.js/Express REST API connected to MongoDB Atlas. User authentication uses bcrypt for password hashing and JWT tokens for stateless session management — the access token lives in memory and a refresh token in an httpOnly cookie for security. Each user's boards and tasks are isolated by their account, so data stays private. The API follows RESTful conventions with proper error handling, input validation, and rate limiting on auth endpoints to prevent brute-force attacks. MongoDB's flexible document model made it easy to nest tasks within boards without complex join queries.

An Honest First Build

This is an early project and it shows its age in places — the component structure is flatter than I'd write today, some state management could be cleaner, and the styling is functional rather than refined. But that's exactly why it's still in my portfolio: it represents the foundation everything else was built on. It was the first time I wired together a frontend, an API, a database, and authentication into something that actually worked end to end. The lessons from building it — about separation of concerns, about API design, about the importance of error handling — directly informed every professional project that followed.