🔥 Roastify

Let AI ruthlessly judge your questionable music taste 🎧

Demo • Features • Installation • Usage • Architecture • Contributing

---

⚠️ Note: Due to temporary unavailability of Spotify API access, the app is not fully functional at this time. The authentication flow and UI are complete, but live roast generation requires valid Spotify API credentials with approved access.

---

📸 Demo

Dark mode aesthetic with animated particles and Spotify green accents

✨ Features

🎵 Spotify Integration

• Secure OAuth 2.0 authentication via NextAuth.js
• Fetches your Top 10 Artists and Top 10 Tracks
• Automatic token refresh handling

🧠 Multimodal AI Analysis

• Uses Google Gemini 3 Flash for lightning-fast roasts
• Analyzes both your music taste AND album art aesthetics
• Comments on color palettes, visual vibes, and what they say about you

🔥 Savage Gen-Z Roasts

• Culturally relevant internet slang (slay, delulu, the ick, NPC energy...)
• Music stereotypes and genre-based roasting
• Every roast ends with a devastating one-liner

🎨 Premium UI/UX

• Dark mode aesthetic with Spotify green (#1DB954)
• Animated floating particles background
• Glassmorphism effects
• Terminal-style loading animation
• Typewriter effect for roast reveal
• "REJECTED" stamp animations on album art

📸 Share Your Shame

• Capture your roast as a shareable PNG
• Native share API integration (mobile)
• One-click download

🛠️ Tech Stack

Category	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript
Styling	Tailwind CSS
Animations	Framer Motion
Auth	NextAuth.js
AI	Google Gemini 3 Flash
Deployment	Firebase Hosting

📦 Installation

Prerequisites

• Node.js 18+
• npm or yarn
• Spotify Developer Account
• Google AI Studio Account

1. Clone the Repository

git clone https://github.com/pronzzz/roastify.git
cd roastify

2. Install Dependencies

npm install

3. Configure Environment Variables

cp env.template .env.local

Edit .env.local with your credentials:

# Spotify OAuth Credentials
# Get these from https://developer.spotify.com/dashboard
SPOTIFY_CLIENT_ID=your_spotify_client_id
SPOTIFY_CLIENT_SECRET=your_spotify_client_secret

# Google Gemini API Key
# Get this from https://aistudio.google.com/apikey
GEMINI_API_KEY=your_gemini_api_key

# NextAuth Configuration
# Generate secret with: openssl rand -base64 32
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_URL=http://localhost:3000

4. Configure Spotify App

In your Spotify Developer Dashboard:

1. Create a new app or select existing
2. Go to Settings → Redirect URIs
3. Add: http://localhost:3000/api/auth/callback/spotify
4. Save settings

5. Run Development Server

npm run dev

Open http://localhost:3000 🎉

🚀 Deployment

Firebase Hosting

1. Install Firebase CLI

   npm install -g firebase-tools

2. Login and Initialize

   firebase login
   firebase init hosting

3. Build and Deploy

   npm run build
   firebase deploy

Important: Update NEXTAUTH_URL in your Firebase environment configuration to match your production URL.

🏗️ Architecture

roastify/
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   ├── auth/[...nextauth]/  # Spotify OAuth
│   │   │   └── roast/               # Roast generation API
│   │   ├── roast/                   # Results page
│   │   ├── layout.tsx               # Root layout
│   │   ├── page.tsx                 # Landing page
│   │   └── globals.css              # Global styles
│   ├── components/
│   │   ├── AlbumGrid.tsx            # Album art with stamps
│   │   ├── JudgeButton.tsx          # Animated CTA
│   │   ├── Particles.tsx            # Background animation
│   │   ├── ShareButton.tsx          # Screenshot capture
│   │   ├── TerminalLoader.tsx       # Loading animation
│   │   └── TypewriterText.tsx       # Typewriter effect
│   ├── lib/
│   │   ├── gemini.ts                # Gemini API client
│   │   └── spotify.ts               # Spotify API utilities
│   └── types/
│       └── next-auth.d.ts           # Type extensions
├── public/                          # Static assets
├── firebase.json                    # Firebase config
├── env.template                     # Environment template
└── package.json

Data Flow

sequenceDiagram
    participant User
    participant Frontend
    participant NextAuth
    participant Spotify
    participant RoastAPI
    participant Gemini

    User->>Frontend: Click "Judge My Soul"
    Frontend->>NextAuth: Initiate OAuth
    NextAuth->>Spotify: Authorization Request
    Spotify-->>User: Login Prompt
    User->>Spotify: Approve Access
    Spotify-->>NextAuth: Access Token
    NextAuth-->>Frontend: Session Created
    Frontend->>RoastAPI: GET /api/roast
    RoastAPI->>Spotify: Fetch Top Artists & Tracks
    Spotify-->>RoastAPI: Listening Data
    RoastAPI->>Gemini: Text + Album Art Images
    Gemini-->>RoastAPI: Savage Roast 🔥
    RoastAPI-->>Frontend: Roast Response
    Frontend->>User: Display with Animations

Loading

🔒 Privacy

• No data storage: All processing is done in-memory
• No tracking: Zero analytics or user tracking
• Secure auth: Industry-standard OAuth 2.0 via NextAuth.js
• API keys: Never exposed to the client

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Spotify Web API for music data
• Google Gemini for multimodal AI capabilities
• NextAuth.js for seamless authentication
• Framer Motion for beautiful animations

---

Built with 🔥 and questionable music taste