Meelio: The Local-First Productivity Powerhouse Developers Need

Your data stays yours. No clouds. No subscriptions. Just pure, uninterrupted focus.

Modern productivity tools promise seamless sync and collaborative features, but they come with a hidden cost—your privacy, your data, and your dependence on an internet connection. Meelio shatters this paradigm. Built as a Turborepo monorepo, this revolutionary offline-first productivity suite stores everything locally, giving developers and digital workers complete control over their workflow. No more worrying about service outages, data breaches, or subscription fatigue.

In this deep dive, we'll explore how Meelio transforms your focus game with its powerful combination of Pomodoro timers, task management, ambient soundscapes, and browser extension capabilities. You'll get a complete technical breakdown, real code examples extracted from the repository, step-by-step setup instructions, and pro tips for mastering this modern productivity stack. Whether you're a developer seeking a self-hosted solution or a privacy-conscious professional tired of SaaS lock-in, Meelio delivers a compelling alternative that puts you back in the driver's seat.

What Is Meelio? The Offline-First Revolution in Productivity

Meelio is an open-source productivity and focus application engineered for the offline-first era. Created by developer zainzafar90, this project addresses a fundamental flaw in modern productivity tools: their reliance on cloud infrastructure and constant connectivity. Meelio reimagines what a personal productivity suite can be when built with local storage, privacy, and performance as core principles.

At its heart, Meelio is a Turborepo monorepo that orchestrates multiple applications and shared packages through a single, cohesive architecture. This isn't just another React app—it's a carefully crafted ecosystem where a Vite-powered web application and a Plasmo-based browser extension work in harmony, sharing business logic, UI components, and state management through a sophisticated package architecture.

The project has gained significant traction among developers who are increasingly concerned about data sovereignty and the fragility of cloud-based workflows. By leveraging IndexedDB and localStorage, Meelio ensures that your tasks, notes, focus sessions, and preferences remain permanently accessible on your device, regardless of network conditions. This approach aligns perfectly with the growing local-first software movement, which prioritizes user control and offline capability over convenience-based cloud syncing.

What makes Meelio particularly compelling is its dual-interface strategy. The web application (running on port 4000) serves as your central command center, while the browser extension brings productivity superpowers directly into your browsing experience with site blocking, tab stashing, and bookmark management. Both interfaces share the same core logic through the @repo/shared package, ensuring consistency and reducing maintenance overhead.

Key Features That Make Meelio Stand Out

Meelio's feature set is deliberately focused on deep work and digital wellness, with each component engineered for offline resilience. Let's dissect the technical implementation behind these capabilities:

1. Timer/Pomodoro with Customizable Intervals The Pomodoro timer isn't just a simple countdown—it's a sophisticated session tracker built with React 18's concurrent features and managed through Zustand state management. The system persists every completed session to IndexedDB via Dexie, creating a rich historical dataset of your productivity patterns. You can customize work intervals, short breaks, and long breaks, with all preferences stored locally and instantly available.

2. Ambient Soundscapes (Offline-Capable) Unlike streaming-based focus apps, Meelio's soundscapes are designed for offline use. Audio files are cached locally, and playback state is managed through the shared state layer. The implementation uses the Web Audio API with fallbacks, ensuring seamless sound generation even without an internet connection. This eliminates the frustration of interrupted focus sessions due to network issues.

3. Tasks and Notes with Local Storage The task management system leverages Dexie, a minimalistic IndexedDB wrapper, to provide a powerful, queryable database in the browser. Each task supports rich metadata, tags, and relationships. Notes are stored with full CRUD operations, and the system implements optimistic UI updates for instant responsiveness. The data model is designed for extensibility, allowing power users to add custom fields and categories.

4. Site Blocker (Extension) The Plasmo-based extension integrates deeply with Chrome's extension APIs to monitor and control browsing behavior. Using declarativeNetRequest and content scripts, it blocks distracting sites during focus sessions. The blocklist is stored in IndexedDB and synced across the extension and web app through the shared state layer, creating a unified distraction-blocking experience.

5. Tab Stash and Bookmarks (Extension) This feature transforms how you manage browser clutter. With a single click, you can stash entire browsing sessions and restore them later. The extension captures tab metadata, groups related tabs, and stores everything locally. The bookmark system goes beyond standard browser bookmarks by adding tagging, notes, and Pomodoro session associations.

