🔥 BREAKDOWN APP - Metal Slogans Generator

Transform corporate slogans into brutal metal breakdowns. Because every brand deserves a mosh pit.

A satirical web app that takes advertising slogans and turns them into hardcore/metalcore/deathcore music snippets. Built with React, powered by AI music generation, deployed on Vercel.

---

🎸 Features

• AI Music Generation: 15-second snippets (5s buildup + 10s breakdown) using fal.ai's Minimax Music model
• 3 Metal Genres: Hardcore, Metalcore, Deathcore
• Content Moderation: LLM-powered filtering to keep submissions appropriate
• Rate Limiting: 3 free generations, then email verification required
• Gallery System: Pin your favorites, share the chaos
• Zero-Config Deployment: One-click deploy to Vercel

---

🚀 Quick Start

Prerequisites

• Node.js 18+
• A fal.ai API key (required)
• Optional: OpenRouter API key for moderation
• Optional: Resend API key for email verification

Local Development

1. Clone the repo

   git clone <your-repo-url>
   cd breakdown-app

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env.local

   Edit .env.local and add your API keys:

   FAL_API_KEY=your_fal_api_key_here
   OPENROUTER_API_KEY=your_openrouter_key_here  # Optional
   RESEND_API_KEY=your_resend_key_here          # Optional

4. Run the development server

   npm run dev

5. Open your browser Navigate to http://localhost:5173

---

📦 Deployment to Vercel

Option 1: Deploy with Vercel CLI (Recommended)

1. Install Vercel CLI

   npm install -g vercel

2. Login to Vercel

   vercel login

3. Deploy

   vercel

   Follow the prompts. On first deploy:

   • Set up and deploy: Y
   • Which scope: Select your account
   • Link to existing project: N
   • Project name: breakdown-app (or your choice)
   • Directory: . (current directory)
   • Override settings: N

4. Set environment variables

   vercel env add FAL_API_KEY
   # Paste your fal.ai API key when prompted
   
   # Optional: Add moderation
   vercel env add OPENROUTER_API_KEY
   
   # Optional: Add email verification
   vercel env add RESEND_API_KEY

5. Deploy to production

   vercel --prod

Option 2: Deploy via GitHub

1. Push your code to GitHub

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin <your-github-repo-url>
   git push -u origin main

2. Import to Vercel

   • Go to vercel.com
   • Click "New Project"
   • Import your GitHub repository
   • Add environment variables in the Vercel dashboard:
     • FAL_API_KEY (required)
     • OPENROUTER_API_KEY (optional)
     • RESEND_API_KEY (optional)
   • Click "Deploy"

---

🔑 API Keys Setup

fal.ai (Required)

1. Go to fal.ai
2. Sign up and navigate to API Keys
3. Create a new API key
4. Copy and add to your .env.local or Vercel environment variables

Cost: ~$0.10-0.20 per 15-second generation. Set budget limits in fal.ai dashboard.

OpenRouter (Optional but Recommended)

1. Go to openrouter.ai
2. Sign up and get an API key
3. We use the free meta-llama/llama-3.2-3b-instruct:free model for moderation
4. Add to environment variables

Cost: $0.00 with free tier model

Resend (Optional)

1. Go to resend.com
2. Sign up and create an API key
3. Verify your sending domain (or use their test domain)
4. Add to environment variables

Cost: Free tier includes 100 emails/day

---

🛡️ Cost Management Strategy

This app is designed for short-term viral use without breaking the bank:

1. Rate Limiting

• Anonymous users: 3 free generations
• Email-verified users: Unlimited (but still rate-limited to prevent abuse)

2. Content Moderation

• LLM pre-filters inappropriate submissions
• Prevents wasted API calls on banned content

3. Shorter Audio

• 15-second snippets instead of full songs
• Faster generation, lower costs

4. Alternative: Demo Mode

• Toggle "SIMULATION ACTIVE" for testing without API calls
• Uses a placeholder sound effect

5. fal.ai Budget Limits

• Set a maximum monthly budget in your fal.ai dashboard
• Recommended: $10-20 for a weekend launch

Cost Projection (Example)

• 100 generations = $10-20
• 500 generations = $50-100
• With rate limiting, you can cap total cost effectively

