# 🚀 TaskFlow — Modern Task Management SaaS A production-grade task management platform built with the **PERN Stack (PostgreSQL, Express, React, Node.js)** and powered by **Prisma ORM**. Designed with inspiration from modern productivity tools such as Linear, Notion, and Vercel, TaskFlow focuses on performance, usability, accessibility, and clean architecture. --- ## 🌟 Overview TaskFlow is more than a simple CRUD application. It is a scalable task management system that demonstrates modern full-stack engineering practices including authentication, advanced task operations, responsive design, reusable architecture, testing, security, and deployment. The project was developed to showcase real-world software engineering skills, clean code principles, and production-ready development workflows. --- ## ✨ Key Features ### 🔐 Authentication & Security * Secure user registration and login * Password hashing using bcrypt * JWT-based authentication * Protected API routes * Request validation * Rate limiting * Security headers using Helmet --- ### 📋 Task Management * Create tasks * Update tasks * Delete tasks * View task details * Mark tasks as completed * Dynamic UI updates without page refresh Each task supports: * Title * Description * Category * Priority * Status * Due Date --- ### 🗑 Smart Deletion System Instead of permanently deleting tasks instantly: * Soft delete mechanism * 5-second undo window * Toast notification restoration * Better user experience and safety --- ### ⚡ Bulk Operations Select multiple tasks and perform actions instantly: * Bulk Complete * Bulk Delete * Efficient batch updates --- ### 📊 Productivity Dashboard Beautiful analytics dashboard displaying: * Total Tasks * Completed Tasks * Pending Tasks * High Priority Tasks * Productivity Percentage Provides users with an instant overview of their progress. --- ### 📈 Task Insights Interactive chart displaying: * Completed tasks over the last 7 days * Productivity trends * Progress visualization Built using Recharts. --- ### 🔎 Advanced Search & Filtering Real-time task discovery through: * Debounced search * Status filtering * Category filtering * Priority filtering Sorting options include: * Newest First * Oldest First * Due Date * Priority --- ### 🗓 Smart Due Date System Visual indicators help users prioritize work: * 🔴 Overdue * 🟠 Due Today * 🟡 Due Tomorrow * 🟢 Upcoming --- ### 🌙 Modern User Experience * Dark / Light Theme * Theme persistence via localStorage * Smooth transitions * Responsive layouts * Mobile-first design --- ### ⌨ Productivity Shortcuts Built-in keyboard shortcuts: | Shortcut | Action | | -------- | --------------- | | N | Create New Task | | / | Focus Search | | Esc | Close Modal | --- ### 💀 Loading & Empty States * Skeleton loading screens * Optimistic UI updates * Friendly empty states * No blank screens --- ### ♿ Accessibility Accessibility-first implementation: * Semantic HTML * Keyboard navigation * Proper labels * Focus management * Screen-reader friendly components --- ### 🧪 Testing Backend: * Jest * Supertest * API endpoint coverage Frontend: * React Testing Library * Component testing --- ## 🏗 Architecture TaskFlow follows a modular and scalable architecture. ### Frontend * Component-driven development * Custom hooks * Context API * Service layer abstraction * Reusable UI system ### Backend * MVC Architecture * Route Controllers * Middleware Layer * Centralized Error Handling * Prisma ORM * Secure Authentication Flow --- ## 🛠 Tech Stack ### Frontend * React (Vite) * Tailwind CSS * React Router * Axios * React Hook Form * React Toastify * React Icons * Recharts ### Backend * Node.js * Express.js * Prisma ORM * PostgreSQL (Neon) ### Security * JWT Authentication * bcrypt * Helmet * Express Validator * Rate Limiting ### Testing * Jest * Supertest * React Testing Library ### Deployment * Vercel * Render * Neon Database --- ## 📁 Project Structure ``` taskflow/ ├── backend/ ├── frontend/ ├── docs/ └── README.md ``` The codebase follows a clean separation of concerns with dedicated layers for: * Components * Services * Hooks * Context * Controllers * Routes * Middleware * Database making future scaling and maintenance straightforward. --- ## 🌐 API Overview ### Authentication | Method | Endpoint | | ------ | ---------------- | | POST | /api/auth/signup | | POST | /api/auth/login | ### Tasks | Method | Endpoint | | ------ | ---------------------- | | GET | /api/tasks | | GET | /api/tasks/:id | | POST | /api/tasks | | PUT | /api/tasks/:id | | DELETE | /api/tasks/:id | | PATCH | /api/tasks/:id/restore | | PATCH | /api/tasks/bulk | All task endpoints require JWT authentication. --- ## ⚙ Environment Variables ### Backend ```env PORT=5000 DATABASE_URL= JWT_SECRET= NODE_ENV=development ``` ### Frontend ```env VITE_API_URL=http://localhost:5000/api ``` --- ## 🚀 Getting Started ### Install Dependencies ```bash cd backend npm install cd ../frontend npm install ``` ### Configure Environment Variables Create and configure: ``` backend/.env frontend/.env ``` ### Setup Database ```bash npx prisma migrate dev --name init ``` ### Run Development Servers Backend: ```bash npm run dev ``` Frontend: ```bash npm run dev ``` --- ## 🧪 Running Tests Backend ```bash npm test ``` Frontend ```bash npm test ``` --- ## ☁ Deployment ### Database Neon PostgreSQL ### Backend Render ### Frontend Vercel Deployment-ready configuration has been included for all services. --- ## 📸 Application Preview ### Dashboard Add screenshot here ### Task Management Add screenshot here ### Mobile Experience Add screenshot here --- ## 🎯 What This Project Demonstrates * Full Stack Development * REST API Design * Authentication & Authorization * Database Design * Responsive UI Development * State Management * Testing * Security Best Practices * Deployment Workflows * Clean Architecture * Production-Level Code Organization --- Built with ❤️ using React, Node.js, PostgreSQL, Prisma, and modern web technologies.