TaskFlow AI

The work, made clear. TaskFlow AI helps your team plan with intention, see what's really moving, and turn everyday effort into insight — powered by Google Gemini.

---

📑 Table of Contents

Click to expand

• Overview
• Why TaskFlow AI?
• Features
• System Design & Architecture
• Tech Stack
• Project Structure
• Installation
• Environment Variables
• Run Project
• API Endpoints
• Authentication
• AI Workflow & Features
• Performance
• Future Vision & Roadmap
• Contributing
• License
• Developer

---

🔭 Overview

TaskFlow AI is a next-generation project management tool built for modern teams. Moving beyond simple task tracking, TaskFlow AI leverages the power of Google Gemini AI to act as a proactive project manager—helping you break down complex projects, prioritize work intelligently, and analyze productivity trends.

From its premium glassmorphism UI to its deeply integrated AI capabilities, TaskFlow AI provides a seamless workspace to manage everything from daily to-dos to large-scale team projects.

---

🏆 Why TaskFlow AI?

While platforms like Trello, Notion, and ClickUp are powerful, TaskFlow AI differentiates itself through native AI integration and a premium, distraction-free aesthetic.

• AI-First Design: It doesn't just store your tasks; it analyzes them. Gemini AI automatically suggests priority levels, identifies bottlenecks, and helps break down vague goals into actionable subtasks.
• Productivity Analytics: Deep insights into how you work, complete with beautiful visualizations powered by Recharts.
• Premium UX: Built to feel like a high-end macOS application or top-tier SaaS (Linear/Raycast style) with smooth Framer Motion animations, customizable accent colors, and persistent Dark Mode.

---

✨ Features

🔐 Authentication

• Google OAuth (Google Identity Services): Seamless one-tap login.
• Continue as Guest: Instant access without account creation.
• Email/Password Authentication: Traditional signup with secure password hashing.
• JWT Authentication: Stateless and secure session management.
• Protected Routes: React Router guarding private application views.
• Google Account Linking: Automatically links Google logins to existing accounts.

🧠 AI Integration

• AI Task Breakdown: Gemini AI intelligently splits large projects into manageable tasks.
• AI Insights: Daily planning and productivity suggestions.
• Estimated Effort: Automatically estimates task complexity.
• Gemini-powered Project Planning: Native integration with Google's latest models.

📋 Task Management

• Drag & Drop Kanban: Move tasks seamlessly across columns.
• Bulk Task Creation: Add multiple tasks efficiently.
• Project CRUD: Create, read, update, and delete projects.
• Task CRUD: Full lifecycle management for individual tasks.
• Smart Status Management: Automatically updates workflows.

🤝 Collaboration

• Collaborative Projects: Work together natively with multi-user project collaboration.
• Secure Invite Link Sharing: Share projects safely with rotation and expiry.
• Member Management: Track members and control access.
• Task Assignment: Assign specific tasks to individual project members.
• Activity Logging: Comprehensive audit logs for project and task actions.

⚙️ Settings & Experience

• Theme Persistence: Stores user preferences in localStorage for Dark / Light Theme.
• Accent Color Customization: Personalize the UI look and feel.
• Layout Preferences: Adjust the workspace density to your liking.
• Glassmorphism UI: Premium visual aesthetic with translucent elements.
• Reduced Motion Support: Accessible animations tailored to user settings.

📈 Analytics

• Personal Analytics: Productivity metrics are strictly isolated based on your assigned tasks.

---

📊 System Design & Architecture

User
   │
   ▼
Authentication
   │
   ▼
Projects
 ├── Owner
 ├── Members
 ├── Invite Links
 │
 ▼
Tasks
 ├── Assignment
 ├── Activity
 │
 ▼
AI
Analytics

---

💻 Tech Stack

Frontend

• Framework: React 18 with TypeScript (via Vite)
• Styling: Tailwind CSS (v4)
• Animations: Framer Motion
• Icons: Lucide React
• Data Visualization: Recharts
• Networking: Axios with global interceptors
• Routing: React Router v6

Backend

• Runtime: Node.js
• Framework: Express.js
• Database: MongoDB
• ORM/ODM: Mongoose
• Authentication: JWT (JSON Web Tokens), bcrypt, & Google OAuth
• AI Integration: @google/genai (Gemini API)
• Language: TypeScript

Deployment

• Frontend: Vercel
• Backend: Render

---

📁 Project Structure

