Architecture Overview

meelio/
├── apps/
│   ├── web/              # Vite + React web application (port 4000)
│   └── extension/        # Plasmo browser extension (Chrome, Edge)
├── packages/
│   ├── shared/           # Core business logic, stores, hooks, components
│   ├── ui/               # React component library (shadcn/ui based)
│   ├── logger/           # Logging utility
│   ├── eslint-config/    # Shared ESLint configuration
│   ├── typescript-config/# Shared TypeScript configuration
│   ├── tailwind-config/  # Shared Tailwind CSS configuration
│   └── prettier-config/  # Shared Prettier configuration
├── turbo.json           # Turborepo configuration
├── pnpm-workspace.yaml  # pnpm workspace configuration
└── package.json         # Root package.json

apps/web/src/
├── components/      # App-specific components
├── layouts/         # Layout components
├── routes/          # Route components
│   ├── home/        # Home route
│   └── errors/      # Error pages
├── stores/          # App-specific stores
├── workers/         # Web workers
├── main.tsx         # Application entry point
└── app.tsx          # Root component

src/
├── api/                 # API clients and services
├── assets/              # Shared assets (images, icons)
│   └── images/
│       ├── avatars/
│       ├── category-icons/
│       └── sound-icons/
├── components/          # Shared React components
│   ├── common/          # Common UI components
│   └── core/            # Core feature components
│       ├── backgrounds/
│       ├── bookmarks/
│       ├── breathing-pod/
│       ├── calendar/
│       ├── clock/
│       ├── dock/
│       └── greetings/
├── context/             # React contexts
├── data/                # Static data and constants
├── hooks/               # Custom React hooks
├── i18n/                # Internationalization
├── lib/                 # Core libraries
│   ├── db/              # Database layer (Dexie)
│   ├── validations/     # Zod schemas
│   └── utils.ts
├── providers/           # React providers
├── services/            # Business logic services
├── stores/              # Zustand state stores
├── types/               # TypeScript type definitions
└── utils/               # Utility functions

import '@repo/ui/globals.css'
import { Button } from '@repo/ui/components/button'
import { cn } from '@repo/ui/lib/utils'

// Example from packages/shared/src/stores/
import { create } from 'zustand'

interface TimerState {
  timeLeft: number
  isRunning: boolean
  start: () => void
  pause: () => void
  reset: () => void
}

export const useTimerStore = create<TimerState>((set) => ({
  timeLeft: 1500,
  isRunning: false,
  start: () => set({ isRunning: true }),
  pause: () => set({ isRunning: false }),
  reset: () => set({ timeLeft: 1500, isRunning: false })
}))

import { db, resetDatabase } from '@repo/shared/lib/db'

// Reset database (useful for testing)
await resetDatabase()

{
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", "build/**", ".next/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {
      "dependsOn": ["^build"]
    }
  }
}

// Feature component in @repo/shared
import { useState } from 'react'
import { useTimerStore } from '@repo/shared/stores/timer.store'
import { Button } from '@repo/ui/components/button'

export function Timer() {
  const { timeLeft, isRunning, start, pause } = useTimerStore()
  
  return (
    <div>
      <p>{formatTime(timeLeft)}</p>
      <Button onClick={isRunning ? pause : start}>
        {isRunning ? 'Pause' : 'Start'}
      </Button>
    </div>
  )
}

// Zustand store with TypeScript
import { create } from 'zustand'
import { db } from '@repo/shared/lib/db'

interface TaskState {
  tasks: Task[]
  addTask: (task: Omit<Task, 'id'>) => Promise<void>
  deleteTask: (id: string) => Promise<void>
  loadTasks: () => Promise<void>
}

export const useTaskStore = create<TaskState>((set) => ({
  tasks: [],
  
  addTask: async (task) => {
    const id = await db.tasks.add({ ...task, id: uuid() })
    set((state) => ({ tasks: [...state.tasks, { ...task, id }] }))
  },
  
  deleteTask: async (id) => {
    await db.tasks.delete(id)
    set((state) => ({ tasks: state.tasks.filter(t => t.id !== id) }))
  },
  
  loadTasks: async () => {
    const tasks = await db.tasks.toArray()
    set({ tasks })
  }
}))

// Dexie queries
import { db } from '@repo/shared/lib/db'

// Get all incomplete tasks
const tasks = await db.tasks
  .where('completed')
  .equals(false)
  .sortBy('createdAt')

// Get tasks by category
const workTasks = await db.tasks
  .where('category')
  .equals('work')
  .toArray()

// Update a task
await db.tasks.update(taskId, {
  completed: true,
  updatedAt: Date.now()
})