TaskFlow

Project Overview

TaskFlow is an all-in-one productivity tool crafted to streamline task organization through a modern web interface and a scalable backend architecture.

I built this project to demonstrate my ability to handle complex, enterprise-grade authentication flows and global state management, while maintaining a premium, highly interactive user experience. The application architecture cleanly separates concerns between a highly responsive React frontend and a secure, RESTful Django backend.

Key Features in Detail

🔐 Secure Authentication System

Security was a primary focus for TaskFlow. Instead of standard password authentication, I implemented a robust One-Time Password (OTP) flow.

• Email-based OTP: Users receive a time-sensitive 6-digit OTP to verify their identity during registration and login.
• Redis Caching: Unverified user data and OTPs are temporarily cached in Redis. This prevents the primary PostgreSQL database from being bloated with incomplete or malicious registration attempts.
• Session Management: Secure JWT (JSON Web Tokens) access and refresh token rotation handles persistent user sessions.

📊 Advanced Task Dashboard

The core of the application is a deeply interactive dashboard that visualizes the user's workload.

• Comprehensive Analytics: Real-time progress bars and metric cards give users an instant overview of their Completed, Pending, and High-Priority tasks.
• Sorting & Filtering Engine: Users can instantly organize their tasks by Due Date, Priority, Title, or Status without unnecessary network requests, thanks to optimized client-side filtering.
• Interactive Calendar: A custom visual calendar representation of upcoming deadlines featuring seamless click-to-add functionality.

🎨 Dynamic User Experience (UX)

TaskFlow isn't just functional; it feels like a premium product.

• Theme Engine: I built a custom theme provider supporting multiple color palettes (Blue, Purple, Green) allowing users to personalize their workspace.
• System Theme Detection: The application automatically detects and respects the user's system-level Dark or Light mode preferences.
• Polished UI: Implementation of subtle micro-animations, responsive grid layouts, and modern glassmorphism design elements.

Architectural Decisions & Tech Stack

Frontend Architecture

• React.js & Vite: Chosen for lightning-fast hot module replacement and optimized production builds.
• Redux Toolkit (RTK): Used to manage complex global state (like active themes, user sessions, and task lists) and to handle asynchronous API calls cleanly via Redux Thunks.
• Tailwind CSS: Enabled rapid, utility-first UI development while keeping the CSS bundle size minimal.

Backend Architecture

• Django 5.x & DRF: Provided a robust, batteries-included framework for rapidly building a secure REST API.
• PostgreSQL: Serves as the primary ACID-compliant relational database for persistent user and task data.
• Redis: Acts as an incredibly fast in-memory data store for caching OTPs and managing short-lived registration sessions.

DevOps

• Docker & Docker Compose: The entire application (Frontend, Backend, Postgres, Redis) is completely containerized. This ensures that the app can be spun up on any machine with a single docker-compose up command, eliminating "it works on my machine" issues.