Dev Roadmap — Focus Matrix Team

◀ Not Important Important ▶

Schedule

Important · Not Urgent
Plan & grow

Do First

Important · Urgent
Crisis & deadlines

Eliminate

Not Important · Not Urgent
Time wasters

III

Delegate

Not Important · Urgent
Interruptions

Focus Matrix — Team Edition

A real-time collaborative prioritization tool built around the Eisenhower Matrix. Teams create a shared workspace, drop tasks into the 4 quadrants (Do First / Schedule / Delegate / Eliminate), assign owners, set deadlines, and see each other's changes live via WebSocket. Managers get a bird's-eye view of the team's focus. Every member keeps their personal matrix too.

Team workspaces with role-based access (Admin / Member)

Shared + personal Eisenhower Matrix boards

Real-time sync: drag a task and teammates see it instantly

Task assignment, due dates, priority labels

Activity feed: who moved what, when

Team focus analytics dashboard (charts)

JWT auth + Spring Security

WebSocket (STOMP) for live collaboration

Overall Progress 0 / 0 tasks

Development Phases

Environment & Database Design Week 1 // 3–4 days

Solid foundations. Design the schema for teams, roles, workspaces, and tasks before touching code. The matrix structure must be in the DB from day 1.

Install Java 17+, Maven, Node.js 20+, MySQL 8, IntelliJ IDEA, VS Code

SETUP

Create Spring Boot project (Web, JPA, MySQL Driver, Security, WebSocket, Lombok)

Create React app with Vite: npm create vite@latest frontend -- --template react

Design DB schema: users, teams, team_members (role), workspaces, tasks (quadrant, assignee, dueDate), activity_log

Define ENUM values: Quadrant (Q1/Q2/Q3/Q4), Role (ADMIN/MEMBER), TaskStatus (OPEN/DONE)

Configure application.properties: datasource, JPA DDL auto, server port

Initialize Git repo, create /backend and /frontend folders, push to GitHub

BOTH

Backend — Auth, Users & Teams Week 1–2 // 5–6 days

Authentication + the team management system. This is the backbone: users register, create or join teams, and roles control what they can do.

Create User entity + UserRepository + UserService

POST /api/auth/register — hash password with BCrypt, return user

POST /api/auth/login — validate credentials, issue JWT token

