xtablo-source/README.md

Xtablo Monorepo

This is a Turborepo-based monorepo for the Xtablo project, containing multiple apps and shared packages.

Project Structure

xtablo-source/
├── apps/
│   ├── main/           # Main UI application
│   └── external/       # External booking widget microfrontend
├── packages/
│   ├── ui-components/  # Shared UI components (buttons, inputs, etc.)
│   └── shared/         # Shared utilities, hooks, contexts, and types
├── api/                # TypeScript/Node.js API
├── backend/            # Python backend
├── go_backend/         # Go backend
└── xtablo-expo/        # React Native Expo app

Getting Started

Prerequisites

• Node.js 18+ and pnpm
• For other services: Python 3.11+, Go 1.21+

Installation

Install all dependencies:

pnpm install

This will install dependencies for all apps and packages in the workspace.

Development

Run all apps in development mode:

turbo dev

Run specific app:

# Main UI app (http://localhost:5173)
turbo dev --filter @xtablo/main

# External microfrontend (http://localhost:5174)
turbo dev --filter @xtablo/external

Building

Build all apps:

turbo build

Build specific app:

turbo build --filter @xtablo/main
turbo build --filter @xtablo/external

Linting and Formatting

# Lint all packages
turbo lint

# Format all packages
turbo format

Packages

@xtablo/ui-components

Shared UI components library used across the main and external apps. Contains all base UI components like buttons, inputs, dialogs, etc.

Usage:

import { Button, Input, Dialog } from "@xtablo/ui-components";

@xtablo/shared

Shared utilities, hooks, contexts, and types used across apps.

Usage:

import { useSession } from "@xtablo/shared/contexts/SessionContext";
import { api } from "@xtablo/shared/lib/api";
import { Tables } from "@xtablo/shared/types/database.types";

Apps

Main (@xtablo/main)

The main Xtablo application with full dashboard, planning, chat, and administrative features.

Local URL: http://localhost:5173

External (@xtablo/external)

Embeddable booking widget that can be integrated into external websites. Supports both embedded and floating widget modes.

Local URL: http://localhost:5174

Usage:

• Embedded mode: ?mode=embed&eventTypeId=...
• Floating widget: ?mode=widget&eventTypeId=...

Turborepo Features

This monorepo uses Turborepo for:

• Fast builds: Parallel task execution and intelligent caching
• Dependency management: Automatic build ordering based on package dependencies
• Code sharing: Easy sharing of components and utilities between apps

Scripts

• turbo dev - Start all apps in development mode
• turbo build - Build all apps
• turbo lint - Lint all packages
• turbo format - Format all packages
• turbo typecheck - Type check all packages
• turbo test - Run tests for all packages
• turbo clean - Clean all build artifacts and node_modules

Adding a New Package

1. Create a new directory under packages/
2. Add a package.json with name @xtablo/package-name
3. Update pnpm-workspace.yaml if needed (already configured for packages/*)
4. Install in your app: pnpm --filter @xtablo/your-app add @xtablo/package-name@workspace:*

Migration Notes

This project was migrated from a single UI app to a Turborepo monorepo with the following changes:

• Before: Single ui/ directory with all code
• After:
  • apps/main/ - Main application
  • apps/external/ - Separate microfrontend for booking widgets
  • packages/ui-components/ - Shared UI components
  • packages/shared/ - Shared utilities and logic

All import paths have been updated to use workspace packages (@xtablo/ui-components, @xtablo/shared).

Contributing

When adding new shared code:

1. Add to the appropriate package (ui-components for UI, shared for logic/utils)
2. Export from the package's index.ts
3. Use the workspace import in your apps

License

[Your License Here]