TaskFlow - Modern Project & Task Management

A beautiful, feature-rich, production-ready project and task management application built with Next.js, TypeScript, GraphQL, and Prisma.

Live Demo: View Application (Run locally)

Documentation

Quick Start - Get up and running in 5 minutes
SETUP.md - Detailed installation guide with troubleshooting
Features - Complete feature list
Tech Stack - Technologies used
Project Structure - File organization

Features Overview

TaskFlow is a comprehensive task management solution with modern UI/UX, powerful features, and delightful interactions.

Core Functionality

Project & Task Management

📁 Project Management - Create, edit, and organize projects with custom colors and descriptions
✅ Task Tracking - Full CRUD operations for tasks with rich metadata
🎯 Priority System - Set task priorities (Low, Medium, High, Urgent) with visual indicators
📈 Status Management - Track tasks through multiple stages (To Do, In Progress, Review, Done)
🏷️ Smart Tagging - Organize tasks with custom tags for better categorization
📅 Due Date Tracking - Set deadlines and get visual warnings for overdue tasks

Notes & Attachments System 📝🎙️

📝 Task Notes - Add, edit, and delete notes for each task with timestamps
📎 File Attachments - Upload any file type (PDF, images, documents, etc.)
🎙️ Voice Recording - Record audio notes directly in the browser
🖼️ Media Preview - Inline preview for images and audio playback
📊 File Management - Download, preview, and delete attachments with ease

Advanced Features

🔍 Advanced Search - Real-time search across projects and tasks
🎛️ Status Filtering - Filter tasks by status with a single click
📊 Interactive Statistics - Click on stat cards to filter tasks dynamically
- Click "Total Tasks" to view all tasks
- Click "In Progress" to filter in-progress tasks
- Click "Completed" to see finished tasks
📈 Analytics Dashboard - Beautiful charts and metrics visualization
📤 Data Export - Export your tasks to JSON format
⚡ Quick Actions - Sidebar with upcoming deadlines and high-priority tasks

User Experience

Animations & Visual Effects

🎉 Celebration Effects - Confetti animation when completing tasks
✨ Scroll Animations - Elements fade in and slide as you scroll
🎭 Micro-interactions - Smooth hover effects, scale transforms, and transitions
🔢 Animated Numbers - Statistics counters animate on load
🌈 Gradient Background - Beautiful animated gradient background
💫 Staggered Animations - Cards appear with sequential delays

Toast Notifications 🍞

✅ Success Messages - Green toasts for successful operations
❌ Error Messages - Red toasts for errors with helpful messages
⏳ Loading States - Loading toasts for async operations
🎨 Custom Styling - Beautiful, modern toast design

Keyboard Shortcuts ⌨️

⌘K (Ctrl+K) - Focus search bar
⌘P (Ctrl+P) - Create new project
⌘N (Ctrl+N) - Create new task
? - Show keyboard shortcuts help
Esc - Close modals and shortcuts panel

UI/UX Excellence

📱 Fully Responsive - Seamless experience on desktop, tablet, and mobile
🎨 Modern Design - Clean, colorful interface with gradients and shadows
🔄 Real-time Updates - Optimistic UI updates with instant feedback
♿ Accessible - Keyboard navigation and ARIA labels
🎪 Interactive Cards - Hover effects, animations, and inline actions
📊 Data Visualization - Charts and progress indicators
🖱️ Click-to-Filter - Interactive statistics cards
🌊 Smooth Scrolling - Custom scrollbar and smooth scroll behavior

Tech Stack

Core Technologies

Next.js 14 - React framework with App Router
TypeScript 5.3 - Type-safe development
GraphQL Yoga - Modern GraphQL server
Apollo Client - GraphQL client with intelligent caching
Prisma 5.7 - Next-generation ORM with full TypeScript support
SQLite - Lightweight database (easily swappable to PostgreSQL/MySQL)

UI & Styling

Tailwind CSS 3.4 - Utility-first CSS framework
Framer Motion - Production-ready animation library for scroll animations
Lucide React - Beautiful, customizable icon library
React Hot Toast - Elegant toast notification system
Recharts - Composable charting library for data visualization
date-fns - Modern, lightweight date utility library
clsx - Utility for constructing className strings

Additional Features

@hello-pangea/dnd - Drag-and-drop functionality (ready for kanban board)
@react-spring/web - Physics-based animations for numbers

Quick Start

📖 For detailed setup instructions, troubleshooting, and tips, see SETUP.md

Prerequisites

Node.js 18+ - Download here
npm (comes with Node.js) or your preferred package manager

Installation & Setup

# 1. Clone the repository
git clone https://github.com/Alinapanyue/TaskFlow.git
cd TaskFlow

# 2. Install dependencies
npm install

# 3. Set up environment variables
echo 'DATABASE_URL="file:./dev.db"' > .env

# 4. Initialize database and seed sample data
npm run setup

# 5. Start the development server
npm run dev

That's it! Open http://localhost:3000 in your browser. 🎉

The app comes pre-loaded with sample data:

