TaskFlow - Personal Task Management Application

A modern, mobile-first task management application built with React, TypeScript, and Express. TaskFlow helps you organize and track your tasks efficiently with multiple views including calendar scheduling, kanban boards, and project templates.

Features

• 📱 Mobile-First Design - Fully responsive with touch-friendly interactions
• 📅 Calendar View - Schedule tasks with drag-and-drop functionality
• 📊 Kanban Board - Visualize workflow with traditional, weekly, and monthly views
• ⏱️ Time Tracking - Built-in timer to track time spent on tasks
• 🏷️ Labels & Priorities - Color-coded organization system
• 📁 Project Templates - Reusable templates for common workflows
• 🌓 Dark Mode - Automatic theme switching
• 🐳 Docker Ready - Production-ready Docker deployment

Tech Stack

• Frontend: React 18, TypeScript, Tailwind CSS, shadcn/ui
• Backend: Express.js, Node.js
• Database: PostgreSQL with Drizzle ORM
• State Management: TanStack Query
• Build Tools: Vite, ESBuild

Quick Start

Development (Local)

1. Install dependencies:

   npm install
   

2. Start development server:

   npm run dev
   

3. Open in browser:

   http://localhost:5000
   

The development version uses in-memory storage by default.

Production (Docker)

📦 Complete Docker Compose Guide - Step-by-step deployment instructions

Quick Docker Start:

1. Create .env file:

   cp .env.example .env
   

2. Edit .env and set a secure password:

   POSTGRES_PASSWORD=your_secure_password_here
   

3. Start services:

   docker-compose up -d
   

4. Access application:

   http://localhost:5000
   

For detailed instructions including environment variables, security settings, troubleshooting, and database management, see DOCKER-COMPOSE.md.

Project Structure

taskflow/
├── client/                 # React frontend
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   ├── pages/         # Page components
│   │   └── lib/           # Utilities and hooks
│   └── index.html
├── server/                 # Express backend
│   ├── index.ts          # Server entry point
│   ├── routes.ts         # API routes
│   ├── storage.ts        # Storage implementations
│   └── db.ts             # Database connection
├── shared/                 # Shared types and schemas
│   └── schema.ts         # Database schema & types
├── Dockerfile             # Production Docker image
├── docker-compose.yml     # Docker orchestration
└── DEPLOYMENT.md          # Deployment guide

Available Scripts

• npm run dev - Start development server with hot reload
• npm run build - Build for production
• npm start - Start production server
• npm run check - TypeScript type checking
• npm run db:push - Push database schema changes

Environment Variables

Development

NODE_ENV=development
PORT=5000

Production (Docker)

NODE_ENV=production
DATABASE_URL=postgresql://user:password@postgres:5432/taskflow
PORT=5000

See .env.example for all available options.

Database

TaskFlow uses PostgreSQL with Drizzle ORM for type-safe database operations.

Schema

• users - User accounts (future multi-user support)
• labels - Color-coded task labels
• tasks - Task items with metadata

Switching to Database in Development

To use the PostgreSQL database in development:

1. Set environment variable:

   export USE_DB=true
   

2. Ensure DATABASE_URL is set in your environment

3. Start the development server

API Endpoints

Labels

• GET /api/labels - Get all labels
• GET /api/labels/:id - Get specific label
• POST /api/labels - Create new label
• PATCH /api/labels/:id - Update label
• DELETE /api/labels/:id - Delete label

Tasks

• GET /api/tasks - Get all tasks
• GET /api/tasks/:id - Get specific task
• POST /api/tasks - Create new task
• PATCH /api/tasks/:id - Update task
• DELETE /api/tasks/:id - Delete task

Health

• GET /api/health - Health check endpoint

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License

MIT License - see LICENSE file for details

Support

For deployment help, see DEPLOYMENT.md

For issues and questions, please open an issue on the repository.