Skip to content
JJathuja Sithamparanathan
Back to Projects Archive
STATUS: In Progress
INDEX // 2024Featured Engineering Project

PlanNex

Cross-Platform Task & Project Management Platform

Engineering RoleFull-Stack Developer / Personal Project
Timeline / Year2024
Core DomainReact & TypeScript
Repository StatusIn Progress
SCHEMATIC //plannex.sys_topology.v1

PlanNex Architectural Diagram

PlanNex is a personal full-stack task and project management platform with web and mobile applications.

NODE_01
React
NODE_02
TypeScript
NODE_03
Tailwind CSS
NODE_04
Flutter
NODE_05
Dart
NODE_06
FastAPI
01
THE PROBLEM STATEMENT

Challenge & Ecosystem Context

CORE BOTTLENECK SOLVED

PlanNex is a personal full-stack task and project management platform with web and mobile applications.

PlanNex is a personal full-stack task and project management platform with web and mobile applications.

PROJECT CONSTRAINTS
•Zero-downtime fault tolerance
•Strict type safety & validation
•Minimal network serialization overhead
•Cross-client responsive fidelity
02
SYSTEM CAPABILITIES

Key Architectural Features

02.1 // CAPABILITY

JWT and Google OAuth2 authentication on the web application.

SUBSYSTEM MODULEACTIVE
02.2 // CAPABILITY

Kanban-style drag-and-drop task boards for intuitive workflow organization.

SUBSYSTEM MODULEACTIVE
02.3 // CAPABILITY

Real-time WebSocket notifications for immediate task assignment and state-change updates.

SUBSYSTEM MODULEACTIVE
02.4 // CAPABILITY

Project and milestone tracking integrated with comprehensive calendar views.

SUBSYSTEM MODULEACTIVE
02.5 // CAPABILITY

Flutter mobile app with secure encrypted JWT token storage, auto-login, and Provider-based light/dark theming.

SUBSYSTEM MODULEACTIVE
02.6 // CAPABILITY

Mobile-specific derived task views: overdue, upcoming, and today's tasks, plus calendar-based task navigation.

SUBSYSTEM MODULEACTIVE
02.7 // CAPABILITY

Advanced status and priority filtering on the mobile client.

SUBSYSTEM MODULEACTIVE
03
CRITICAL DIFFERENTIATOR

Challenges & Engineering Solutions

HIGH-CONCURRENCY ARCHITECTURAL TRADE-OFF
VERIFIED PRODUCTION RESOLUTION
The Bottleneck / Obstacle

System Failure Mode Under Peak Load

Designing a shared REST API that satisfies both the rich React web app interaction patterns and the mobile-optimized Flutter client simultaneously, while maintaining consistent real-time state across all clients.

RISK: RACE CONDITIONS & UI FREEZES
The Engineered Solution

Architectural Strategy & Resolution

Implemented a robust WebSocket-based notification architecture with optimistic UI updates in React, and an independently architected Flutter mobile client consuming the same FastAPI backend with Provider state management and encrypted local storage.

OUTCOME: 100% DETERMINISTICVERIFIED
ARCHITECTURAL TOPOLOGY NOTES:

Frontend built with React and TypeScript; Flutter mobile app independently designed with Provider state management and secure local storage. Both clients communicate with a shared FastAPI backend over REST and WebSockets, with MongoDB for flexible document storage.

04
QUANTITATIVE RESULTS

Performance & Benchmarks

Real-time Sync
WebSockets
VERIFIED IN BENCHMARK SUITE
Auth
JWT + OAuth2
VERIFIED IN BENCHMARK SUITE
Mobile
Flutter / Dart
VERIFIED IN BENCHMARK SUITE
Backend
FastAPI + MongoDB
VERIFIED IN BENCHMARK SUITE
05
SPECIFICATION

Tech Stack Composition

ReactTypeScriptTailwind CSSFlutterDartFastAPIMongoDBWebSocketsJWT/OAuth2

Components and modules engineered strictly with type safety, minimal dependency footprints, and production-grade build pipelines.

06
DEPLOYMENT & ARTIFACTS
LIVE DEMO

Local Cluster Only

Self-hosted daemon requiring local container setup.

SOURCE CODE

GitHub Repository

Inspect commit history, test suites, architecture schemas, and Docker configs.

ARTICLE

Writeup In Progress

Technical blog article currently undergoing editorial review.