3 demo projects (Web Application, Mobile App, Marketing Campaign)
15+ sample tasks with various statuses, priorities, and tags
Example notes and attachments

💡 Having issues? Check out SETUP.md for troubleshooting and detailed instructions.

Project Structure

taskflow/
├── src/
│   ├── app/                      # Next.js App Router
│   │   ├── api/                  # API routes
│   │   │   ├── graphql/          # GraphQL endpoint
│   │   │   └── upload/           # File upload endpoint
│   │   ├── layout.tsx            # Root layout with providers
│   │   ├── page.tsx              # Main application page
│   │   └── globals.css           # Global styles & animations
│   ├── components/               # React components
│   │   ├── ui/                   # Reusable UI components
│   │   │   ├── button.tsx        # Button component
│   │   │   ├── input.tsx         # Input component
│   │   │   ├── modal.tsx         # Modal dialog
│   │   │   ├── select.tsx        # Select dropdown
│   │   │   └── textarea.tsx      # Textarea component
│   │   ├── animated-number.tsx   # Animated counter component
│   │   ├── confetti.tsx          # Celebration animation
│   │   ├── project-card.tsx      # Project display card
│   │   ├── project-form.tsx      # Project create/edit form
│   │   ├── quick-actions.tsx     # Quick actions sidebar
│   │   ├── stats-modal.tsx       # Statistics modal with charts
│   │   ├── task-card.tsx         # Task display card
│   │   ├── task-form.tsx         # Task create/edit form
│   │   ├── task-notes.tsx        # Notes CRUD component
│   │   ├── task-attachments.tsx  # File upload & voice recording
│   │   └── providers/
│   │       └── apollo-provider.tsx # Apollo Client provider
│   ├── lib/                      # Utilities and configurations
│   │   ├── graphql/              # GraphQL schema and operations
│   │   │   ├── schema.ts         # GraphQL type definitions
│   │   │   ├── resolvers.ts      # GraphQL resolvers
│   │   │   ├── queries.ts        # Query definitions
│   │   │   └── mutations.ts      # Mutation definitions
│   │   ├── apollo-client.ts      # Apollo Client setup
│   │   └── prisma.ts             # Prisma client instance
├── prisma/
│   ├── schema.prisma             # Database schema
│   └── seed.ts                   # Database seeding script
├── public/
│   └── uploads/                  # Uploaded files storage
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── next.config.js

Feature Deep Dive

GraphQL API

The application uses a fully-typed GraphQL API with comprehensive operations:

Queries

# Projects
projects                         # Fetch all projects with tasks
project(id: ID!)                # Fetch single project

# Tasks
tasks                           # Fetch all tasks with notes & attachments
task(id: ID!)                   # Fetch single task
tasksByProject(projectId: ID!)  # Filter tasks by project
tasksByStatus(status: Status!)  # Filter tasks by status

# Notes
notes                           # Fetch all notes
notesByTask(taskId: ID!)       # Fetch notes for a task

# Attachments
attachmentsByTask(taskId: ID!) # Fetch attachments for a task

Mutations

# Project CRUD
createProject(input: CreateProjectInput!)
updateProject(id: ID!, input: UpdateProjectInput!)
deleteProject(id: ID!)

# Task CRUD
createTask(input: CreateTaskInput!)
updateTask(id: ID!, input: UpdateTaskInput!)
deleteTask(id: ID!)

# Notes CRUD
createNote(input: CreateNoteInput!)
updateNote(id: ID!, input: UpdateNoteInput!)
deleteNote(id: ID!)

# Attachments CRUD
createAttachment(input: CreateAttachmentInput!)
deleteAttachment(id: ID!)

Database Schema

Project Model:

ID, name, description, color
One-to-many relationship with tasks
Cascade delete (deleting a project deletes its tasks)
Timestamps (createdAt, updatedAt)

Task Model:

ID, title, description, status, priority, dueDate, tags
Many-to-one relationship with project
One-to-many relationships with notes and attachments
Status: TODO, IN_PROGRESS, REVIEW, DONE
Priority: LOW, MEDIUM, HIGH, URGENT
Timestamps (createdAt, updatedAt)

Note Model:

ID, content, taskId
Many-to-one relationship with task
Timestamps (createdAt, updatedAt)

Attachment Model:

ID, filename, fileType, fileSize, fileUrl, taskId
Many-to-one relationship with task
Supports all file types
Timestamp (createdAt)

File Upload System

The application includes a robust file upload system:

File Upload API (/api/upload)
- Handles multipart form data
- Saves files to public/uploads/
- Returns file metadata (URL, size, type)
Voice Recording
- Browser-based audio recording using MediaRecorder API
- Records in WebM format
- Automatic file upload after recording stops
File Management
- Preview images inline
- Audio player for recordings
- Download any attachment
- Delete files (removes from server and database)

Animations & Effects

Scroll Animations:

Hero section fades in on scroll
Stats cards appear with staggered delays
Content sections slide up as they enter viewport
Uses Framer Motion's useInView hook

Micro-interactions:

Cards scale up on hover
Buttons have smooth transitions
Inputs have focus states
Dropdowns animate smoothly

