Creator Ecosystem

AI-powered platform for Indian YouTube creators. Generate full content weeks, calculate freelance rates, and plan growth milestones.

🚀 Quick Start

npm install
cp .env.example .env
# Add your Anthropic API key to .env
npm run dev

🏗️ Project Structure

creator-ecosystem/
├── src/
│   ├── pages/           # Main routes (Landing, CreatorOS, CreatorStack)
│   ├── features/        # Feature modules (pipeline)
│   ├── components/      # Reusable UI components
│   ├── design/          # Design tokens & CSS variables
│   └── lib/             # Utilities (claude.ts)
├── dist/                # Production build
└── public/              # Static assets

🎯 Products

CreatorOS (Team Tool)

AI Content Pipeline - Generate 7 types of content from one topic:

• YouTube title hook
• Full script outline (timestamps + B-roll notes)
• Twitter thread (5 tweets)
• LinkedIn post
• Instagram caption (with hashtags)
• YouTube description (SEO-optimized)
• Newsletter intro

Planned Modules:

• Script Lab
• Thumbnail AI (CTR analysis)
• AI Employees (6 specialized agents)
• Content Calendar

CreatorStack (Student Toolkit)

Tools for 8,000+ cohort students learning to freelance:

• Hook Lab - Generate 5 viral title variations
• Rate Calculator - Fair pricing for Indian market
• Growth Map - Subscriber milestone projections

Planned Modules:

• Proposal Generator
• Cold DM Generator
• Creator GPT (AI mentor)
• Client Tracker

🔐 Environment Setup

Create .env file:

VITE_ANTHROPIC_API_KEY=your_api_key_here

⚠️ Security Note: Current implementation uses dangerouslyAllowBrowser: true which exposes your API key in the client. This is fine for local development but NOT for production.

For production deployment, you need to:

1. Create a backend API proxy (Node.js/Express or serverless function)
2. Move API calls to the backend
3. Keep API key on server only
4. Add rate limiting and authentication

Example backend route:

// server.js (Express)
app.post('/api/generate', async (req, res) => {
  const { topic, niche } = req.body
  const client = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY })
  const stream = await client.messages.stream({...})
  // Pipe stream to response
})

🎨 Design System

Theme: Dark-first with amber accent
Spacing: 8px base grid (never break this)
Typography: Inter (sans), JetBrains Mono (code)
Components: Custom React + Framer Motion animations

Key tokens in src/design/tokens.css:

• --canvas - Main background
• --surface-1/2/3 - Elevated surfaces
• --accent - Amber (#FFB21E) - use sparingly
• --btn-primary-bg - Mist gray (NOT amber)

📦 Tech Stack

• Frontend: React 19, TypeScript 6
• Build: Vite 8, Tailwind CSS 4
• Animations: Framer Motion
• AI: Anthropic SDK (Claude Sonnet 4)
• Linting: Oxlint

🛠️ Development

npm run dev      # Start dev server (localhost:5173)
npm run build    # Build for production
npm run preview  # Preview production build
npm run lint     # Run Oxlint

📱 Demo Mode

Without an API key, the app runs in demo mode with simulated AI responses. Perfect for testing UI/UX without consuming API credits.

🚢 Deployment

Build output is optimized and ready for:

• Vercel (recommended - zero config)
• Netlify
• Cloudflare Pages
• Any static host

npm run build
# Deploy the `dist/` folder

📊 Built For

Indian Video School

• 973K YouTube subscribers
• 8,000+ students in creator cohorts
• Focus: Indian creator economy

🤝 Contributing

This is a private project for Indian Video School. If you're part of the team, reach out for access.

📄 License

Private - All rights reserved