taskflow-ai/
├── backend/
│   ├── src/
│   │   ├── controllers/    # Request handlers (e.g., auth.controller.ts)
│   │   ├── middleware/     # Custom Express middleware (e.g., auth, errors)
│   │   ├── models/         # Mongoose schemas (User, Task, Project)
│   │   ├── routes/         # Express API routes
│   │   ├── services/       # Business logic (e.g., AI integration)
│   │   ├── app.ts          # Express app configuration
│   │   └── server.ts       # Server entry point
│   ├── package.json
│   └── tsconfig.json
│
└── frontend/
    ├── src/
    │   ├── components/     # Reusable UI components (Buttons, Cards, Inputs)
    │   ├── context/        # React Contexts (Auth, Theme, Notifications)
    │   ├── hooks/          # Custom React hooks
    │   ├── layouts/        # Page layouts (Sidebar, Header)
    │   ├── pages/          # Main application views (Dashboard, Settings, etc.)
    │   ├── services/       # API integration layer
    │   ├── types/          # TypeScript interfaces
    │   ├── utils/          # Helper functions
    │   ├── App.tsx         # Root component & routing
    │   └── index.css       # Global styles & Tailwind config
    ├── index.html
    ├── vite.config.ts
    └── package.json

---

🚀 Installation

Follow these steps to get the project running locally.

1. Clone the repository

git clone https://github.com/MaybeSomeone-arc18/taskflow-ai.git
cd taskflow-ai

2. Install Frontend Dependencies

cd frontend
npm install

3. Install Backend Dependencies

cd ../backend
npm install

---

🔐 Environment Variables

Create a .env file for the backend and a .env file for the frontend.

Frontend (frontend/.env)

Variable	Description	Example
VITE_API_URL	The URL of your backend API	http://localhost:5000/api/v1
VITE_GOOGLE_CLIENT_ID	Google OAuth Client ID	your-google-client-id.apps.googleusercontent.com

Backend (backend/.env)

Variable	Description	Example
PORT	The port for the Express server	5000
MONGO_URI	Your MongoDB connection string	mongodb://localhost:27017/taskflow
JWT_SECRET	Secret key for signing JSON Web Tokens	your_super_secret_key_123
CLIENT_URL	The URL of your frontend application	http://localhost:5173
GOOGLE_CLIENT_ID	Google OAuth Client ID for token verification	your-google-client-id...
GEMINI_API_KEY	Google Gemini API Key for AI features	your-gemini-api-key

---

⚡ Run Project

You will need two terminal windows to run both the frontend and backend simultaneously.

Development

Terminal 1 (Backend):

cd backend
npm run dev

Terminal 2 (Frontend):

cd frontend
npm run dev

Production

Backend:

cd backend
npm run build
npm start

Frontend:

cd frontend
npm run build
# Serve the output from the `dist/` folder using Nginx, Vercel, or a static server.

---

🌐 API Endpoints

View Core API Endpoints

Method	Endpoint	Description	Auth Required
POST	/api/v1/auth/register	Register a new user	❌
POST	/api/v1/auth/login	Authenticate user & get JWT	❌
POST	/api/v1/auth/google	Authenticate using Google OAuth ID token	❌
POST	/api/v1/auth/guest	Create a temporary guest session	❌
GET	/api/v1/auth/me	Get current logged-in user profile	✅
PUT	/api/v1/auth/password	Change account password	✅
GET	/api/v1/projects	Get all workspace projects	✅
POST	/api/v1/projects	Create a new project	✅
GET	/api/v1/tasks	Get all tasks (supports filtering)	✅
POST	/api/v1/tasks	Create a new task	✅
PUT	/api/v1/tasks/:id	Update a task (status, priority, etc)	✅
DELETE	/api/v1/tasks/:id	Delete a task	✅
POST	/api/v1/ai/plan	Generate AI task breakdowns	✅
GET	/api/v1/analytics	Get user productivity metrics	✅

---

🛡️ Authentication

TaskFlow AI features a multi-tiered authentication system ensuring a smooth user experience while maintaining robust security.

Users can log in via Email & Password Authentication, Google OAuth, or Guest Login. Google users are securely verified on the backend using the google-auth-library before a session is granted. All flows converge to issue a signed JSON Web Token (JWT Authentication), which is used to guard Protected Routes.

[ User ] 
   │
   ├─ (A) Traditional Login -> bcrypt.compare()
   ├─ (B) Google OAuth -> Verify ID Token via google-auth-library
   ├─ (C) Guest Mode -> Generate temporary user profile
   ▼
[ Express API ]
   │
   ├─ Generates signed JWT (includes user ID and Email)
   ▼
[ Frontend ]
   │
   ├─ Stores JWT in LocalStorage
   ├─ Attaches `Authorization: Bearer <token>` to Axios Interceptor
   ▼
[ Protected API Routes ] ── Validates JWT signature ──► [ Access Granted ]

---

🧠 AI Workflow & Features

TaskFlow AI seamlessly integrates Google Gemini to elevate your workflow from passive tracking to active management.

AI Implementation Workflow:

1. User Prompt: The user inputs a project idea or task description into the AI Planner.
2. Backend: The Express server receives the prompt and constructs an engineered context.
3. Gemini: The @google/genai model processes the request.
4. JSON Parsing: The backend extracts and validates the structured JSON response from Gemini.
5. Task Suggestions: The parsed array of sub-tasks, complete with estimated effort and priority, is generated.
6. Displayed in AI Panel: The frontend renders the suggestions, allowing the user to seamlessly add them to their Kanban board.

