🎬 Vidscribe

Transform your videos into text, timestamps, and social content — powered by AI

---

---

🎯 What is Vidscribe?

Vidscribe is a free, open-source video and podcast transcription platform that helps content creators:

• 🎙️ Transcribe videos with high accuracy using AssemblyAI
• ⏱️ Get word-level timestamps — click to jump to any moment
• 🗣️ Detect speakers — perfect for podcasts and interviews
• 📱 Generate social posts — AI creates Twitter, LinkedIn & Instagram content
• 🌐 Multi-language support — Hindi & English

---

🖼️ Screenshots

Dashboard	Upload	Transcription

---

🏗️ Architecture

┌────────────────────────────────────────────────────────────────┐
│                        VIDSCRIBE                               │
├────────────────────────────────────────────────────────────────┤
│                                                                │
│   ┌─────────┐     ┌─────────┐     ┌─────────────────────┐     │
│   │ Next.js │────▶│   API   │────▶│     Background      │     │
│   │   App   │     │ Routes  │     │       Jobs          │     │
│   └─────────┘     └─────────┘     │     (Inngest)       │     │
│        │                          └──────────┬──────────┘     │
│        │                                     │                 │
│        ▼                                     ▼                 │
│   ┌─────────┐                         ┌───────────┐           │
│   │  Clerk  │                         │ AssemblyAI│           │
│   │  Auth   │                         │   + Gemini│           │
│   └─────────┘                         └───────────┘           │
│        │                                     │                 │
│        └──────────────┬──────────────────────┘                 │
│                       ▼                                        │
│              ┌──────────────┐                                  │
│              │    Convex    │◀─── Real-time updates           │
│              │   Database   │                                  │
│              └──────────────┘                                  │
│                                                                │
└────────────────────────────────────────────────────────────────┘

How It Works

1. Upload Video  →  2. Store in Convex  →  3. Upload to Cloudinary
                                                    │
                                                    ▼
4. Complete! ← 5. Save Results ← 6. Transcribe (AssemblyAI)
                                                    │
                                                    ▼
                                    7. Generate Social Posts (Gemini AI)

---

🛠️ Tech Stack

Layer	Technology	What it does
Frontend	Next.js 16 + React 19	App router, server components
Database	Convex	Real-time sync, file storage
Auth	Clerk	User management, webhooks
Transcription	AssemblyAI	Speech-to-text with timestamps
AI	Google Gemini	Social media content generation
Jobs	Inngest	Background processing with retries
Storage	Cloudinary	Video file CDN
Styling	Tailwind + Neubrutalism	Bold, modern UI

---

📁 Project Structure

vidscribe/
├── app/
│   ├── page.tsx                 # Landing page
│   ├── dashboard/
│   │   ├── page.tsx             # Dashboard home
│   │   ├── upload/              # Upload videos
│   │   └── transcriptions/      # View transcriptions
│   └── api/
│       ├── inngest/             # Background job webhook
│       └── webhooks/clerk/      # User sync webhook
│
├── components/
│   ├── ui/                      # UI components
│   └── dashboard/               # Dashboard components
│
├── convex/
│   ├── schema.ts                # Database schema
│   ├── projects.ts              # Project operations
│   ├── transcripts.ts           # Transcript operations
│   └── users.ts                 # User operations
│
├── inngest/
│   └── functions/               # Background jobs
│
└── lib/                         # Utilities

---

🚀 Quick Start

Prerequisites

• Node.js 18+
• pnpm (recommended)

1. Clone & Install

git clone https://github.com/your-username/vidscribe.git
cd vidscribe
pnpm install

2. Set Up Environment

Create .env.local:

# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
CLERK_WEBHOOK_SECRET=whsec_...

# Convex
NEXT_PUBLIC_CONVEX_URL=https://...convex.cloud

# AssemblyAI
ASSEMBLYAI_API_KEY=...

# Cloudinary
CLOUDINARY_CLOUD_NAME=...
CLOUDINARY_API_KEY=...
CLOUDINARY_API_SECRET=...

# Google Gemini
GOOGLE_API_KEY=...

3. Run Development Servers

# Terminal 1 - Next.js + Convex
pnpm dev

# Terminal 2 - Inngest
pnpm dlx inngest-cli@latest dev

4. Open the App

Visit http://localhost:3000 🎉

---

⚙️ Service Setup

🔐 Clerk (Authentication)

1. Create app at clerk.com
2. Copy API keys to .env.local
3. Add webhook: https://your-app.com/api/webhooks/clerk
   • Events: user.created, user.updated, user.deleted

🗄️ Convex (Database)

npx convex dev
# Follow prompts to create project

🎙️ AssemblyAI (Transcription)

1. Sign up at assemblyai.com
2. Copy API key from dashboard

☁️ Cloudinary (Storage)

1. Create account at cloudinary.com
2. Get credentials from Settings → API Keys

🤖 Google Gemini (AI)

1. Visit Google AI Studio
2. Create and copy API key

---

🚢 Deployment

Deploy to Vercel

# Install Vercel CLI
pnpm i -g vercel

# Deploy
vercel --prod

Deploy Convex

npx convex deploy

Configure Services

1. Add all env variables to Vercel
2. Update Clerk webhook URL to production domain
3. Set Inngest webhook: https://your-app.com/api/inngest

---

📚 Documentation

Full documentation available in /docs:

• Overview
• Setup Guide
• Database Schema
• Authentication
• File Upload
• Transcription
• Background Jobs
• Deployment

---

🤝 Contributing

Contributions welcome! Please open an issue or submit a PR.

---

📄 License

MIT License — free to use and modify.

---

Built with ❤️ using Next.js, Convex, and AI