Taskflow

A modern, full-stack task management application built with Next.js, featuring authentication, CRUD operations, and intuitive task organization. This portfolio project extends beyond The Odin Project's Todo List, providing a seamless experience for managing tasks and organizing them into groups with a clean and intuitive user interface.

Live Demo: Taskflow
Video Tutorial: Complete Walkthrough on YouTube - Learn how to use all of Taskflow's features

Table of Contents

• Taskflow
  • Table of Contents
  • Features
    • Task Management
    • Organization & Productivity
    • User Experience
    • Security & Infrastructure
  • Screenshots
    • Desktop (MacBook Air)
    • Tablet (iPad Pro 11")
    • Mobile (iPhone 13 Pro)
  • Technologies Used
    • Core Framework
    • UI & Styling
    • Data & State Management
    • Forms & Validation
    • Utilities & Enhancements
    • Authentication & Security
    • Hosting & Deployment
  • Project History
  • Running Locally
    • Prerequisites
    • Setup Steps
    • Installing as a PWA
      • On Desktop (Chrome, Edge, or Brave)
      • On iOS (Safari)
      • On Android (Chrome or Edge)
    • Getting Environment Variables
      • Database URLs (PostgreSQL)
      • Clerk Keys
    • Seeding the Database
  • Deployment
    • Setting Up Clerk Webhook
  • Contributing
  • Support
  • Future Improvements
  • Acknowledgments

Features

Task Management

• Full CRUD Operations: Create, read, update, and delete tasks and groups
• Priority System: Assign and filter tasks by priority levels (low, medium, high)
• Due Date Tracking: Set due dates with smart relative time formatting
• Completion Tracking: Toggle task completion status with visual indicators
• Task Details: View and edit task details in a dedicated dialog

Organization & Productivity

• Group Organization: Organize tasks into custom groups for better structure
• Dashboard Overview: Visual progress tracking with completion statistics
• Advanced Search: Search tasks by title or description
• Smart Filtering: Filter tasks by priority, completion status, and group
• Bulk Operations: Efficiently manage multiple tasks at once:
  • Bulk mark complete/incomplete
  • Bulk update priority levels
  • Bulk move between groups
  • Bulk delete

User Experience

• Progressive Web App (PWA): Install Taskflow on your device for a native app-like experience:
  • Install to home screen on mobile and desktop
  • Standalone mode with full-screen experience
  • Works on iOS, Android, and desktop browsers
• Keyboard Shortcuts: Power user features for faster navigation:
  • Ctrl/Cmd + B - Toggle sidebar
  • Ctrl/Cmd + Alt/Option + T - Add new task
  • Ctrl/Cmd + Alt/Option + C - Toggle selected tasks
• Responsive Design: Seamless experience on desktop, tablet, and mobile devices
• Dark Mode: Built-in theme switching with system preference detection
• Beautiful UI: Modern, clean interface with smooth animations

Security & Infrastructure

• Secure Authentication: Powered by Clerk for secure user authentication
• User Isolation: Each user's data is completely isolated and secure

Screenshots

Desktop (MacBook Air)

Tablet (iPad Pro 11")

Mobile (iPhone 13 Pro)

Technologies Used

Core Framework

• Next.js 15 - React framework with App Router for full-stack development
• TypeScript - Type-safe JavaScript for better developer experience

UI & Styling

• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - Beautiful component library built on Radix UI
• Motion - Production-ready motion library for React (formerly Framer Motion)

Data & State Management

• PostgreSQL - Robust relational database
• Prisma - Next-generation ORM for database access
• TanStack Query - Powerful data synchronization for React
• TanStack Table - Headless UI for building tables

Forms & Validation

• React Hook Form - Performant forms with easy validation
• Zod - TypeScript-first schema validation

Utilities & Enhancements

• date-fns - Modern JavaScript date utility library
• cmdk - Command menu component
• Sonner - Toast notification library
• Vercel Analytics - Web analytics and performance monitoring

Authentication & Security

• Clerk - Complete authentication and user management solution

Hosting & Deployment

• Vercel - Platform for frontend deployment

Project History

This project has evolved through multiple iterations, demonstrating continuous improvement and learning:

• v1 - Initial vanilla JavaScript, HTML, and CSS implementation

  • GitHub | Live Demo

• v2 - Enhanced version with improved structure using SCSS and Bootstrap, inspired by Todoist. This version became one of the most liked solutions (submitted as GDA) of The Odin Project's Todo List project and served as the foundation for v3.

  • GitHub | Live Demo

• v3 - Full-stack Next.js application with authentication, featuring a solid backend architecture with room for frontend enhancement.

  • GitHub | Live Demo

• v4 - Current version: a comprehensive revamp of v3 with enhanced features, improved UX, and modern UI

  • GitHub | Live Demo

Running Locally

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js 18.x or higher (Download)
• A package manager: bun, npm, yarn, or pnpm (examples use bun)
• PostgreSQL database (local or cloud instance like Supabase, Neon, Railway, or Prisma Postgres)
• Git (Download)
• A Clerk account for authentication (Sign up)

Setup Steps

1. Clone the Repository

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

2. Install Dependencies

   bun install

3. Set Up Environment Variables

   Create a .env file in the root directory. You can refer to .env.example as a template for the required environment variables:

   # Database
   POSTGRES_PRISMA_URL="postgresql://user:password@host:port/database?schema=public&pgbouncer=true"
   POSTGRES_URL_NON_POOLING="postgresql://user:password@host:port/database?schema=public"
   
   # Clerk Authentication
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_..."
   CLERK_SECRET_KEY="sk_test_..."

   See Getting Environment Variables below for detailed instructions on obtaining these values.

4. Set Up PWA Icons (Optional but recommended)

   For the app to be installable, you need to add PWA icons to the /public directory:

   • icon-192x192.png (192x192 pixels)
   • icon-512x512.png (512x512 pixels)
   • icon-192x192-maskable.png (192x192 pixels, with padding)
   • icon-512x512-maskable.png (512x512 pixels, with padding)

   See public/PWA-ICONS-README.md for detailed instructions on creating these icons.

   Note: The app will work without these icons, but users won't be able to install it to their home screen.

5. Set Up the Database

   # Run database migrations (automatically generates Prisma Client)
   bunx prisma migrate dev
   
   # (Optional) Open Prisma Studio to view/edit database
   bunx prisma studio

6. Start the Development Server

   bun run dev

   The application will be available at http://localhost:3000.

Installing as a PWA

Taskflow can be installed as a Progressive Web App for a native app-like experience:

On Desktop (Chrome, Edge, or Brave)

1. Visit the Taskflow website
2. Look for the install icon (⊕) in the address bar
3. Click "Install" to add Taskflow to your applications

On iOS (Safari)

1. Open Taskflow in Safari
2. Tap the Share button (square with arrow pointing up)
3. Scroll down and tap "Add to Home Screen"
4. Tap "Add" to install

On Android (Chrome or Edge)

1. Open Taskflow in your browser
2. A banner will appear prompting you to install, or
3. Tap the menu (three dots) → "Install app"
4. Follow the prompts to install

Once installed, Taskflow will open in its own window without browser UI, providing a cleaner, more focused experience.

Getting Environment Variables

Database URLs (PostgreSQL)

1. Create a PostgreSQL database (local or cloud)

2. For Local Development: Both URLs can be the same direct connection string

3. Format: postgresql://username:password@host:port/database?schema=public

   Note: For production/Vercel deployments, use connection pooling URL for POSTGRES_PRISMA_URL and direct URL for POSTGRES_URL_NON_POOLING.

Clerk Keys

1. Sign up at Clerk
2. Create a new application
3. Go to API Keys in your Clerk dashboard
4. Copy:
   • NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY (starts with pk_test_ or pk_live_)
   • CLERK_SECRET_KEY (starts with sk_test_ or sk_live_)

Seeding the Database

To populate the database with sample data for development:

bun run seed

This will create sample groups and tasks. You can optionally set the SEED_USER_ID environment variable to use a specific user ID for seeded data.

Note: The seed script will create data for the user ID specified in SEED_USER_ID (defaults to "seed-user-123" if not set). Make sure you're authenticated with the corresponding user when viewing seeded data.

Deployment

When deploying Taskflow to production, ensure you complete the following steps for a secure and fully functional application.

Setting Up Clerk Webhook

Required for Production: This webhook ensures user data is properly deleted when users delete their accounts (GDPR compliance and best practices).

1. Add Webhook Secret to Environment Variables

   Add the following to your production environment variables:

   CLERK_WEBHOOK_SIGNING_SECRET="whsec_..."

2. Configure Webhook in Clerk Dashboard

   • In your Clerk dashboard, go to Webhooks
   • Click Add Endpoint
   • Enter your production endpoint URL: https://yourdomain.com/api/webhooks/clerk
   • Subscribe to the user.deleted event
   • Save the endpoint
   • Copy the Signing Secret (starts with whsec_)
   • Add it to your production environment variables as CLERK_WEBHOOK_SIGNING_SECRET

3. Verify Webhook is Working

   When a user deletes their account through Clerk, all their tasks and groups will be automatically removed from the database.

   Note for Local Development: To test webhooks locally, use a tool like ngrok to expose your local server and configure the ngrok URL in Clerk's webhook settings.

Contributing

Contributions, issues, and feature requests are welcome! Feel free to:

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

Please ensure your code follows the existing style.

Support

If you find this project helpful or interesting, consider supporting me:

☕ Buy me a coffee

Future Improvements

This project is continuously evolving, and I plan to keep improving it with new features and enhancements. Some planned additions include:

• Push Notifications: Real-time push notifications for task reminders and due dates (PWA install functionality is complete; push notifications to be added)
• Offline Support: Service worker-based caching for offline access to tasks
• More features coming soon...

Acknowledgments

The original version of this project was built as part of my web development learning journey using The Odin Project curriculum. Special thanks to them for providing the Todo List project lesson and comprehensive curriculum.