TaskyFlow — Case Study

The ultimate collaborative task management platform. Create, organize, and collaborate on tasks with real-time updates, comments, and direct messaging.

Screenshot of the app showing tasks list

1 / 3

Tech Stack Used

Frontend

Next.js 15.5.3
React 19.1.0
TypeScript 5
Tailwind CSS 4
shadcn/ui
React Hook Form
TanStack Query

Zustand
next-themes
Lucide React
date-fns
emoji-picker-react
Sonner
nuqs

Backend

Convex DB
Convex Auth
GitHub auth
Google auth
Email auth

Dev Tools

Bun
ESLint
TypeScript

The Problem

The project addresses several key challenges in collaborative task management:

Fragmented Collaboration Tools: Teams often use separate tools for task management, messaging, and notifications, leading to context-switching and decreased productivity.
Lack of Real-time Collaboration: Traditional task managers don't provide instant updates when team members make changes, comment, or react to tasks.
Poor Communication: Tasks and communication are siloed - you can't discuss tasks where they live, requiring external communication tools.
Limited Engagement: No way to quickly react or provide feedback on tasks without writing full comments.
No Visibility: Team members can't see who's online, typing, or actively working on tasks.

The Solution

Unified Platform: Combines task management, direct messaging, comments, and reactions in one place without tool-switching.
Real-time Everything: Live updates for todos, comments, messages, typing indicators, presence tracking, and read receipts via Convex.
Rich Communication: Threaded comments with nested replies, direct messaging, emoji reactions, and conversation management.
Smart Notifications: 8 notification types with customizable preferences, real-time delivery, unread counts, and toast alerts.
Modern UX: Dark/light mode, mobile-responsive design, intuitive navigation, and beautiful shadcn components.

Code Deep Dive

1 / 4

1. Real-time Subscriptions with Convex

File: convex/todos.ts

The getMyTodos query demonstrates Convex's real-time capabilities:

export const getMyTodos = query({
  args: {
    status: v.optional(v.string()),
    priority: v.optional(v.string()),
  },
  handler: async (ctx, args) => {
    const userId = await getAuthUserId(ctx);
    if (!userId) {
      throw new Error("Unauthorized");
    }

    let query = ctx.db
      .query("todos")
      .withIndex("by_user", (q) => q.eq("userId", userId));

    // Dynamic filtering
    if (args.status && args.status !== "all") {
      query = query.filter((q) => q.eq(q.field("status"), args.status));
    }

    const todos = await query.order("desc").collect();

    // Populate related data
    const todosWithUsers = await Promise.all(
      todos.map(async (todo) => {
        const user = await ctx.db.get(todo.userId);
        const comments = await ctx.db
          .query("comments")
          .withIndex("by_todo", (q) => q.eq("todoId", todo._id))
          .collect();
        // Returns enriched data
      })
    );
    return todosWithUsers;
  },
});

Key Features:

Automatic reactivity - any changes trigger UI updates
Indexed queries for performance
Data enrichment with related entities
Type-safe with Convex validators

2. Notification System Architecture

File: convex/notifications.ts

export const create = mutation({
  args: {
    type: v.union(
      v.literal("TASK_COMMENT"),
      v.literal("TASK_STATUS_CHANGE"),
      // ... 8 notification types
    ),
    title: v.string(),
    message: v.string(),
    userId: v.id("users"),
    actorId: v.id("users"),
    relatedId: v.optional(v.union(v.id("todos"), v.id("comments"), v.id("messages"))),
  },
  handler: async (ctx, args) => {
    // Don't create notification for self
    if (currentUserId === args.userId) {
      return null;
    }

    const notificationId = await ctx.db.insert("notifications", {
      ...args,
      isRead: false,
      createdAt: Date.now(),
    });

    return notificationId;
  },
});

Frontend Integration:

src/components/dashboard/notification-bell.tsx

// Toast when new notifications arrive
useEffect(() => {
  if (unreadCount !== undefined && previousUnreadCount !== undefined) {
    const newNotifications = unreadCount - previousUnreadCount;
    if (newNotifications > 0) {
      toast.success(`${newNotifications} new notification${newNotifications > 1 ? 's' : ''}`, {
        description: "Click the bell icon to view",
      });
    }
  }
  setPreviousUnreadCount(unreadCount || 0);
}, [unreadCount, previousUnreadCount]);

3. Chat System with Typing Indicators

File: src/components/chat/individual-chat.tsx

The chat implements real-time typing indicators:

const handleSendMessage = async (e: React.FormEvent) => {
  e.preventDefault();
  if (!newMessage.trim() || isSending) return;

  setIsSending(true);
  try {
    await sendMessage({
      conversationId: conversationId as Id<"conversations">,
      body: newMessage.trim(),
      type: "text",
    });
    setNewMessage("");

    // Stop typing indicator
    await updateTyping({
      conversationId: conversationId as Id<"conversations">,
      isTyping: false,
    });
  } catch (error) {
    toast.error("Failed to send message");
  } finally {
    setIsSending(false);
  }
};

Backend: convex/chats.ts handles conversation creation/retrieval with participant filtering.

4. Emoji Reactions Toggle System

File: convex/reactions.ts

export const toggle = mutation({
  args: {
    emoji: v.string(),
    todoId: v.optional(v.id("todos")),
    commentId: v.optional(v.id("comments")),
    messageId: v.optional(v.id("messages")),
  },
  handler: async (ctx, args) => {
    const existingReaction = await ctx.db
      .query("reactions")
      .withIndex("by_user", (q) => q.eq("userId", userId))
      .filter(/* match emoji and target */)
      .unique();

    if (existingReaction) {
      // Remove if exists
      await ctx.db.delete(existingReaction._id);
      return { action: "removed" };
    } else {
      // Add new reaction
      const reactionId = await ctx.db.insert("reactions", {
        emoji: args.emoji,
        todoId: args.todoId,
        // ...
      });

      // Create notification
      await ctx.runMutation(api.notifications.createReactionNotification, {
        todoId: args.todoId,
        reactorId: userId,
        emoji: args.emoji,
      });

      return { action: "added", reactionId };
    }
  },
});

Back to Projects