DJ-PiGuy Radio

A modern, customizable music radio web app built with Next.js. Clone it and create your own internet radio station with your tracks!

Sponsored by Contractors Choice Agency - This creative project was funded to give contractors access to custom songs for their businesses. Because every hard-working contractor deserves a better day with custom music to listen to on the job site.

Origin Story

This project started as SprayFoamRadio.com - a custom radio station built specifically for spray foam insulation contractors. The concept was simple: create AI-generated hip-hop tracks celebrating the trades, giving contractors something fun and unique to listen to while on the job.

The project has since been open-sourced as DJ-PiGuy Radio so anyone can clone it and create their own custom radio station for their business, brand, or community.

Features

• Radio Mode - Continuous playback with shuffle, queue management, and auto-play
• Song Library - Browse, search, and filter tracks by genre
• Individual Song Pages - Shareable pages for each track with SEO metadata
• Responsive Design - Works great on desktop, tablet, and mobile
• Optimized Images - WebP thumbnails and hero images for fast loading
• Share Functionality - Share songs via Twitter, Facebook, Email, or copy link
• Dark Theme - Modern dark UI with customizable accent colors

Quick Start

1. Clone the Repository

git clone https://github.com/MCERQUA/AI-Radio.git
cd AI-Radio
npm install

2. Run Development Server

npm run dev

Open http://localhost:3000 to see your radio station.

3. Build for Production

npm run build
npm start

Adding Your Own Tracks

Step 1: Add Your Music Files

Place your MP3 files in the public/music/ directory:

public/
└── music/
    ├── your-song-1.mp3
    ├── your-song-2.mp3
    └── ...

Step 2: Update Song Data

Edit lib/songs-data.ts to add your tracks:

export const songsData: SongData[] = [
  {
    id: "1",
    title: "Your Song Title",
    artist: "Your Artist Name",
    genre: "Hip-Hop",  // or any genre
    duration: 180,     // duration in seconds
    cover: "/covers/your-song.png",
    plays: 0,
    src: "/music/your-song.mp3",
    description: "A description of your track.",
  },
  // Add more songs...
]

Step 3: Add Album Covers

Option A: Manual Covers

Add your album art to public/covers/ then run the optimization script:

node scripts/optimize-covers.mjs

This creates optimized WebP versions:

• public/covers/thumb/ - 300x300 thumbnails (~17KB each)
• public/covers/hero/ - 800x800 hero images (~90KB each)

Option B: Generate with AI

If you have access to an AI image generator, create covers with this prompt style:

Hip-hop album cover with vinyl record peeking out from the right side.
Square album sleeve on light gray background at slight angle.
The album art features [YOUR THEME HERE].
Bold graffiti-style text "[SONG TITLE]" at the top and "[ARTIST NAME]"
as artist name at bottom. [COLOR SCHEME]. Professional product
photography style showing the album cover as a physical vinyl record
package with the brown/amber colored record visible on the right side.

Customization

Branding

Update the site name and branding in:

• app/layout.tsx - Site metadata and title
• components/player.tsx - Logo and brand name
• components/song-library.tsx - Header branding

Colors

Edit app/globals.css to customize the color scheme:

:root {
  --primary: /* your primary color */;
  --accent: /* your accent color */;
  /* ... */
}

Genres

Update the genre list in components/song-library.tsx:

const genres = [
  "All",
  "Hip-Hop",
  "Rock",
  "Pop",
  // Add your genres...
]

Project Structure

AI-Radio/
├── app/                    # Next.js app directory
│   ├── song/[id]/         # Individual song pages
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/            # React components
│   ├── music-context.tsx  # Music player state
│   ├── player.tsx         # Audio player
│   └── song-library.tsx   # Song list/grid
├── lib/
│   └── songs-data.ts      # Song database
├── public/
│   ├── covers/            # Album artwork
│   │   ├── hero/          # 800x800 WebP
│   │   └── thumb/         # 300x300 WebP
│   └── music/             # MP3 files
└── scripts/
    └── optimize-covers.mjs # Image optimization

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Image Optimization: Sharp
• Icons: Lucide React

Deployment

Vercel (Recommended)

Other Platforms

The app can be deployed to any platform that supports Next.js:

• Netlify
• Railway
• Docker
• Self-hosted

Performance

Image optimization reduces cover art from ~6MB to:

• Thumbnails: ~17KB each (300x300 WebP)
• Hero images: ~90KB each (800x800 WebP)

Total reduction: 98% smaller file sizes for fast loading.

License

MIT License - Feel free to use this for your own radio station!

Sponsor

This project is proudly sponsored by Contractors Choice Agency.

Their mission: Give contractors access to custom songs for their businesses, making every work day a little better with music made just for them.

Credits

• Sponsored by Contractors Choice Agency
• Built with Claude Code
• Album covers generated with AI image generation
• Original design inspired by modern music streaming apps

---

Made with beats and code for the hardworking contractors out there