Project Structure

StoryForge Project Structure

StoryForge/
│
├── .cursor/
│   └── rules
│
├── convex/
│   │
│   ├── _generated/
│   │   ├── api.d.ts
│   │   ├── api.js
│   │   ├── dataModel.d.ts
│   │   ├── server.d.ts
│   │   └── server.js
│   │
│   ├── queries/
│   │   ├── stories.ts
│   │   └── visualization.ts
│   │
│   ├── ai.ts
│   ├── auth.config.ts
│   ├── debug.ts
│   ├── image.ts
│   ├── myFunctions.ts
│   ├── README.md
│   ├── schema.ts
│   ├── suggestions.ts
│   ├── tsconfig.json
│   └── ui.ts
│
├── node_modules/
│
├── public/
│
├── src/
│   │
│   ├── components/
│   │   │
│   │   ├── ThemeToggle.tsx
│   │   └── ui/
│   │       │
│   │       ├── story/
│   │       │   ├── AIAssistant.tsx
│   │       │   ├── ImageUpload.tsx
│   │       │   ├── index.ts
│   │       │   ├── NewStoryCard.tsx
│   │       │   ├── SavedSuggestionsViewer.tsx
│   │       │   ├── SessionTile.tsx
│   │       │   ├── SessionView.tsx
│   │       │   ├── StoryDialog.tsx
│   │       │   ├── StoryDialogToolTip.tsx
│   │       │   ├── StoryEditor.tsx
│   │       │   ├── StoryGraphViewer.tsx
│   │       │   └── StoryRow.tsx
│   │       │
│   │       ├── button.tsx
│   │       ├── card.tsx
│   │       ├── dialog.tsx
│   │       ├── input.tsx
│   │       ├── scroll-area.tsx
│   │       ├── storyplay.tsx
│   │       ├── textarea.tsx
│   │       └── tooltip.tsx
│   │
│   ├── lib/
│   │   └── utils.ts
│   ├── App.tsx
│   ├── ConvexProviderWithAuthKit.tsx
│   ├── ErrorBoundary.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
│
├── .env.local
├── .env.local.example
├── .gitignore
├── .prettierignore
├── components.json
├── eslint.config.js
├── index.html
├── LICENSE
├── package-lock.json
├── package.json
├── prettier.config.mjs
├── README.md
├── tailwind.config.js
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

---

📁 Directory Overview

/public

Static assets served directly (images, fonts, etc.)

/node_modules

NPM package dependencies (auto-generated)

/convex

Backend logic and database schema powered by Convex. Contains serverless functions, database queries, and authentication configuration.

• _generated/ - Auto-generated API types and definitions
• queries/ - Database query functions for stories and visualizations
• ai.ts - Backend integration with AI services for generating or enhancing story content
• auth.config.ts - Authentication and authorization setup
• debug.ts - Utilities for debugging Convex functions and server behavior
• image.ts - Backend logic for image storage, retrieval, and processing
• myFunctions.ts - Custom backend functions
• schema.ts - Database schema and table definitions
• suggestions.ts - Database storage of AI-powered story suggestions and content generation
• ui.ts - UI-related backend logic
• README.md - Backend documentation and development guidelines
• tsconfig.json - TypeScript configuration specific to Convex backend

/src

Frontend React application source code built with TypeScript and Vite.

• components/ui/ - Reusable UI components library
• components/ui/story/ - Story-specific React components (editor, viewer, cards)
• components/ThemeToggle.tsx - Theme switcher for light/dark mode
• lib/ - Utility functions, helpers, and shared logic
• App.tsx - Main application component
• ConvexProviderWithAuthKit.tsx - Connects frontend authentication with Convex backend
• ErrorBoundary.tsx - Global error handler for React rendering issues
• index.css - Global styles and Tailwind CSS imports
• main.tsx - Application entry point
• vite-env.d.ts - TypeScript definitions for Vite environment variables

/src/components/ui/

Frontend React application UI Components source code

• story/ - Story-specific React components (editor, viewer, cards)
• button.tsx - Reusable button component with variants and sizes
• card.tsx - Card container component for content organization
• dialog.tsx - Modal dialog component for overlays and popups
• input.tsx - Text input field component with validation support
• scroll-area.tsx - Scrollable container with custom scrollbar styling
• storyplay.tsx - Story playback and interactive reading interface
• textarea.tsx - Multi-line text input component with auto-resize
• tooltip.tsx - Contextual tooltip component for hints and information

/src/components/ui/story/

Frontend React application UI Story Components source code

• AIAssistant.tsx - AI-powered writing assistant interface with OpenAI integration
• ImageUpload.tsx - Image upload and management component for story nodes
• index.ts - Barrel export file for centralized story component imports
• NewStoryCard.tsx - Interactive card for creating new story projects
• SavedSuggestionsViewer.tsx - Component for viewing and managing saved AI suggestions
• SessionTile.tsx - Compact tile displaying story session metadata and preview
• SessionView.tsx - Full-page view for story editing sessions
• StoryDialog.tsx - Modal dialog for editing story nodes and choices
• StoryDialogToolTip.tsx - Specialized tooltip for story dialog interactions
• StoryEditor.tsx - Main story editing interface with node management
• StoryGraphViewer.tsx - Interactive graph visualization of story structure using Mermaid.js
• StoryRow.tsx - List row component displaying story details and actions

---

⚙️ Configuration Files

File	Purpose
vite.config.ts	Vite build tool configuration
tsconfig.json	TypeScript compiler options
tsconfig.app.json, tsconfig.node.json	Scoped TypeScript configurations for frontend and Node/Convex code
package.json	Project dependencies and scripts
eslint.config.js	Code linting rules
prettier.config.mjs	Code formatting rules
components.json	shadcn/ui components configuration
.env.local	Environment variables (not in version control)
.env.local.example	Example of environment variable structure

---