---

🎨 Project Structure

breakdown-app/
├── api/                    # Vercel Serverless Functions
│   ├── generate.js         # Music generation endpoint
│   ├── poll-status.js      # Status polling endpoint
│   ├── moderate.js         # Content moderation endpoint
│   └── verify-email.js     # Email verification endpoint
├── src/
│   ├── App.jsx             # Main application component
│   ├── main.jsx            # React entry point
│   ├── index.css           # Global styles
│   └── data/
│       └── galleryData.js  # Initial gallery items
├── public/
│   └── logo.png            # App logo (add your own!)
├── .env.example            # Environment variables template
├── .env.local              # Your local environment (git-ignored)
├── vercel.json             # Vercel configuration (optional)
├── vite.config.js          # Vite configuration
└── package.json            # Dependencies and scripts

---

🧪 How It Works

Frontend (React + Vite)

1. User enters a slogan and selects a genre
2. App checks rate limit (localStorage + server-side)
3. If limit exceeded, prompts for email verification
4. Content is moderated via LLM API
5. If approved, sends request to backend

Backend (Vercel Serverless Functions)

1. POST /api/generate: Initiates music generation with fal.ai
2. Returns request_id and status_url
3. GET /api/poll-status: Polls fal.ai for completion
4. Returns audio URL when ready
5. POST /api/moderate: Filters inappropriate content
6. POST /api/verify-email: Sends verification codes

Security

• API keys stored in environment variables (never exposed to client)
• Rate limiting prevents abuse
• Content moderation filters harmful submissions
• Email verification gates unlimited access

---

🐛 Troubleshooting

"RATE LIMIT EXCEEDED"

• Anonymous users are limited to 3 generations
• Verify your email to continue
• Or wait for rate limit reset (1 hour)

"Server configuration error"

• Check that FAL_API_KEY is set in environment variables
• Redeploy after adding environment variables

"Moderation service unavailable"

• OpenRouter API might be down
• App will fallback to basic keyword filtering
• Consider adding OPENROUTER_API_KEY for better moderation

"Email not received"

• Check spam folder
• Verify RESEND_API_KEY is set correctly
• In development, check browser console for code

Music generation takes too long

• fal.ai queue times vary (usually 30-120 seconds)
• Try during off-peak hours
• Check fal.ai status page

---

📝 Development Tips

Add Your Own Logo

Replace /public/logo.png with your custom logo (recommended: 800x400px PNG)

Customize Genres

Edit GENRES array in src/App.jsx:

const GENRES = [
  {
    id: "your-genre",
    label: "Your Genre",
    prompt: "15 second custom genre: description here",
  },
];

Adjust Rate Limits

In api/generate.js, modify checkRateLimit() parameters:

const rateLimit = checkRateLimit(rateLimitId, 5, 3600000); // 5 requests per hour

Testing Content Moderation

Use POST /api/moderate with:

{
  "text": "Your test slogan"
}

---

🎯 Future Improvements

• Persistent database for gallery (Supabase/Firebase)
• Social sharing (Twitter, Instagram cards)
• Download audio files
• User accounts with OAuth
• Admin dashboard for moderation
• Analytics dashboard
• Alternative music models (Suno, Udio)
• Genre customization
• Longer audio snippets (30s, 60s)

---

📄 License

MIT License - Do whatever you want with this code. We're just here for the chaos.

---

🤘 Credits

Built by developers who think corporate slogans deserve better. Or worse. We're not sure.

Stack:

• React 19
• Vite
• Tailwind CSS
• fal.ai (Minimax Music)
• OpenRouter (LLaMA 3.2)
• Vercel (Hosting)
• Lucide Icons

---

🔗 Links

• Live Demo (add after deployment)
• fal.ai Documentation
• Vercel Documentation
• OpenRouter Documentation

---

⚠️ Disclaimer

This is a satirical art project. We are not affiliated with any of the brands that might get turned into metal breakdowns. Please don't sue us. We're broke.

The AI-generated music is for entertainment purposes only. If you actually use this for commercial purposes, consult a lawyer first (and maybe a therapist).

---

Made with ❤️ and a dangerous amount of caffeine