---
title: Vault Video Processor
emoji: 📹
colorFrom: blue
colorTo: indigo
sdk: docker
pinned: false
app_port: 7860
---

# Vault

Vault is an AI-powered platform that transforms YouTube video archives into shoppable experiences. Creators can monetize their existing content by automatically detecting products featured in videos and matching them to marketplace listings.

## Project Overview

**Tech Stack:**
- **Framework**: Next.js 15 (App Router) with TypeScript
- **Styling**: Tailwind CSS v4 with dark theme
- **Database**: Supabase Postgres with Drizzle ORM
- **Authentication**: Better Auth with YouTube OAuth
- **Background Jobs**: Inngest for AI discovery pipeline
- **Deployment**: Vercel (Frontend) + Railway (Workers)

## Troubleshooting

For detailed information about cloud deployment issues and solutions, see the [Troubleshooting Guide](src/features/discovery/docs/troubleshooting.md).
For a comprehensive architectural overview of our cloud extraction strategy, see the [Cloud Extraction Guide](src/features/discovery/docs/cloud_extraction_implementation_guide.md).

## Getting Started

### Prerequisites

- Node.js 20+ installed
- npm or yarn package manager

### Installation

1. Clone the repository
2. Install dependencies:
   ```bash
   npm install
   ```

3. Copy environment variables:
   ```bash
   cp .env.example .env.local
   ```

4. Run the development server:
   ```bash
   npm run dev
   ```

5. Open [http://localhost:3000](http://localhost:3000) to see the application.

## Available Scripts

- `npm run dev` - Start development server with Turbopack
- `npm run build` - Build production application
- `npm run start` - Start production server
- `npm run lint` - Run ESLint code quality checks

## Project Structure

```
vault/
├── src/
│   ├── app/              # Next.js 15 App Router pages
│   ├── components/       # Shared UI components
│   ├── features/         # Feature-based modules
│   │   ├── auth/         # Authentication
│   │   ├── discovery/    # AI scanning
│   │   ├── marketplace/  # Marketplace sync
│   │   ├── vault/        # Viewer experience
│   │   └── dashboard/    # Creator dashboard
│   ├── lib/              # Utilities and configs
│   └── types/            # TypeScript types
├── public/               # Static assets
└── [config files]
```

## Architecture

This project follows a feature-based architecture with:
- **Mobile-first design** (375px, 768px, 1200px breakpoints)
- **Dark theme** (#0A0B14 backgrounds, #4169FF primary actions)
- **Server-side rendering** for SEO optimization
- **Inngest workflows** for long-running AI tasks

## Learn More

- [Next.js Documentation](https://nextjs.org/docs)
- [Tailwind CSS](https://tailwindcss.com/docs)
- [Supabase](https://supabase.com/docs)
- [Inngest](https://www.inngest.com/docs)

## License

Private - All Rights Reserved