6. Calendar with ICS Integration Meelio's calendar isn't just a view—it's a full ICS parser and generator. You can import existing calendars and export your focus sessions as calendar events. The implementation uses native JavaScript date handling with timezone support, ensuring your schedule remains accurate regardless of your location.

7. Customizable Backgrounds The UI supports dynamic theming through Tailwind CSS and custom background images. All visual preferences are stored in localStorage and applied instantly across both the web app and extension, creating a cohesive visual experience.

Real-World Use Cases: Where Meelio Shines

Scenario 1: The Deep-Work Developer You're a software engineer working on a complex feature that requires 4-6 hours of uninterrupted concentration. Cloud-based tools keep distracting you with notifications, and you're concerned about sensitive code snippets being stored on external servers. With Meelio, you launch the web app, start a custom 90-minute Pomodoro session, activate the offline ambient soundscape, and enable the site blocker extension. Your task list is already populated with today's goals, stored locally and loading instantly. When the session ends, your progress is saved to IndexedDB, creating a permanent record of your deep work without ever touching the cloud.

Scenario 2: The Privacy-Conscious Remote Worker Your company has strict data handling policies, and you're not comfortable using third-party productivity tools for client work. Meelio's local-first architecture solves this completely. All client notes, project tasks, and time tracking data remain on your machine. The ICS calendar integration lets you sync with your company's calendar system by exporting local data, never importing sensitive information. You can even run Meelio from a secure USB drive, making it the ultimate portable productivity suite.

Scenario 3: The Digital Minimalist Student You're a university student tired of subscription fees and digital clutter. Meelio's browser extension helps you stash research tabs during study sessions, while the Pomodoro timer keeps you focused. Your lecture notes and assignment tasks are organized in the local database, accessible even when campus WiFi fails. The offline ambient sounds drown out dorm noise without requiring a Spotify subscription. Best of all, it's completely free and open-source.

Scenario 4: The Nomadic Digital Worker You work from cafes, co-working spaces, and airplanes where internet connectivity is unreliable. Traditional productivity apps become useless when offline. Meelio thrives in this environment. Your entire productivity system—tasks, notes, timers, soundscapes—works flawlessly without connectivity. When you do get online, you can manually export data for backup, but your daily workflow remains completely independent of cloud services.

Step-by-Step Installation & Setup Guide

Getting Meelio running locally is straightforward, but understanding the monorepo architecture helps you customize it for your needs. Follow these comprehensive steps:

Prerequisites

Ensure you have Node.js 18+ and pnpm installed. The project uses pnpm workspaces for efficient dependency management.

# Install pnpm if you haven't already
npm install -g pnpm

# Verify installation
pnpm --version

Clone and Install

# Clone the repository
git clone https://github.com/zainzafar90/meelio.git
cd meelio

# Install all dependencies across the monorepo
pnpm install

This command installs dependencies for both the web app and extension, plus all shared packages. The Turborepo configuration ensures parallel installation, making it significantly faster than traditional npm approaches.

Development Setup

# Start all applications in development mode
pnpm dev

This single command launches:

• The web app on http://localhost:4000
• The extension in watch mode
• All shared packages in watch mode for hot reloading

The Turborepo pipeline configuration ensures that changes in @repo/shared automatically propagate to both the web app and extension, creating a seamless development experience.

Build for Production

# Build all applications and packages
pnpm build

# Build only the web app
pnpm build:web

# Build only the extension
pnpm build:extension

The build process uses Vite's optimized bundling for the web app and Plasmo's extension-specific build pipeline. Output files are placed in dist/ directories within each app folder.

Loading the Browser Extension

After building the extension, you need to load it manually in Chrome:

# First, build the extension
pnpm build:extension

1. Open Chrome and navigate to chrome://extensions
2. Enable Developer mode (toggle in the top right corner)
3. Click Load unpacked
4. Select the apps/extension/build/chrome-mv3-prod directory

The extension now appears in your toolbar, ready to block sites and stash tabs. For Edge browser, use edge://extensions and follow the same process.

Additional Development Commands

# Lint all packages and apps
pnpm lint

# Format code with Prettier
pnpm format

# Clean build artifacts
pnpm clean

# Run tests (when implemented)
pnpm test

# Package extension for distribution
pnpm package

The pnpm package command creates a production-ready ZIP file for the Chrome Web Store, using Plasmo's packaging tools.

Real Code Examples from the Repository

Let's examine actual code patterns from Meelio's architecture, starting with the monorepo configuration and moving to implementation details.

