MushFlow: Where Task Management Meets Collaborative Study

Vedas Dixit — Wed, 19 Mar 2025 20:22:47 +0000

🍄 MushFlow: Reimagining Productivity

MushFlow combines intelligent task management with collaborative study spaces to transform how you work and learn. Let me take you through our journey of building this next-generation productivity platform.

The MushFlow dashboard showing task management with categorized tasks

🎯 Task Management That Adapts to You

MushFlow's task system was built to feel intuitive yet powerful. We designed the interface to provide rich organization without overwhelming users:

Priority-based organization (high/medium/low) with visual indicators
Multi-dimensional categorization with tags like Work, Learning, Personal, Health
Advanced filtering and sorting capabilities for any combination of attributes

Database normalization for university projects or hackathon challenges for coding practice

![Task Organization]

Our flexible task filtering system with priority and category sorting

The backend architecture leverages AWS DynamoDB with a carefully designed data model that optimizes for common access patterns:

// Our DynamoDB schema optimizes for quick access to user tasks
{
  PK: string;              // USER#{userId}
  SK: string;              // TASK#{taskId}
  GSI1PK: string;          // USER#{userId}
  GSI1SK: string;          // TASK#{dueDate} or TASK#{createdAt}
  // Task attributes
  title: string;           // Task title
  priority: string;        // "low", "medium", or "high"
  labels: string[];        // Array of label IDs
  // ... other properties
}

🎵 JAM Sessions: Study Together, Miles Apart

The real magic happens in our JAM (Joint Audio Mode) feature. We wanted to recreate that coffee shop study vibe in a digital space:

![JAM Session Room]

A JAM Session room with synchronized music and real-time chat

What makes JAM special:

Create or join study rooms with unique 6-character codes
Listen to synchronized Deep LoFi music with perfect timing across all participants
Chat with study partners while maintaining focus
See who's in your session with real-time participant tracking

Under the hood:
We implemented this using the Agora RTM SDK to ensure millisecond-precise synchronization between all participants. The Redux state management ensures UI consistency:

// Our JAM Redux state manages everything from room presence to music sync
interface JamState {
  // Room state
  inRoom: boolean;
  roomId: string | null;
  roomCode: string | null;

  // Music state
  currentTrack: Track | null;
  isPlaying: boolean;
  trackStartTime: string;

  // Participants & messages
  participants: Participant[];
  messages: Message[];
  // ... other properties
}

🏗️ Technical Architecture

graph TD
subgraph "Client Side"
A[React Components] --> B[Redux Store]
B -->|State Updates| A
A -->|User Actions| C[API Requests]
end

subgraph "Next.js Backend"
    C -->|Serverless Functions| D[Next.js API Routes]
    D -->|Data Access| E[AWS SDK]
end

subgraph "AWS Cloud"
    E -->|NoSQL Database| F[DynamoDB]
    E -->|File Storage| G[S3 Bucket]
    H[Agora RTM Service] <-->|WebSockets| A
end

style A fill:#2D3748,stroke:#4A5568,color:#fff
style B fill:#2D3748,stroke:#4A5568,color:#fff
style C fill:#2D3748,stroke:#4A5568,color:#fff
style D fill:#553C9A,stroke:#6B46C1,color:#fff
style E fill:#553C9A,stroke:#6B46C1,color:#fff
style F fill:#2B6CB0,stroke:#3182CE,color:#fff
style G fill:#2B6CB0,stroke:#3182CE,color:#fff
style H fill:#C05621,stroke:#DD6B20,color:#fff

MushFlow's serverless architecture diagram

We built MushFlow on a modern, scalable tech stack:

Next.js 15 with React 19 for the frontend
Redux Toolkit for global state management
AWS DynamoDB for serverless data persistence
Agora SDK for real-time communication
Tailwind CSS for responsive styling

Our Next.js App Router architecture keeps things fast while enabling server-side rendering where it matters most.

🚀 Future Roadmap

We're just getting started with MushFlow. Our upcoming features include:

Pomodoro timer integration with JAM sessions
Screen sharing for collaborative study
Voice chat options for study rooms
Mobile apps for iOS and Android

💭 Final Thoughts

Building MushFlow has been a journey in balancing technical complexity with user experience. We believe productivity tools should feel good to use - they should disappear into the background while empowering you to do your best work.

Whether you're organizing database assignments, collaborating on research, or establishing healthy study habits, MushFlow provides both structure and community to help you thrive.

Ready to try MushFlow? https://mushflow.vercel.app/ and experience the perfect blend of organization and collaboration.

Have questions about our implementation or tech stack? Drop them in the comments below!