ProjectsTaskBoard
01 / Project Details
LiveCollaborative Kanban Platform
TaskBoard
A task board combining a clean UI with live collaboration, shared ownership, and a synchronized frontend-backend release workflow for structured, modern teams.
RoleFull-Stack Engineer
Duration3 Weeks
ClientPersonal Project
Year2024
Project Summary
TaskBoard is a full-stack collaborative task management app with real-time updates, secure authentication, and typed APIs — built for fast, dependable team execution.
02 / Snapshot
Realtime collaboration
Socket.IO board rooms keep active workspaces in sync as lists, cards, comments, and member changes happen
Secure authentication
Email/password auth is backed by HttpOnly cookies, with Google OAuth added for faster onboarding and stronger launch readiness
Production-shaped UX
The app includes board management, member roles, due dates, activity history, polished auth screens, and responsive card workflows
Monorepo discipline
Shared contracts, typed payloads, CI validation, and ordered deployment automation reduce drift between frontend, backend, and realtime behavior
03 / Overview
Building a task platform that feels collaborative, clear, and deployment-ready.
TaskBoard was shaped as more than a basic Trello clone — it's a focused kanban platform built with real product thinking. Authenticated users can create boards, manage members, organize lists, move cards via drag-and-drop, enrich tasks, comment, and track activity.
Challenge
Many task tools either feel visually clean but technically shallow, or feature-rich but operationally messy. The challenge here was to deliver a collaboration experience that stayed simple on the surface while still supporting secure auth, realtime updates, durable ordering logic, and a deployment model that would behave reliably in production.
Solution
I designed TaskBoard as a typed full-stack system with a React/Vite SPA, a NestJS API, a shared contracts package, PostgreSQL persistence through Prisma, and Socket.IO-based realtime updates. On the frontend, the focus stayed on clarity and speed. On the backend, the emphasis was on predictable contracts, secure cookies, controlled board membership, and a deployment flow that ensures the backend is live before the production frontend is released.
04 / Stack & Scope
What shipped
Tech Stack
React 18ViteTypeScriptTailwind CSSTanStack Querydnd-kitZustandNestJSPrismaPostgreSQLSocket.IOZodSwaggerTurborepoRenderNeon
Team Context
Solo Full-Stack Engineer
Deliverables
- Email/password signup and login, session retrieval, logout, and Google OAuth support.
- Board listing, board creation, persistent board styling, and saved view preferences.
- Board settings, owner/member roles, member invitation and removal, and responsive member visibility patterns.
- List creation, renaming, deletion, drag-and-drop list reordering, card creation, editing, movement, and deletion.
- Card descriptions, due dates, comment threads, and focused modal editing.
- Activity log with typed event summaries and load-more pagination.
- Live web app, live API, typed contracts, CI checks, e2e smoke coverage, and staged production deployment automation.
Key Highlights
- Shared DTOs and Zod schemas act as a single source of truth for REST and realtime payloads.
- A single `board_event` channel keeps the event model simple, versionable, and easy to extend.
- HttpOnly cookie auth plus same-origin proxy routing avoids common cross-site cookie fragility.
- CI validates lint, typecheck, tests, e2e smoke, and build before production rollout continues.
- The UI stays crisp and approachable while still exposing serious functionality such as role-based membership and audit-style activity tracking.
05 / Process
From product framing to final polish.
Step 01
Product Framing
Defined the MVP around the most valuable collaboration loop: authenticate, create a board, structure work, move tasks forward, and keep teammates aligned in real time. This kept the scope disciplined while still making the product feel complete.
Step 02
Interface System
Built a clean React interface with distinct dashboard, auth, and board views. Priority was placed on navigation clarity, responsive layouts, intuitive creation flows, focused card editing, and drag-and-drop interactions that feel immediate instead of heavy.
Step 03
Backend & Realtime Wiring
Implemented a NestJS API with Prisma/PostgreSQL persistence, board membership controls, activity tracking, and Socket.IO board rooms. Ordering for lists and cards uses float-based positions so most move operations only need targeted writes instead of expensive reindexing.
Step 04
Contracts & State Reliability
Used a shared `@taskboard/contracts` package to keep schemas, DTOs, and event payloads aligned across the web app and API. On the client, TanStack Query handles fetching, invalidation, optimistic UX, and reconciliation after realtime events land.
Step 05
Security & Authentication
Added HttpOnly cookie-based auth for session security, throttled auth endpoints, and Google OAuth for faster sign-in. Same-origin routing through Vercel rewrites keeps credentials handling practical in production.
Step 06
Deployment & Release Flow
Shipped the web app to Vercel, the API to Render, and the database on Neon Postgres. Production delivery uses a two-stage GitHub Actions flow: CI validates the codebase first, Render updates the backend, then the frontend deploy is triggered only after the API health check reports the expected commit.
06 / Gallery
Selected product views
07 / Closing Notes
This project focused on making collaboration feel straightforward for users while staying disciplined for engineers.
Delivery Window
Structured as a practical MVP with enough depth to feel production-capable, not just demonstrative.
Responsive Coverage
The interface is designed to remain usable and visually coherent across the dashboard, auth, and board surfaces.
Scalable Foundation
The architecture leaves room for future expansion such as richer notifications, board templates, attachments, advanced filtering, and deeper workspace analytics.
08 / Next Project