Key AI Capabilities:

• AI Task Breakdown: Automatically splits large objectives into actionable sub-tasks.
• Daily Planner: Generates an optimized daily schedule based on active priorities.
• Project Health: Assesses the current status and risks of your projects.

Privacy Note: Within collaborative projects, the AI context window explicitly exposes only your assigned tasks and unassigned tasks. It never exposes your teammates' assigned tasks, ensuring strict privacy isolation.

---

⚡ Performance

• Optimized Rendering: React components are carefully memorized using useMemo and useCallback to prevent unnecessary re-renders, especially on the Kanban board.
• Reusable Components: A robust design system built on generic UI components (Card, Button, Input).
• Persistent Theme: Theme preferences, sidebar toggles, and user sessions are instantly hydrated from localStorage to prevent UI flicker.
• Responsive Layout: Tailwind's utility-first approach ensures minimal CSS payload while maintaining a pixel-perfect layout across all devices.

---

🔒 Security

• JWT Authentication: Stateless, signed tokens securely manage sessions.
• Password Hashing: bcrypt prevents raw passwords from being stored in the database.
• Google OAuth Verification: Backend explicitly verifies Google ID tokens rather than trusting the client.
• Route Protection: Frontend routing and backend middleware enforce strict authorization checks.
• Member Authorization Middleware: Verifies project membership at the request level before granting access to project resources or tasks.
• Invite Token Expiry: Secure, cryptographically generated invite links expire automatically and rotate on demand.
• CORS: Cross-Origin Resource Sharing is strictly configured to only accept requests from the frontend client.
• Rate Limiting: express-rate-limit mitigates brute-force attacks on auth endpoints and prevents invite generation spam.
• Graceful Shutdown: The server executes a controlled close on critical exceptions, preventing active requests from being abruptly dropped.
• Environment Variables: Sensitive keys are kept completely out of the source code.
• Input Validation: Zod (Frontend) and Joi/Mongoose (Backend) ensure all inputs are sanitized.

---

🤝 Collaboration

TaskFlow AI Version 2.0 introduces native multi-player workspace features:

• Project Sharing: Easily share workspaces with other users.
• Invite Links: Generate secure tokens to securely onboard members.
• Member Management: Project creators can view and remove members on demand.
• Task Assignment: Tasks can be explicitly assigned to project members to eliminate workflow ambiguity.
• Activity Tracking: A detailed audit log tracks core project lifecycle events (joins, leaves, task creation, assignments, and completions).

---

📸 Screenshots

UI previews of TaskFlow AI.

Dashboard

Kanban Board

Analytics

AI Planner

Login

Register

Settings

---

🚀 Deployment

The platform is designed to be easily deployed to modern cloud providers:

• Frontend: Vercel (Recommended for Vite/React applications)
• Backend: Render or Heroku (Node.js/Express)
• Database: MongoDB Atlas (Cloud database)

Ensure all environment variables from .env are configured in your deployment platform's dashboard.

---

📈 Future Vision & Roadmap

• Collaborative Projects: Invite links, task assignment, and shared workspaces (Released in v2.0).

• Data Privacy Isolation: Analytics and AI models isolate data by assignee (Released in v2.0).

• Real-time Collaboration: WebSockets for live Kanban board updates across teams.

• Team Workspaces: Role-based access control (Admin, Member, Viewer).

• AI Chat Assistant: A sidebar AI agent to query project status.

• Google Calendar Sync: Two-way synchronization for deadlines.

• Slack Integration: Push notifications for task updates.

---

⚠️ Known Limitations

• Guest Accounts: Guest sessions are permanent in the database until manually cleaned up. Future updates will introduce an automated cron job to purge inactive guest accounts.
• Offline Support: The application currently requires an active internet connection to interact with the database and AI features.

---

🧗 Challenges Faced

• Authentication Architecture: Designing a seamless system that elegantly handles traditional logins, Google OAuth linking, and temporary Guest sessions without compromising the data model.
• Gemini Model Compatibility: Parsing unstructured text responses from the AI into strictly typed JSON objects required careful prompt engineering and fallback validation.
• Environment Variable Management: Managing separate environments for frontend builds (Vite) and backend servers required a disciplined approach to avoid leaking secrets.

---

🌟 Project Highlights

• Modern SaaS UI: A beautiful, responsive interface designed to feel like a premium SaaS product (e.g., Linear, Vercel).
• Google OAuth & JWT: A robust, hybrid authentication architecture built for scale.
• AI-First Project Management: Moving beyond manual task entry by integrating Google Gemini for automated planning.
• Drag & Drop Kanban: A fluid, native-feeling task management experience built on modern React principles.

---

🤝 Contributing

Contributions make the open-source community an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📜 License

Distributed under the MIT License. See LICENSE for more information.

---

👨‍💻 Developer

Made with ❤️ by Sanskar Kharya