Celebration:

Confetti animation when completing tasks
Custom toast messages with emojis
Animated stat counters

Available Scripts

# Development
npm run dev                 # Start development server (http://localhost:3000)

# Build & Production
npm run build              # Build optimized production bundle
npm start                  # Start production server

# Database Management
npm run prisma:generate    # Generate Prisma Client
npm run prisma:push        # Push schema changes to database
npm run prisma:studio      # Open Prisma Studio (database GUI at localhost:5555)
npm run prisma:seed        # Seed database with sample data
npm run setup              # Setup database and seed data (one command)

# Code Quality
npm run lint               # Run ESLint

Highlights & Best Practices

This project demonstrates professional-grade development:

1. Modern Full-Stack Architecture

Clean separation of concerns
GraphQL API layer with typed resolvers
Prisma ORM for type-safe database operations
React Server Components for optimal performance

2. Type Safety Everywhere

End-to-end TypeScript
GraphQL schema generates types
Prisma generates database types
No any types in production code

3. Production-Ready Code

Proper error handling with try-catch and error boundaries
Loading states and optimistic updates
Environment variable configuration
Database migrations and seeding
Optimized builds and code splitting

4. Best Practices

Server-side rendering with Next.js 14
Apollo Client caching and refetching strategies
Responsive design with mobile-first approach
Accessible UI with keyboard navigation
Clean code with ESLint rules
Component composition and reusability

5. User Experience

Smooth animations without performance impact
Toast notifications for all user actions
Keyboard shortcuts for power users
Real-time search with instant results
Interactive statistics and data visualization

Key Features Showcase

Quick Actions Sidebar

Shows upcoming tasks (next 7 days)
Highlights high-priority tasks
One-click navigation to tasks
Real-time updates

Statistics Modal

Bar chart of tasks by project
Pie chart of task status distribution
Priority breakdown
Interactive charts with hover effects

Smart Filtering

Click any stat card to filter
Combine search with status filters
Clear visual feedback

Toast Notifications

Success: ✅ "Task created successfully!"
Completion: 🎉 "Awesome! Task completed!"
Error: ❌ "Upload failed: [error message]"
Loading: ⏳ "Uploading file..."

Future Enhancements

Potential improvements for expanded functionality:

Contributing

This is a portfolio/demonstration project, but feedback and suggestions are welcome!

If you find a bug or have a feature request, please open an issue on GitHub.

License

This project is open source and available for educational and portfolio purposes.

👤 Author

Alina Pan

GitHub: @Alinapanyue

About This Project!

TaskFlow was built as a comprehensive demonstration of modern web development skills, showcasing:

Professional Code Quality - Clean, maintainable, and well-documented code
Modern Tech Stack - Latest versions of industry-standard tools
Best Practices - Following React, Next.js, and TypeScript conventions
User-Centric Design - Focus on UX with animations and feedback
Production-Ready - Includes error handling, optimization, and scalability

Why TaskFlow?

This project goes beyond basic CRUD operations to include:

Advanced features (notes, attachments, voice recording)
Beautiful UI with animations and micro-interactions
Data visualization with charts
Keyboard shortcuts for power users
Real-time search and filtering
File upload system
Toast notification system
Responsive design for all devices

Show Your Support

If you found this project helpful, interesting, or inspiring, please consider giving it a star! ⭐

It helps me know that my work is valuable and encourages me to create more projects like this.

Acknowledgments

Built with amazing open-source technologies:

Next.js - The React Framework
Prisma - Next-generation ORM
Apollo GraphQL - GraphQL implementation
Tailwind CSS - Utility-first CSS
Framer Motion - Animation library
Lucide - Beautiful icons

Built using Next.js, TypeScript, GraphQL, and Prisma

*✨ TaskFlow

Name		Name	Last commit message	Last commit date
Latest commit History 16 Commits
prisma		prisma
public/uploads		public/uploads
src		src
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
CHECKLIST.md		CHECKLIST.md
README.md		README.md
SETUP.md		SETUP.md
START_HERE.md		START_HERE.md
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

TaskFlow - Modern Project & Task Management

Documentation

Features Overview

Core Functionality

Project & Task Management

Notes & Attachments System 📝🎙️

Advanced Features

User Experience

Animations & Visual Effects

Toast Notifications 🍞

Keyboard Shortcuts ⌨️

UI/UX Excellence

Tech Stack

Core Technologies

UI & Styling

Additional Features

Quick Start

Prerequisites

Installation & Setup

Project Structure

Feature Deep Dive

GraphQL API

Queries

Mutations

Database Schema

File Upload System

Animations & Effects

Available Scripts

Highlights & Best Practices

1. Modern Full-Stack Architecture

2. Type Safety Everywhere

3. Production-Ready Code

4. Best Practices

5. User Experience

Key Features Showcase

Quick Actions Sidebar

Statistics Modal

Smart Filtering

Toast Notifications

Future Enhancements

Contributing

License

👤 Author

About This Project!

Why TaskFlow?

Show Your Support

Acknowledgments

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages