Skip to Content
📚 MyStoryFlow Docs — Your guide to preserving family stories
Getting Started

Getting Started with MyStoryFlow

Welcome to MyStoryFlow - the platform that helps families preserve their stories and create beautiful keepsake books.

What is MyStoryFlow?

MyStoryFlow is a family story collection platform that enables you to:

  • Create Story Campaigns - Organize story collection projects for family members
  • Collect Stories - Gather stories through voice recordings, text, and photos
  • Collaborate with Family - Invite family members to contribute and participate
  • Create Beautiful Books - Transform collected stories into professional keepsake books
  • Preserve Memories - Keep family stories safe and accessible for future generations

Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js: Version 18.18.0 or higher, or Node.js 20+ (currently using 20.19.2)
  • npm: Version 10.8.2 or higher (included with Node.js)
  • Git: For cloning the repository
  • Code Editor: VS Code recommended

Required Accounts (for development)

  • Supabase: For database and authentication
  • Vercel: For deployment (optional)
  • Stripe: For payment processing (optional, for billing features)
  • OpenAI: For AI features (optional)
  • Backblaze B2: For file storage (optional)

Installation & Setup

1. Clone the Repository

git clone https://github.com/yourusername/my-story-flow.git
cd my-story-flow

2. Install Dependencies

MyStoryFlow uses npm workspaces in a monorepo structure:

npm install

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

3. Environment Configuration

Copy the example environment file and configure your environment variables:

cp .env.example .env.local

Edit .env.local with your configuration:

# Database & Authentication (Required)
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
 
# Database Connection
DATABASE_URL=your_database_url
POSTGRES_URL=your_postgres_url
 
# AI Services (Optional)
OPENAI_API_KEY=your_openai_api_key
 
# Payments (Optional)
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret
 
# Email (Optional)
RESEND_API_KEY=your_resend_api_key
RESEND_FROM_EMAIL=noreply@yourdomain.com
 
# File Storage (Optional)
BACKBLAZE_APPLICATION_KEY_ID=your_backblaze_key_id
BACKBLAZE_APPLICATION_KEY=your_backblaze_key
BACKBLAZE_BUCKET_ID=your_bucket_id
BACKBLAZE_BUCKET_NAME=your_bucket_name
 
# B2 Storage Configuration
B2_KEY_ID=your_b2_key_id
B2_APP_KEY=your_b2_app_key
B2_BUCKET_NAME=your_bucket_name
B2_BUCKET_ID=your_bucket_id
B2_BUCKET_URL=your_bucket_url
 
# Notion Integration (Optional)
NOTION_TOKEN=your_notion_token
NOTION_DATABASE_ID=your_database_id

4. Start Development Servers

MyStoryFlow uses Turborepo to manage the monorepo. You can start specific apps or all apps:

# Start all apps
npm run dev
 
# Or start specific apps:
npm run dev:app         # Main web app (port 3000)
npm run dev:marketing   # Marketing site
npm run dev:admin       # Admin app
npm run dev:docs        # Documentation site (port 3004)
npm run dev:tools       # Tools app

The main web app will be available at http://localhost:3000.

5. Database Setup

Set up your Supabase database with the required tables and security policies. Refer to the Database Guide for detailed schema information.

Monorepo Structure

MyStoryFlow is organized as a monorepo with the following structure:

my-story-flow/
├── apps/
│   ├── web-app/           # Main user interface (Next.js) - Port 3000
│   ├── marketing-site/    # Public website and landing pages
│   ├── admin-app/         # Administrative interface
│   ├── docs-app/          # Documentation site (Nextra) - Port 3004
│   ├── tools-app/         # Internal tools and utilities
│   └── content-os/        # Content management system
├── packages/
│   ├── auth/              # Authentication components
│   ├── database/          # Database utilities and types
│   ├── shared/            # Common utilities
│   ├── admin/             # Admin-specific packages
│   └── analytics/         # Analytics utilities
├── lib/                   # Shared libraries
├── scripts/               # Build and utility scripts
└── turbo.json            # Turborepo configuration

Quick Start Guide (User Perspective)

1. Create Your First Campaign

A campaign is a story collection project focused on a specific person or theme.

  1. Navigate to /campaigns/new
  2. Choose a relationship type:
    • Parent
    • Grandparent
    • Spouse
    • Other Family Member

2. Set Up Your Storyteller

Define who the stories are about:

  • Name: The storyteller’s name
  • Relationship: Their relationship to you
  • Goals: How many stories you want to collect

3. Invite Family Members

Collaborate with family to enrich the stories:

  • Send invitation links
  • Set participation roles
  • Enable family contributions

4. Start Collecting Stories

Multiple ways to capture stories:

  • Voice Recording: Record stories directly in the app
  • Text Input: Type stories manually
  • Photo Integration: Add photos to enhance stories
  • Family Input: Let family members add their perspectives

5. Create Your Book

When you have enough stories:

  • Design Your Book: Choose layouts and templates
  • Organize Stories: Arrange in chronological or thematic order
  • Add Photos: Include family photos throughout
  • Order Physical Copies: Get professional printed books

Development Commands

Common commands you’ll use during development:

# Development
npm run dev                    # Start all apps in development mode
npm run dev:app               # Start main web app only
 
# Building
npm run build                 # Build all apps
 
# Testing
npm run test                  # Run all tests
npm run test:watch            # Run tests in watch mode
npm run test:coverage         # Generate coverage report
 
# Linting
npm run lint                  # Lint all apps
 
# Database Migrations (from apps/web-app)
cd apps/web-app
npm run migrate:status        # Check migration status
npm run migrate:apply         # Apply pending migrations
npm run migrate:create        # Create new migration

Key Features Overview

Story Management

  • Create and organize stories by campaign
  • Voice and text recording capabilities
  • Photo and multimedia integration
  • Story editing and refinement tools

Family Collaboration

  • Invite family members to participate
  • Collect family photos and memories
  • Enable family comments and additions
  • Manage family permissions and roles

Book Creation

  • Professional book design tools
  • Multiple layout and template options
  • Photo integration and placement
  • Order management for physical books

Campaign Management

  • Track story collection progress
  • Set goals and milestones
  • Monitor family engagement
  • Manage multiple campaigns

Technology Stack

Frontend

  • Framework: Next.js 15.3.2 (App Router)
  • UI Library: React 19
  • Styling: Tailwind CSS 4.1.10
  • Animations: Framer Motion
  • Forms: React Hook Form with Zod validation

Backend

  • Database: Supabase (PostgreSQL)
  • Authentication: Supabase Auth
  • File Storage: Backblaze B2
  • API: Next.js API Routes

Development Tools

  • Build System: Turborepo
  • Package Manager: npm 10.8.2
  • Testing: Jest, Playwright
  • Linting: ESLint
  • Type Safety: TypeScript 5

Next Steps

  1. Architecture - Understand the system design
  2. Features - Explore all platform capabilities
  3. API Reference - Learn about the API endpoints
  4. Development - Set up your development environment
  5. Components - Browse the component library

Support

  • Documentation: Browse these docs for detailed information
  • GitHub Issues: Report bugs and request features
  • Community: Join our developer community

Ready to start building? Check out the Development Guide for setting up your local environment.

OverviewOverview