Spring Security config: JWT filter chain, permit /auth/**, secure all others

Create Team entity + TeamMember entity (user, team, role ENUM)

POST /api/teams — create team, auto-assign creator as ADMIN

POST /api/teams/{id}/invite — add a user to a team (ADMIN only)

GET /api/teams/{id}/members — list team members with roles

Add CORS config + GlobalExceptionHandler with proper error DTOs

Test all endpoints in Postman — auth + team flows

Backend — Matrix & Tasks API Week 2–3 // 5–6 days

The core domain: workspaces, tasks placed in quadrants, assignment, filtering, and the activity log that powers the feed.

Create Workspace entity: id, name, team, type (SHARED / PERSONAL)

Auto-create a SHARED workspace when a team is created

Create Task entity: id, title, description, quadrant (Q1–Q4), status, assignee, dueDate, workspace, createdBy, position

GET /api/workspaces/{id}/tasks — return all tasks grouped by quadrant

POST /api/workspaces/{id}/tasks — create task in a quadrant

PATCH /api/tasks/{id}/quadrant — move task between quadrants (key for drag-drop)

PUT /api/tasks/{id} — edit title, description, assignee, dueDate

DELETE /api/tasks/{id} — only creator or ADMIN can delete

Create ActivityLog entity: who, what action, which task, timestamp

Auto-log every task create/move/edit/delete event in ActivityLogService

GET /api/teams/{id}/activity — paginated activity feed

Backend — WebSocket (Live Sync) Week 3 // 3–4 days

The feature that makes it a real team tool. When anyone moves a task, all connected teammates see it instantly — no page refresh.

Add spring-boot-starter-websocket dependency to pom.xml

Configure WebSocketMessageBrokerConfigurer: enable STOMP, set /ws endpoint, /topic broker

Create MatrixEventDTO: type (TASK_MOVED / TASK_CREATED / TASK_DELETED), payload

Inject SimpMessagingTemplate in TaskService — broadcast to /topic/workspace.{id} after every mutation

Secure WebSocket handshake: validate JWT token during STOMP CONNECT

Test WebSocket events in Postman (WebSocket client) or a simple HTML test page

Frontend — Auth, Teams & Layout Week 4 // 4–5 days

React foundation: routing, auth context, login/register pages, team dashboard, and the axios layer with JWT interceptor.

Install: react-router-dom, axios, @stomp/stompjs, sockjs-client, @dnd-kit/core

Create AuthContext (user, token, login, logout) — persist token in localStorage

Build Login and Register pages — call auth API, store token, redirect

Set up React Router with PrivateRoute component (redirect to /login if no token)

Create axios instance with Authorization: Bearer {token} interceptor

Build Teams Dashboard: list user's teams, create new team, invite member by email

Build sidebar/nav layout: team switcher, workspace links, user avatar + logout

Frontend — Matrix Board & Live Sync Week 4–5 // 6–7 days

The star of the app. A 2×2 grid where tasks live and move. Drag-and-drop between quadrants, real-time updates via WebSocket, and task detail modals.

Build MatrixBoard component: 2×2 CSS grid, each cell is a Quadrant column

Fetch tasks on mount, group by quadrant into { Q1: [], Q2: [], Q3: [], Q4: [] } state

Render TaskCard in each quadrant with title, assignee avatar, due date, priority color

Implement drag-and-drop with @dnd-kit — drag TaskCard, drop onto a Quadrant

On drop: optimistically update state, then call PATCH /tasks/{id}/quadrant

Create useWebSocket hook: connect to /ws, subscribe to /topic/workspace.{id}

REAL-TIME

On incoming WS message: update matrix state without re-fetching (merge patch)

REAL-TIME

Build Task create/edit modal: title, desc, quadrant, assignee select, due date picker

Build Activity Feed panel: real-time log of team actions with timestamps

Show online presence indicator: who else is viewing the same workspace

REAL-TIME

Analytics, Polish & Deploy Week 6 // 5–6 days

Add the analytics dashboard, write tests, clean up the UI, and ship it live. This is what turns a project into a portfolio piece.

Backend: GET /api/teams/{id}/stats — count tasks per quadrant per member

Frontend: Analytics page with bar/pie charts per member using Recharts or Chart.js

Write JUnit + Mockito tests for TaskService and TeamService

Write MockMvc integration test for auth + task creation flow

Add loading skeletons, empty states, and toast notifications to React UI

Make layout fully responsive — matrix board stacks to 1 column on mobile

Build Spring Boot JAR: mvn clean package -DskipTests

Deploy backend + MySQL to Railway or Render (set env vars for DB + JWT secret)

Build React: npm run build — deploy /dist to Vercel or Netlify

Write README with live demo link, screenshots, and tech stack

BOTH

Developer Tips — Stay Focused

WebSocket is Phase 4, not Phase 1Build the full REST API and test it working first. Add WebSocket on top once CRUD is solid — it's a layer, not a foundation.

The matrix is just a PATCH endpointMoving a task between quadrants is simply PATCH /tasks/{id}/quadrant. Don't overcomplicate it. The "real-time" part is broadcasting that patch over WebSocket.

Test with 2 browser tabsOpen the app in two tabs logged in as different users. Drag a task in one — it should appear in the other. That's your real-time test.

JWT in WebSocket handshakeSTOMP's CONNECT frame can carry headers. Send the token there and validate it in a ChannelInterceptor — same logic as your HTTP filter.

Optimistic UI for drag-dropUpdate the React state immediately on drag, then send the API call. If it fails, revert. This makes the app feel instant even on slow connections.

Total estimate: 6 weeks @ 1–2h/dayWebSocket adds ~1 week vs a basic CRUD app. Worth every minute — it's the skill that impresses in interviews.

FOCUSMATRIXTEAM

FOCUS
MATRIX
TEAM