React · Tailwind · Team Collab2026 · 4-week team build · Product Engineer — frontend, auth, API integration

FlowBoard

A collaborative task manager built on the RAD5 Task Manager API — real auth, URL-synced filters, and team workflow discipline.

Overview

The product

FlowBoard is a team-built task manager that treats product polish like a first-class feature. Register and login with session persistence, create and manage tasks against the RAD5 Task Manager API, filter by status and priority with URL-synced state, search with debounced input, and toggle status inline — every screen has loading, empty, and error states, and the whole app is responsive from mobile to desktop. It shipped as a collaboration exercise with protected branches, PR reviews, and Vercel auto-deploys.

6 designed surfaces

Screens

Persistent sessions

Auth

URL-synced

Filters

PR + protected main

Workflow

The problem

Task managers exist — most of them just feel unfinished

For a team collaboration build on the RAD5 Task Manager API, the bar wasn't a demo — it was a product: real authentication, resilient API integration, and polished states for every screen.

  • Sessions had to survive refresh — not just in-memory login state
  • Filters and search needed to feel instant and shareable (URL-synced)
  • Loading, empty, and error states had to be designed, not incidental

The solution

Treat every interaction as a designed state

I built FlowBoard around a services layer (Axios) with a central error handler, AuthContext + ToastContext for session and feedback, and useReducer-driven flows for reliability. Debounced search, URL-synced filters, inline status toggles, and protected routes make it feel like a shipped product — and the team workflow (protected main, PRs, squash merges) kept the codebase production-grade.

  • Register/login with session persistence via GET /auth/me on refresh
  • URL-synced filters and debounced search make the board fast and shareable
  • Protected routes, toasts, confirm modals, and overdue warnings cover the full UX

Architecture

The system behind FlowBoard

A layered React app: pages talk to a typed services layer, context providers own auth and toasts, and URL state drives filters — keeping the API boundary clean.

  1. 01

    Pages & Routing

    react-router-dom v6

    Login, register, task list, task detail, and a proper 404.

  2. 02

    Services Layer

    Axios

    Centralized api.js with auth and task endpoints plus shared error handling.

  3. 03

    Auth & Session

    AuthContext

    Session persistence via /auth/me with protected routes on 401.

  4. 04

    State & Forms

    useReducer · React Hook Form

    Predictable task flows and validated forms across screens.

  5. 05

    Feedback

    ToastContext

    Toast notifications and confirm modals for every user action.

  6. 06

    UX States

    Loading · Empty · Error

    Every screen designed for loading, empty, and error conditions.

Tech stack

Tools that earned their place

Frontend

  • React 18
  • Vite

Styling

  • Tailwind CSS v3

Routing

  • react-router-dom v6

HTTP

  • Axios
  • RAD5 Task Manager API

Forms & State

  • React Hook Form
  • Context + useReducer

Features

What it does, and why it matters

01

Real authentication

Register and login with email/password and a session that survives refresh.

02

Full task CRUD

Create, view, edit, and delete tasks with status and priority.

03

URL-synced filters

Filter by status and priority — the state lives in the URL, so it's shareable.

04

Debounced search

Title search with useDebounce that stays responsive while you type.

05

Inline status toggles

Flip a task's status right from the card, no page reload.

06

Production UX

Toasts, confirm modals, overdue warnings, and designed empty/error states.

Challenges

What nearly broke the system

Session survival

An in-memory auth flag meant refreshes silently logged users out. I added GET /auth/me on boot to restore sessions and protected routes that bounce to login on 401.

Filters you can share

Filtering that lives in component state is gone the moment you navigate. I moved status and priority into URL search params, so the board's view is linkable and back-button safe.

Collaboration at scale

Six teammates, one main branch. Protected branches, PR reviews, squash merges, and conventional commits kept merges clean and the deployed app stable.

Lessons learned

What shipping taught me

Sessions are a boot-time problem — restore auth from /auth/me, never trust component state.

URL-synced UI state is a feature: filters become links, and links become shareable views.

Team workflow (protected main, PRs, squash) is what makes a collaboration build feel production-grade.

Impact

Why this actually matters

FlowBoard proves product discipline beats feature count: real auth, resilient API integration, URL-synced filters, and designed states for every screen — delivered by a team that followed the workflow it preached.

  • Sessions survive refresh and protected routes keep the app honest
  • URL-synced filters and debounced search make the board fast and linkable
  • Designed loading, empty, and error states make reliability visible

Gallery

Inside the product

Task board

Filterable, searchable, status-togglable task list.

Task detail

Full task view with edit and delete flows.

Auth screens

Register and login with session persistence.