Skip to main content
Meelio’s monorepo contains two applications that share a common codebase through workspace packages. Both apps are built with React and share the same UI components, business logic, and utilities.

Web App

Vite-powered React application running on port 4000

Browser Extension

Plasmo-based extension supporting Chrome, Firefox, Edge, and Safari

​
Web App

The web application is a progressive web app (PWA) built with Vite and React, providing a fast and modern development experience.

​
Configuration

{
  "name": "web",
  "version": "0.8.2",
  "private": true
}
Location: apps/web/package.json

​
Development

npm run dev
# Runs on http://localhost:4000

​
Tech Stack

  • Vite (v5.4.11) - Fast build tool and dev server
  • React (v18.3.1) - UI framework
  • @vitejs/plugin-react-swc - Fast refresh with SWC compiler
  • TypeScript (v5.3.3) - Type safety
  • react-router-dom (v6.16.0) - Client-side routing
  • Zustand (v5) - Lightweight state management
  • use-sync-external-store - State synchronization
  • Dexie (v4.0.9) - IndexedDB wrapper for local storage
  • react-hook-form (v7.47.0) - Form management
  • @hookform/resolvers (v3.3.2) - Form validation
  • Zod (v3.22.4) - Schema validation
  • Axios (v1.5.0) - HTTP client
  • Framer Motion (v11.11.9) - Animation library
  • GSAP (v3.12.2) - Advanced animations
  • Lucide React (v0.454.0) - Icon library
  • Recharts (v2.13.0) - Chart components
  • Sonner (v1.5.0) - Toast notifications
  • next-themes (v0.3.0) - Theme management
  • date-fns (v4.1.0) - Date manipulation
  • date-fns-tz (v3.2.0) - Timezone support
  • i18next (v23.10.1) - Internationalization
  • react-i18next (v15.1.4) - React i18n bindings
  • clsx & tailwind-merge - Class name utilities

​
PWA Features

The web app includes Progressive Web App capabilities:
vite.config.ts
import { VitePWA } from 'vite-plugin-pwa'

// PWA configuration for offline support
// and installable app experience
The web app uses vite-plugin-pwa (v0.20.5) to generate service workers and enable offline functionality.

​
Testing

npm run test
Tests are powered by Playwright (v1.54.2) for end-to-end testing.

​
Shared Dependencies

The web app consumes these workspace packages:
  • @repo/shared - Core business logic and components
  • @repo/ui - shadcn/ui component library
  • @repo/eslint-config - Linting rules
  • @repo/prettier-config - Code formatting
  • @repo/tailwind-config - Tailwind configuration
  • @repo/typescript-config - TypeScript settings

​
Extension App

The browser extension is built with Plasmo, a framework specifically designed for building browser extensions with modern web technologies.

​
Configuration

{
  "name": "extension",
  "version": "0.8.2",
  "displayName": "Meelio",
  "description": "Focus, calm & productivity with every new tab",
  "private": true
}
Location: apps/extension/package.json

​
Development

npm run dev
# Cleans build artifacts and starts Plasmo dev mode

​
Browser Support

The extension supports multiple browsers with dedicated build targets:

Chrome

Manifest V3

Firefox

Manifest V3

Edge

Manifest V3

Opera

Manifest V3

Safari

Manifest V3

Brave

Manifest V3

​
Manifest Configuration

{
  "permissions": [
    "storage",
    "notifications"
  ],
  "optional_permissions": [
    "tabs",
    "tabGroups",
    "bookmarks"
  ]
}
Core permissions enable storage and notifications, with optional tab and bookmark management.
{
  "host_permissions": [
    "https://*.meelio.io/*"
  ],
  "optional_host_permissions": [
    "https://*/*"
  ]
}
Required access to Meelio domains with optional broader web access.
{
  "web_accessible_resources": [
    {
      "resources": [
        "public/**/*.svg",
        "public/**/*.png",
        "public/**/*.jpg",
        "public/**/*.webp",
        "public/**/*.avif",
        "public/**/*.mp4",
        "public/**/*.mp3",
        "public/**/*.json"
      ],
      "matches": ["https://www.plasmo.com/*"]
    }
  ]
}
Media and configuration files accessible to web pages.
{
  "action": {
    "default_popup": "popup.html"
  }
}
Defines the popup interface when clicking the extension icon.

​
Extension-Specific Dependencies

In addition to shared dependencies with the web app: 
{
  "plasmo": "0.90.5",
  "@plasmohq/storage": "^1.13.0",
  "@types/chrome": "0.0.258",
  "simple-icons": "^13.18.0"
}
@plasmohq/storage provides a unified storage API that works across different browser extension APIs.

​
Packaging

Create distributable packages for each browser: 
npm run package:all

​
Shared Code

Both the web app and extension share the same workspace packages:
  • @repo/shared - Business logic, stores, hooks, and components
  • @repo/ui - UI component library
  • All configuration packages (eslint, prettier, tailwind, typescript)
This architecture ensures consistency and reduces code duplication across platforms.

​
File Structure

apps/
├── web/
│   ├── src/
│   ├── public/
│   ├── package.json
│   ├── vite.config.ts
│   ├── tsconfig.json
│   └── tailwind.config.ts
└── extension/
    ├── src/
    ├── public/
    ├── package.json
    ├── tsconfig.json
    └── tailwind.config.ts

​
Next Steps

Shared Packages

Learn about the shared packages both apps depend on

Development Setup

Set up your local development environment

Build docs developers (and LLMs) love

Get started for freeTalk to us