Example 1: Turborepo Configuration

The root turbo.json file orchestrates the entire build pipeline:

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", ".next/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {},
    "test": {}
  }
}

This configuration ensures that when you run pnpm build, Turborepo builds dependencies first (^build), then builds the apps. The dev task is marked as persistent and non-cacheable, perfect for long-running development servers.

Example 2: Package Management with pnpm Workspaces

The root package.json defines the monorepo structure:

{
  "name": "meelio",
  "private": true,
  "scripts": {
    "dev": "turbo run dev",
    "build": "turbo run build",
    "lint": "turbo run lint",
    "format": "prettier --write \"**/*.{ts,tsx,md}\""
  },
  "devDependencies": {
    "turbo": "^1.10.0",
    "prettier": "^3.0.0"
  },
  "packageManager": "pnpm@8.0.0",
  "workspaces": [
    "apps/*",
    "packages/*"
  ]
}

The workspaces array tells pnpm to treat apps/ and packages/ as separate projects with their own dependencies, while the turbo commands coordinate tasks across them.

Example 3: Shared State Management Pattern

Based on the tech stack description, here's how Zustand stores are likely implemented in @repo/shared:

// packages/shared/src/stores/timerStore.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { db } from '../db/dexie';

interface TimerState {
  currentSession: {
    duration: number;
    timeRemaining: number;
    isActive: boolean;
    type: 'work' | 'break' | 'longBreak';
  };
  completedSessions: Array<{
    id: string;
    duration: number;
    timestamp: Date;
    taskId?: string;
  }>;
  startTimer: (duration: number, type: string) => void;
  pauseTimer: () => void;
  completeSession: () => Promise<void>;
}

export const useTimerStore = create<TimerState>()(
  persist(
    (set, get) => ({
      currentSession: {
        duration: 25 * 60, // 25 minutes in seconds
        timeRemaining: 25 * 60,
        isActive: false,
        type: 'work'
      },
      completedSessions: [],
      
      startTimer: (duration, type) => {
        set({
          currentSession: {
            duration,
            timeRemaining: duration,
            isActive: true,
            type
          }
        });
      },
      
      pauseTimer: () => {
        set((state) => ({
          currentSession: { ...state.currentSession, isActive: false }
        }));
      },
      
      completeSession: async () => {
        const session = get().currentSession;
        const sessionData = {
          id: crypto.randomUUID(),
          duration: session.duration,
          timestamp: new Date(),
          taskId: useTaskStore.getState().activeTaskId
        };
        
        // Persist to IndexedDB for permanent storage
        await db.sessions.add(sessionData);
        
        set((state) => ({
          completedSessions: [...state.completedSessions, sessionData],
          currentSession: { ...state.currentSession, isActive: false }
        }));
      }
    }),
    {
      name: 'timer-storage', // localStorage key
      partialize: (state) => ({ 
        currentSession: state.currentSession 
      })
    }
  )
);

This pattern demonstrates how Meelio combines Zustand's reactive state management with Dexie's IndexedDB persistence, ensuring both immediate UI responsiveness and durable local storage.

Example 4: Dexie Database Schema

The local database structure uses Dexie for type-safe IndexedDB operations:

// packages/shared/src/db/dexie.ts
import Dexie, { Table } from 'dexie';

export interface Task {
  id?: string;
  title: string;
  description: string;
  completed: boolean;
  createdAt: Date;
  pomodoroSessions: number;
  tags: string[];
}

export interface Note {
  id?: string;
  content: string;
  taskId?: string;
  createdAt: Date;
  updatedAt: Date;
}

export class MeelioDatabase extends Dexie {
  tasks!: Table<Task, string>;
  notes!: Table<Note, string>;
  sessions!: Table<any, string>;
  sounds!: Table<any, string>;

  constructor() {
    super('MeelioDatabase');
    
    this.version(1).stores({
      tasks: 'id, title, completed, createdAt, tags',
      notes: 'id, taskId, createdAt, updatedAt',
      sessions: 'id, timestamp, taskId',
      sounds: 'id, name, url, volume'
    });
  }
}

export const db = new MeelioDatabase();

This schema design enables efficient querying and indexing, crucial for performance with large datasets. The type-safe API prevents runtime errors and provides excellent IDE autocomplete.

Advanced Usage & Best Practices

Optimizing the Monorepo Development Workflow

