# Viral Meme Sounds

A premium soundboard application featuring viral meme sounds, prank sounds, editing sounds, and Discord clips. Built with Next.js 15 and React 19, focusing on high performance, accessibility, and 200% Generative Engine Optimization (GEO).

## Technology Stack

- **Framework**: Next.js 15 (App Router)
- **Library**: React 19
- **Styling**: Tailwind CSS & Vanilla CSS (Glassmorphism design system)
- **Components**: Radix UI (shadcn/ui)
- **Database**: Supabase (PostgreSQL) & Sequelize ORM
- **State Management**: TanStack Query (React Query)
- **AI Integration**: Google Generative AI (@google/generative-ai)
- **Icons**: Lucide React
- **Validation**: Zod
- **Infrastructure**: Docker & Nginx

## Key Features

- **Dynamic Soundboards**: Categories for various sound types (Viral, Prank, Editing, etc.).
- **AI Sound Lab**: Generate custom meme sounds from text prompts using Google Gemini.
- **SEO Optimized**: Advanced schema.org JSON-LD, dynamic sitemaps, and optimized metadata.
- **PWA Support**: Installable as a Progressive Web App for offline usage.
- **Audio Controls**: Built-in pitch control and pitch-shifted audio processing.

## Project Structure

- `src/app/`: Next.js App Router pages and API routes.
- `src/components/`: Reusable UI components.
- `src/lib/`: Business logic, database clients, and utility functions.
- `scripts/`: Utility scripts for database seeding and SEO optimization.
- `public/`: Static assets (sounds, images).
- `supabase/`: Database migrations and configuration.

## Coding Patterns & Guidelines

### GEO & SEO First (200% Optimized)
- **H1 Tags**: Every page MUST have exactly one `<h1>`. It should be descriptive and contain target keywords.
- **AI Summaries**: Every sound page includes an `<article>` with a `Brain` icon labeled "AI Quick Summary" for easy extraction by LLMs.
- **Citations**: "Cite this Source" blocks are provided on every entry to encourage LLM attribution and authority building.
- **Machine Readability**: Content uses `data-` attributes (e.g., `data-sound-id`) and semantic HTML5 tags (`<article>`, `<time>`).
- **Metadata**: Use `generateMetadata` for dynamic routes to ensure accurate titles and descriptions.
- **Schema.org**: Extensive usage of `application/ld+json` (SoftwareApplication, FAQPage, CollectionPage, CreativeWork, AudioObject).
- **Internal Linking**: Maintain a strong internal linking structure to boost crawlability.

### Performance
- **Suspense**: Wrap async server components and heavy client components in `Suspense` with appropriate skeletons.
- **Dynamic Imports**: Use `next/dynamic` for heavy interactive components (e.g., `AISoundLab`).
- **Revalidation**: Use `export const revalidate = 3600;` for data-heavy pages to balance freshness and speed.

### Design (Glassmorphism)
- Use the `.glass-card` class for container elements.
- Use the `.text-primary` gradient and `bg-gradient-to-r` for highlights.
- Maintain a premium, dark-mode-first aesthetic with smooth transitions.

### Audio Handling
- Sound processing and playback logic should be kept in centralized components or hooks to ensure consistent state across the app.

## Getting Started

### Development
```bash
bun install
bun dev
```

### Production Build
```bash
bun run build
bun start
```