Nexus.
A modern project management workspace built to demonstrate scalable React architecture and intuitive task workflows.
Nexus is a full-stack project management tool with Kanban boards, squad-based workspaces, real-time search, and an analytics view spanning five chart types. The goal was to design a product that holds up under real-world feature pressure: clean state boundaries, optimistic UI, and a UX that stays calm as complexity grows.
What this project set out to solve.
Most project management tools sit at one of two extremes: heavyweight enterprise suites like Jira that drown small teams in configuration, or barebones to-do lists that fall apart the moment work spans multiple people.
I wanted to design something that could carry real product weight (Kanban, squads, analytics, search) while keeping the UI quiet and the codebase navigable. The deeper goal was to prove I could architect a non-trivial frontend with clean boundaries instead of one monolithic store.
How it came together.
I split state into two layers: client state (board view, filters, squads) lives in Zustand slices, and server state (tasks, members, metrics) lives in React Query. That separation means cache invalidation never collides with UI state, a problem I have seen sink Redux-based apps.
For the Kanban board I leaned on @dnd-kit with optimistic mutations via React Query, so drag-drops feel instant and roll back cleanly on server error. The analytics view memoizes chart inputs aggressively because Recharts re-renders are expensive at scale.
Stack & structure.
Frontend
- React 18 + Vite
- TailwindCSS for styling
- Zustand (board / squads / filters slices)
- React Query (server cache + optimistic mutations)
- Recharts for the analytics dashboard
Zustand was chosen over Redux to keep state colocated with the features that own it.
Backend
- Node.js + Express
- MongoDB
- JWT auth
- RESTful resource APIs
What you can actually do.
Kanban with drag & drop
Optimistic moves powered by @dnd-kit and React Query mutations.
Squad management
Group members into squads with scoped boards and analytics.
Real-time search
Debounced, multi-field fuzzy search across tasks and members.
Analytics dashboard
Five chart types covering velocity, distribution, and progress.
Auth + sessions
JWT-secured sessions with protected routes and role-aware UI.
Responsive layout
Designed mobile-first so the board collapses cleanly on small screens.
In motion.
What was hard, and what I took from it.
Drag-drop without flicker
Pairing optimistic UI with a real server is harder than it looks. Naive implementations briefly snap back. I solved it by keying mutations to the dragged task and rolling back only the affected card on failure.
Analytics aggregation cost
Recharts re-renders on every state tick. I memoized series at the selector level and avoided derived-state recomputation by holding aggregates outside React render scope.
What I shipped.
- Shipped a full-stack PM tool with end-to-end auth, board, squad, and analytics flows.
- Codebase organized around feature-owned state slices rather than a single global store.
- Demonstrates judgment around when to reach for Zustand, React Query, and memoization.