TaskFlow - Productivity Hub

A modern, full-stack task management application built with React, Express, MongoDB, and Zustand for state management. Features a beautiful dark theme UI that matches the provided design mockup.

Features

🎯 Core Functionality

• Task Management: Create, edit, delete, and organize tasks
• Status Tracking: Todo, In Progress, and Completed states
• Priority Levels: High, Medium, and Low priority assignments
• Due Dates: Set and track task deadlines
• Tags: Organize tasks with custom tags
• Search & Filter: Find tasks quickly with advanced filtering

📊 Analytics & Insights

• Dashboard Overview: Real-time statistics and metrics
• Weekly Activity Charts: Visual representation of task completion
• Priority Distribution: Track task priority patterns
• Productivity Tips: AI-driven suggestions for better workflow
• Completion Rate Tracking: Monitor your progress over time

🔐 Authentication & Security

• Secure Registration/Login: JWT-based authentication
• Password Validation: Strong password requirements
• Session Management: Secure token handling with refresh tokens
• Protected Routes: Authenticated access to all features

🎨 Modern UI/UX

• Dark Theme: Beautiful slate-based color scheme
• Responsive Design: Works seamlessly on all devices
• Smooth Animations: Subtle transitions and micro-interactions
• Intuitive Navigation: Easy-to-use sidebar and navigation
• Real-time Updates: Live data synchronization

Tech Stack

Frontend

• React 19 with TypeScript
• Tailwind CSS 4 for styling
• Zustand for state management
• React Router for navigation
• Lucide React for icons
• Date-fns for date handling
• Vite for build tooling

Backend

• Node.js with Express
• TypeScript for type safety
• MongoDB with Mongoose ODM
• JWT for authentication
• Bcrypt for password hashing
• CORS enabled for cross-origin requests

Project Structure

Taskflow/
├── frontend/                 # React frontend application
│   ├── src/
│   │   ├── components/      # Reusable UI components
│   │   │   ├── Layout.tsx   # Main layout wrapper
│   │   │   ├── StatCard.tsx # Statistics display card
│   │   │   ├── TaskCard.tsx # Individual task component
│   │   │   └── TaskModal.tsx # Task creation/editing modal
│   │   ├── pages/           # Page components
│   │   │   ├── Dashboard.tsx # Main dashboard
│   │   │   ├── Tasks.tsx    # Task management page
│   │   │   ├── Analytics.tsx # Analytics and insights
│   │   │   ├── Settings.tsx # User settings
│   │   │   ├── Login.tsx    # Login page
│   │   │   └── Register.tsx # Registration page
│   │   ├── store/           # Zustand stores
│   │   │   └── useStore.ts  # Global state management
│   │   ├── App.tsx          # Main app component
│   │   ├── main.tsx         # App entry point
│   │   └── index.css        # Global styles
│   ├── package.json
│   └── vite.config.ts       # Vite configuration
│
├── backend/                  # Express backend application
│   ├── src/
│   │   ├── controllers/     # Route handlers
│   │   │   ├── task.controller.ts
│   │   │   └── user.controller.ts
│   │   ├── models/          # Database models
│   │   │   ├── task.model.ts
│   │   │   └── user.model.ts
│   │   ├── routes/          # API routes
│   │   │   ├── task.route.ts
│   │   │   └── user.route.ts
│   │   ├── middlewares/     # Custom middleware
│   │   │   └── auth.middleware.ts
│   │   ├── utils/           # Utility functions
│   │   │   ├── ApiError.ts
│   │   │   ├── ApiResponse.ts
│   │   │   └── asyncHandler.ts
│   │   ├── db/              # Database configuration
│   │   │   └── db.ts
│   │   ├── app.ts           # Express app setup
│   │   └── index.ts         # Server entry point
│   ├── package.json
│   └── tsconfig.json
│
└── README.md

Getting Started

Prerequisites

• Node.js (v18 or higher)
• MongoDB (local or cloud instance)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/yourusername/taskflow.git
   cd taskflow

2. Install backend dependencies

   cd backend
   npm install

3. Install frontend dependencies

   cd ../frontend
   npm install

4. Environment Setup

   Create a .env file in the backend directory:

   MONGODB_URI=mongodb://localhost:27017/taskflow
   PORT=8000
   CORS_ORIGIN=http://localhost:5173
   
   ACCESS_TOKEN_SECRET=your_access_token_secret_here
   ACCESS_TOKEN_EXPIRY=15m
   REFRESH_TOKEN_SECRET=your_refresh_token_secret_here
   REFRESH_TOKEN_EXPIRY=7d

5. Start MongoDB Make sure MongoDB is running on your system.

6. Run the application

   Start the backend server:

   cd backend
   npm run dev

   Start the frontend development server:

   cd frontend
   npm run dev

7. Access the application Open your browser and navigate to http://localhost:5173

API Endpoints

Authentication

• POST /api/v1/users/register - User registration
• POST /api/v1/users/login - User login
• POST /api/v1/users/logout - User logout

Tasks

• GET /api/v1/tasks - Get all tasks (with filtering)
• POST /api/v1/tasks - Create a new task
• PUT /api/v1/tasks/:id - Update a task
• DELETE /api/v1/tasks/:id - Delete a task
• GET /api/v1/tasks/stats - Get task statistics
• GET /api/v1/tasks/recent - Get recent tasks

Features in Detail

Dashboard

• Real-time task statistics
• Current time and weather widgets
• Productivity tips
• Recent tasks overview
• Quick action buttons

Task Management

• Grid and list view modes
• Advanced filtering by status and priority
• Real-time search
• Drag-and-drop functionality (planned)
• Bulk operations (planned)

Analytics

• Weekly activity charts
• Priority distribution graphs
• Status overview
• Productivity insights
• Performance trends

Settings

• Profile management
• Notification preferences
• Security settings
• Appearance customization
• Data export/import

Built with ❤️ by Swastik