TaskFlow
Cloud Task Management Application with Row Level Security
๐ฏ Project Overview & Objective
A cloud task management application built with React, Vite, and Supabase, providing multi-user authentication, cloud persistence in PostgreSQL, and database-level data isolation via Row Level Security (RLS).
โก The Engineering Challenge
Modern task management platforms have become bloated with complex hierarchy settings, forced subscription tiers, and heavy bundles that slow down simple daily task tracking. Users need an authenticated, zero-lag task manager that loads instantly, syncs across devices, and guarantees database-level privacy without unnecessary complexity.
๐๏ธ Architecture & System Design
Frontend Architecture
React 18 single-page application built with Vite and Tailwind CSS, deployed to Vercel's global edge network for instant loading and sub-second navigation.
Backend & Service Layer
Serverless architecture powered by Supabase BaaS, utilizing PostgreSQL for persistence, automated session handling, and instant RESTful API generation.
Database & Persistence
PostgreSQL database enforcing privacy through Row Level Security (RLS) policies directly inside the database engine: users can strictly read, write, and modify only rows where auth.uid() equals their own user_id.
Auth, Permissions & Security
Supabase Auth handling JWT session tokens, email/password registration, password recovery, and secure cookie storage.
Infrastructure & Packaging
Serverless edge hosting on Vercel with custom domain configuration and automated continuous integration deployments from GitHub.
System Architecture Data Flow
+-----------------------------------------------------------------------------+
| CLIENT APPLICATION |
| React 18 SPA + Vite + Tailwind CSS |
| - Task Creation & Deadlines - Priority Badges (Low, Med, High) |
| - Dynamic Status Filter Tabs - Optimistic UI Completion Toggles |
+--------------------------------------|--------------------------------------+
| Supabase JS SDK (HTTPS / REST)
v
+-----------------------------------------------------------------------------+
| SUPABASE MANAGED BACKEND |
| Edge Authentication Service (GoTrue) |
| - JWT Session Token Lifecycle - onAuthStateChange Background Listener|
+--------------------------------------|--------------------------------------+
| Parameterized SQL Queries (Bearer JWT)
v
+-----------------------------------------------------------------------------+
| POSTGRESQL ROW LEVEL SECURITY |
| PostgreSQL Database Engine |
| - RLS Policy: auth.uid() = user_id (SELECT, INSERT, UPDATE, DELETE) |
| - Foreign Key Constraints & Automated Indexed Timestamps |
+-----------------------------------------------------------------------------+๐ Implemented Capabilities
Multi-User Task Management
Fast task creation with priority levels (Low, Medium, High), due date scheduling, detailed notes, and completion toggle states.
Database-Enforced Row Level Security (RLS)
Security policies written in PostgreSQL SQL ensuring that data isolation is physically guaranteed by the database engine rather than application code.
Optimistic State Management
Immediate visual feedback on task status changes and deletions with automatic background rollback if network sync encounters errors.
Dynamic Filtering & Sorting
Multi-criteria filtering by completion status, priority badges, and search queries with instant client-side responsiveness.
๐ ๏ธ Engineering Challenges & Solutions
Engineering Multi-Tenant Row Level Security Policies
In direct client-to-database architectures, missing or misconfigured RLS rules can expose every user's private tasks through API inspection.
Implemented granular RLS policies for each operation (SELECT, INSERT, UPDATE, DELETE) using auth.uid() checks, verified through automated API queries using different user tokens to confirm zero data leakage.
Seamless Session Persistence and Token Refresh
Handling expired JWT authentication tokens during active task editing sessions without losing in-flight user input.
Integrated Supabase onAuthStateChange listener to automatically refresh tokens in the background and preserve active form states during renewal cycles.
โ๏ธ Technical Decisions & Architectural Trade-offs
Supabase PostgreSQL with RLS vs Custom Node.js Auth Backend
Enforced data access rules physically at the PostgreSQL database engine layer via Row Level Security, eliminating the need to maintain and patch a separate middle-tier API server for task CRUD.
Complex custom business logic must be authored as SQL policies or Postgres functions rather than imperative JavaScript code.
Optimistic UI Updates vs Await-Before-Render
Implemented optimistic state modification in React so task completion toggles and reordering feel instantaneous to the user.
Requires maintaining an in-memory rollback cache if the network mutation fails.
Laser-Focused MVP vs Bloated Subscription SaaS
Kept the product focused as a fast multi-user task management MVP with clean UX rather than bloating it with subscription billing, Stripe webhooks, or team workspace hierarchies.
Multi-user collaboration features are reserved for future iterations.
๐งช Testing Strategy & Verification
Quality Strategy: Live edge deployment testing, Supabase RLS security policy validation across multiple user accounts.
Verified Test Scenarios
- Cross-user data isolation verification: Confirmed User A cannot read or modify User B's tasks through raw Supabase REST client queries.
- Token expiration and seamless session renewal using onAuthStateChange listeners.
- Form submission and validation safeguards preventing empty task creation.
- Real-world production availability and performance testing on Vercel's global edge network (https://tasksflow.space/).
๐ Results & Technical Learnings
Verified Implemented Outcomes
- Successfully deployed and running live in production at tasksflow.space with stable availability on Vercel edge infrastructure.
- Delivered an authenticated task management MVP demonstrating clean serverless architecture and PostgreSQL RLS.
- Open-source codebase available on GitHub at bouhouchhamza/taskFlow.
Architectural Takeaways
- PostgreSQL Row Level Security allows developers to build secure, multi-tenant applications without writing custom middleware backends.
- Optimistic UI updates are essential for productivity applications to eliminate perceived network latency.
๐งฐ Complete Technology Stack
Need a Similar System or Application?
I collaborate with businesses and agencies to engineer scalable web backends, interactive client applications, and custom automation workflows.