Monorepo Structure

MyStoryFlow uses a monorepo architecture to manage multiple applications and shared packages efficiently. This document explains our repository structure, package organization, and the benefits of our monorepo approach.

Repository Structure


my-story-flow/
├── apps/                           # Frontend applications
│   ├── web-app/                   # Main application (app.mystoryflow.com)
│   ├── marketing-site/            # Marketing website (mystoryflow.com)
│   ├── admin-app/                 # Admin dashboard (admin.mystoryflow.com)
│   ├── docs-app/                  # Documentation site (docs.mystoryflow.com)
│   ├── tools-app/                 # Internal tools (tools.mystoryflow.com)
│   ├── content-os/                # AI content automation (Agent-OS pattern)
│   └── logs/                      # Application logs
├── packages/                       # Shared packages
│   ├── ui/                        # UI component library (@mystoryflow/ui)
│   ├── auth/                      # Authentication utilities (@mystoryflow/auth)
│   ├── database/                  # Database utilities and types (@mystoryflow/database)
│   ├── shared/                    # Common utilities (@mystoryflow/shared)
│   ├── admin/                     # Admin-specific utilities (@mystoryflow/admin)
│   └── analytics/                 # Analytics and tracking (@mystoryflow/analytics)
├── lib/                           # Shared libraries and utilities
├── config/                        # Global configuration files (features, pricing)
├── scripts/                       # Build, deployment, and automation scripts
│   ├── gemini-test/               # Gemini API testing
│   ├── pipeline/                  # Article processing pipeline
│   ├── podcast-pipeline/          # Podcast generation system
│   └── video-pipeline/            # Video content generation
├── docs/                          # Additional documentation and architecture
├── requirements/                  # Project requirements and design specs
├── types/                         # Global TypeScript types
├── supabase/                      # Supabase configuration and functions
├── database-migrations/           # Database schema migrations
├── blog-articles/                 # Blog content source files
├── package.json                   # Root package configuration (npm workspaces)
├── turbo.json                     # Turborepo configuration
└── vercel.json                    # Deployment configuration

Applications Overview

Each application in the apps/ directory serves a specific purpose and audience while sharing common functionality through our package system.

Active Applications

web-app: Main application with story creation and management features
marketing-site: Public-facing marketing website
admin-app: Admin dashboard for system management
docs-app: Documentation site (this site)
tools-app: Internal tools and utilities

Special Directories

content-os: Not a traditional Next.js app. This is a Python-based AI content automation system following the Agent-OS pattern. It uses Claude Code sub-agents to transform Pinterest topics into complete multimedia content packages (blog articles, images, videos, podcasts). Currently in design/architecture phase with some working scripts for image and podcast generation.
logs: Application runtime logs

Development Ports

Web App: Port 3000
Tools App: Port 3001
Marketing Site: Port 3002
Admin App: Port 3003
Docs App: Port 3004

Shared Packages

Our package system promotes code reuse and maintains consistency across applications:

UI Package: Reusable React components
Auth Package: Authentication utilities and session management
Database Package: Supabase integration and types
Shared Package: Common utilities and helpers
Admin Package: Admin-specific functionality
Analytics Package: Analytics and tracking utilities

Build System

We use Turborepo for efficient monorepo management with:

Incremental builds
Parallel execution
Intelligent caching
Dependency-aware task execution

Development Commands


# Install all dependencies
npm install
 
# Start all applications
npm run dev
 
# Start specific applications
npm run dev:app          # Web App (port 3000)
npm run dev:marketing    # Marketing Site (port 3002)
npm run dev:admin        # Admin App (port 3003)
npm run dev:tools        # Tools App (port 3001)
npm run dev:docs         # Docs App (port 3004)
 
# Build all applications
npm run build
 
# Run tests across all packages
npm run test

Package Manager

The project uses npm (version 10.8.2) as specified in package.json with npm workspaces for monorepo management.

For detailed information about each application and package, see the respective sections in this documentation.