UnTypeBeats Frontend

Next.js 14 frontend for UnTypeBeats - AI-powered audio mixing and processing platform.

Features

• Multi-track Audio Mixer: Real-time audio mixing with Web Audio API
• Firebase Authentication: Social login with Google, GitHub, Facebook
• AI Processing: Stem separation and mastering via GCP backend
• Real-time Visualization: Audio level meters and waveform display
• Responsive UI: Built with Tailwind CSS and ShadCN components

Tech Stack

• Framework: Next.js 14 (App Router)
• UI: Tailwind CSS + ShadCN UI
• State: Zustand
• Auth: Firebase Authentication
• Database: Firestore
• Audio: Web Audio API
• Deployment: Vercel

Getting Started

Prerequisites

• Node.js 18+
• Firebase project with Authentication and Firestore enabled
• Backend API running (see ../untypebeats-backend)

Installation

1. Install dependencies:

npm install

2. Set up environment variables:

cp .env.local.example .env.local
# Edit .env.local with your Firebase config

3. Run development server:

npm run dev

Open http://localhost:3000

Project Structure

app/
├── (auth)/           # Authentication pages
│   └── login/
├── beats/            # Beats listing and player
│   ├── page.tsx
│   └── [id]/page.tsx
├── upload/           # Audio upload page
└── api/              # API routes (proxies)

components/
├── audio/            # Audio mixer components
│   ├── AudioMixer.tsx
│   ├── MixerChannel.tsx
│   ├── TransportControls.tsx
│   ├── LevelMeter.tsx
│   └── ProgressBar.tsx
└── ui/               # ShadCN components

lib/
├── audio-engine.ts   # Web Audio API engine
├── firebase.ts       # Firebase initialization
├── hooks/            # React hooks
│   ├── useAudioMixer.ts
│   └── useAuth.ts
└── stores/           # Zustand stores
    └── mixer-store.ts

types/
└── index.ts          # TypeScript definitions

Key Components

Audio Mixer

The audio mixer is built with Web Audio API and provides:

• Multi-track synchronized playback
• Per-channel gain, pan, solo, mute controls
• Master channel with stereo panning
• Real-time level meters
• Progress bar with seeking

Authentication

Firebase Authentication with social providers:

• Google
• GitHub
• Facebook

Beat Player

Load and play beats with individual stem tracks. Supports:

• Track swapping
• Mixer state saving to Firestore
• Real-time audio visualization

Upload & Processing

Upload audio files for AI processing:

• Direct GCS upload via signed URLs
• Stem separation (Spleeter)
• Audio mastering
• Job status tracking with progress

Environment Variables

Required variables in .env.local:

NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
NEXT_PUBLIC_API_URL=

Deployment

Vercel (Recommended)

1. Connect GitHub repository to Vercel
2. Set environment variables in Vercel dashboard
3. Deploy automatically on push to main

vercel --prod

Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

License

MIT