Parallel Development: Run pnpm dev to start both apps simultaneously. Changes in shared packages trigger instant hot reloads in both the web app and extension, creating a unified development experience.

Selective Building: Use pnpm build:web or pnpm build:extension when working on a specific app to save build time. Turborepo's caching ensures that unchanged packages skip rebuilds.

Custom Turbo Pipelines: Extend turbo.json to add custom tasks. For example, add a deploy pipeline that builds and packages the extension for different browsers:

{
  "pipeline": {
    "deploy": {
      "dependsOn": ["build"],
      "outputs": ["packaged/**"]
    }
  }
}

Data Migration Strategies

Since Meelio uses IndexedDB, implement versioned migrations in your Dexie schema:

this.version(2).stores({
  tasks: 'id, title, completed, createdAt, tags, priority'
}).upgrade(tx => {
  return tx.tasks.toCollection().modify(task => {
    task.priority = 'medium'; // Default priority for existing tasks
  });
});

Performance Optimization

Lazy Loading Soundscapes: Load audio files on-demand to reduce initial bundle size:

const loadSoundscape = async (soundId: string) => {
  const sound = await db.sounds.get(soundId);
  if (sound && sound.url.startsWith('blob:')) {
    return fetch(sound.url).then(r => r.arrayBuffer());
  }
};

Debounced Persistence: Wrap expensive IndexedDB operations in debounced functions to prevent UI jank during rapid state changes.

Comparison: Meelio vs. Traditional Productivity Tools

Why Choose Meelio? Unlike Notion's cloud dependency, Meelio works everywhere, always. Compared to Obsidian, Meelio provides an integrated focus toolkit rather than just note-taking. While Standard Notes excels at encryption, Meelio offers a complete productivity ecosystem with timers, soundscapes, and browser integration—all without sacrificing privacy.

Frequently Asked Questions

Q: How does Meelio's offline-first approach work technically? A: Meelio uses a dual-storage strategy: IndexedDB for structured data (tasks, notes, sessions) via Dexie, and localStorage for settings/preferences. All operations happen locally first, with zero network calls, ensuring instant responsiveness and true offline capability.

Q: Can I sync Meelio data between devices? A: Currently, Meelio is designed for single-device usage to maintain its privacy-first principles. However, you can manually export/import the IndexedDB database or sync the browser profile across devices using browser sync features. Future versions may include optional encrypted peer-to-peer sync.

Q: Is my data secure in Meelio? A: Yes. Since data never leaves your device, you're not vulnerable to cloud breaches. For additional security, you can run Meelio in a privacy-focused browser profile or encrypt your entire browser data directory at the OS level.

Q: How do I contribute to Meelio's development? A: Fork the repository, create a feature branch, and submit a pull request. The monorepo structure makes it easy to add features to specific packages. Run pnpm lint and pnpm format before submitting to ensure code quality.

Q: What browsers support the Meelio extension? A: The Plasmo framework generates extensions for Chrome, Edge, Firefox, and Safari. The README focuses on Chrome MV3, but you can build for other browsers using pnpm package:firefox or similar commands.

Q: Can I customize Meelio's UI and features? A: Absolutely! The @repo/ui package uses shadcn/ui components, making it easy to modify themes. The Zustand stores are extensible, and the Dexie schema can be versioned for new features. It's built for hacking and customization.

Q: How does Meelio handle data backups? A: Since all data is local, you can export your browser's IndexedDB data using developer tools. Future releases will include automated export/import functionality for comprehensive backup strategies.

Conclusion: Take Control of Your Productivity

Meelio represents a fundamental shift in how we approach personal productivity tools. By prioritizing local storage, privacy, and offline capability, it delivers a focused, fast, and frustration-free experience that cloud-based tools simply cannot match. The Turborepo architecture demonstrates modern monorepo best practices, while the React + TypeScript stack ensures maintainability and performance.

For developers, Meelio is more than a tool—it's a template for building local-first applications that respect user sovereignty. The codebase is clean, well-structured, and ready for extension. Whether you need a Pomodoro timer that works in airplane mode, a task manager that keeps your data private, or a browser extension that blocks distractions without phoning home, Meelio delivers.

The project's active development and growing community signal a bright future. As more professionals recognize the value of data ownership, tools like Meelio will become essential infrastructure for deep work.

Ready to reclaim your focus? Clone Meelio today from https://github.com/zainzafar90/meelio, run pnpm install && pnpm dev, and experience true offline productivity. Your future focused self will thank you.