# JobRant - The Global Job Application Revolution

## Concept & Vision

JobRant is a brutally honest, dark-humor-infused job seeker social network where one application = global reach. It's Glassdoor meets Reddit meets a satirical news outlet, powered by AI that helps job seekers connect with real humans and discover better alternatives when companies treat applicants like cattle. The tone is irreverent, the complaints are hilarious, and the data is devastatingly honest.

**Tagline:** "One Application. Infinite Problems. Real People."

## Design Language

### Aesthetic Direction
Inspired by a fusion of Hacker News's brutalist functionality and Discord's modern chat energy, with a color palette that screams "we're mad and we have receipts." Think Bloomberg Terminal meets Twitter's chaos.

### Color Palette
- **Primary:** #FF6B35 (Rage Orange - for calls to action, angry highlights)
- **Secondary:** #1A1A2E (Deep Navy - main background)
- **Accent:** #16C79A (Money Green - for payments, success states)
- **Danger:** #E94560 (Warning Red - company warnings)
- **Background:** #0F0F1A (Almost Black)
- **Surface:** #16213E (Card backgrounds)
- **Text Primary:** #EAEAEA (Off-white)
- **Text Secondary:** #8B8B9A (Muted gray)
- **Gold:** #FFD700 (Top rated / paid out)

### Typography
- **Headlines:** "Archivo Black", Impact, sans-serif (bold, angry, impossible to ignore)
- **Body:** "DM Sans", Inter, system-ui (clean, readable)
- **Monospace:** "JetBrains Mono", monospace (for stats, codes, receipts)

### Spatial System
- Base unit: 8px
- Generous whitespace in cards, tight density in feeds
- Cards have 2px colored left-borders indicating severity

### Motion Philosophy
- Shake animation for company warnings
- Confetti burst when user gets paid by employer
- Slide-in panels for live chat
- Pulse animation for unread messages
- Hover lift on cards (translateY -4px, subtle shadow)

### Visual Assets
- Lucide icons throughout
- Custom "receipt" style cards for company breakdowns
- Meme-inspired reaction system
- Emoji usage: 💀🔥💸🙄🤡📊

## Layout & Structure

### Page Architecture

```
┌─────────────────────────────────────────────────────────────┐
│  HEADER: Logo | Search | [Rant] [Companies] [Jobs] [Chat]  │
├─────────────────────────────────────────────────────────────┤
│  HERO: "Tired of Applying to 47 Jobs and Hearing Nothing?"  │
│  "One Application. We Handle the Rest."                    │
│  [Start One Application] [See Companies Behaving Badly]    │
├─────────────────────────────────────────────────────────────┤
│  STATS BAR: [Active Job Seekers] [Companies Reviewed]       │
│             [Problems Reported] [Users Paid]               │
├─────────────────────────────────────────────────────────────┤
│  MAIN FEED (Tabs: Trending | Recent | Hot | Unresolved)    │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ 🔥 Company Card (receipt style)                      │   │
│  │ "ACME Corp" - 47 problems - Avg response: 23 days    │   │
│  │ [View Problems] [Apply Anyway?] [Find Alternatives] │   │
│  └─────────────────────────────────────────────────────┘   │
├─────────────────────────────────────────────────────────────┤
│  LIVE CHAT SIDEBAR (collapsible)                           │
│  "#general-rants" "#job-tips" "#company-alerts"            │
└─────────────────────────────────────────────────────────────┘
```

### Responsive Strategy
- Desktop: Full 3-column layout (nav | main | chat sidebar)
- Tablet: 2-column (nav collapses to hamburger, chat as overlay)
- Mobile: Single column, bottom tab navigation, chat as full-screen overlay

## Features & Interactions

### 1. One-Stop Application Portal
- User fills ONE profile → AI distributes to matching companies
- Resume parsing with drag-drop
- Auto-tailor cover letter based on company reviews
- Track application status across all companies in dashboard
- **States:** Draft → Submitted → Viewed → Ghosted → Interview → Offer → Rejected

### 2. Company Problem Reporting (Rant System)
- Users submit "receipts" of bad behavior
- Categories: Ghosting, Lowball Offers, Terrible Interview, HR Drama, Fake Jobs, Toxic Culture
- Severity scale: 🙄 Mild Annoyance → 😤 Genuinely Angry → 💀 Corporate Horror Story
- Anonymous posting (email hidden until employer pays)
- AI summarizes complaint themes
- **Hilarious company responses** section (satirical)

### 3. Employer Payment System
- Employers see aggregate problems but NOT individual contact info
- To unlock contact info, employer pays user directly (we take 15%)
- User gets notified: "ACME Corp wants to talk to you! $45 offer to hear your feedback"
- User can accept/decline/negotiate
- Payment via Stripe, held in escrow until conversation completes
- **Receipt:** User gets paid, employer gets contact + conversation transcript

### 4. AI Contact Connector
- When viewing a company with "contact blocked" users:
- AI analyzes which employees might respond
- Suggests: "Try reaching out to [Name] on LinkedIn - they approve engineering hires and responded to 3 candidates last month"
- Find "warm paths" to real people
- **Tone:** Helpful but with attitude ("They ghosted 47 people but [Name] actually replied to candidates...")

### 5. Live Chat - The Job Seekers' Lounge
- Public channels: #general, #industry-specific, #company-specific
- Private rooms for interview prep with real people
- Real-time messaging with typing indicators
- AI bot moderates and occasionally roasts companies
- Screen-share for resume reviews
- **No login required** - generates anonymous username like "AngryPenguin847"

### 6. AI Startup Recommender
- When a company has problems: "Based on 47 complaints about ACME Corp's interview process, we recommend these alternatives:"
- Lists competitors with good reputations
- Shows hiring velocity, culture scores, response rates
- Links to apply directly
- **Sarcastic descriptions:** "Company B has only ghosted 2% of applicants (compared to ACME's 89%)"

### 7. Company Scorecards & Statistics
- Tables with sortable columns:
  - Company Name
  - Ghosting Rate (%)
  - Avg Time to Response
  - Interview Difficulty (1-5 skulls)
  - Salary Offer Fairness
  - HR Responsiveness
  - Overall Rage Score (1-10)
- Filter by industry, size, location
- Export data for personal tracking
- **Visual:** Red/Green heatmaps, bar charts, receipts

### 8. Authentication
- **No login required** for browsing
- Optional login via Google, Facebook, GitHub, LinkedIn, Discord
- Anonymous users get random humorous usernames
- Logged-in users get: persistent history, notifications, payment features, verified reviews
- Email hidden by default, revealed only via paid handshake

## Component Inventory

### Header
- Logo with subtle flame animation on hover
- Search bar with autocomplete (companies, problems, jobs)
- Navigation pills with active indicator
- User avatar/login button
- Notification bell with count badge
- **States:** Logged out, logged in, admin

### Company Card (Receipt Style)
- Company logo, name, industry badge
- Problem count with severity indicator
- Key stats row: Ghosting %, Response time, Rating
- Action buttons: View Problems, Apply, Find Alternatives
- AI "verdict" line in bold
- **States:** Default, hover (lift), loading, no-data

### Rant/Complaint Card
- User avatar (anonymous or logged), timestamp
- Company tag, category tag, severity skull rating
- Complaint text (expandable)
- Evidence section (screenshots, redacted)
- Reaction bar: 💀 x47 | 🔥 x23 | 🙄 x12 | 🤡 x5
- Comment thread
- "Get Paid to Talk" CTA (if employer interested)
- **States:** Anonymous, verified-employee, employer-viewing, paid-unlocked

### Chat Panel
- Channel list (collapsible sidebar)
- Message bubbles with timestamps
- Typing indicator
- Input with emoji picker
- Online user count
- **States:** Connected, connecting, disconnected, minimized

### Payment Modal
- Company logo, user pseudonym
- Offer amount (editable slider: $10-$500)
- Escrow explanation
- Terms checkbox
- [Send Offer] button with Money Green
- **States:** Input, confirming, processing, success, error

### Profile Card (Anonymous)
- Generated avatar (geometric pattern)
- Generated username
- Empty state: "Fill out your profile to get paid"
- Minimal form: skills, industry, target roles
- Link to full profile with auth

### Stats Table
- Sortable column headers
- Row hover highlight
- Expandable rows for detailed breakdown
- Pagination
- Export button
- **States:** Loading skeleton, populated, empty, filtered

## Technical Approach

### Stack
- **Frontend:** Next.js 14 (App Router), React 18, TypeScript
- **Styling:** Tailwind CSS with custom config
- **Backend:** Next.js API Routes + tRPC
- **Database:** PostgreSQL via Supabase or raw Docker
- **ORM:** Prisma
- **Real-time:** Socket.io or Supabase Realtime
- **Auth:** NextAuth.js with multiple providers
- **Payments:** Stripe Connect (marketplace model)
- **AI:** OpenAI API for summaries and recommendations
- **Container:** Docker + Docker Compose

### Database Schema (PostgreSQL)

```sql
-- Users (optional auth)
users {
  id, auth_provider, auth_id, email, name, avatar_url,
  username (auto-generated), bio, skills[], target_roles[],
  created_at, updated_at
}

-- Companies
companies {
  id, name, logo_url, industry, size, website,
  stripe_account_id, created_at
}

-- Problems/Rants
problems {
  id, company_id, user_id, category, severity,
  title, content, evidence_urls[],
  ai_summary, is_anonymous, contact_hidden,
  created_at, updated_at
}

-- Problem Reactions
problem_reactions {
  id, problem_id, user_id, reaction_type, created_at
}

-- Payments (employer → user for contact info)
payments {
  id, problem_id, employer_id, user_id, amount,
  status (pending,escrowed,released,refunded),
  stripe_payment_intent, created_at
}

-- Applications (one-stop portal)
applications {
  id, user_id, company_id, status, resume_url,
  cover_letter, tracking_token, created_at, updated_at
}

-- Chat Messages
messages {
  id, channel, user_id, content, created_at
}

-- User Sessions (anonymous)
anonymous_sessions {
  id, username, created_at, last_active
}
```

### API Endpoints

```
Auth:
POST   /api/auth/[...nextauth]     - OAuth login
GET    /api/auth/session           - Get session

Companies:
GET    /api/companies              - List companies (paginated, filterable)
GET    /api/companies/:id         - Company detail + stats
GET    /api/companies/:id/problems - Company's problems
POST   /api/companies              - Add company (admin)

Problems:
GET    /api/problems               - List problems (feed)
POST   /api/problems               - Submit problem
GET    /api/problems/:id           - Problem detail
PUT    /api/problems/:id           - Update problem
DELETE /api/problems/:id           - Delete (own only)

Payments:
POST   /api/payments/offer         - Employer makes offer to user
GET    /api/payments/incoming      - User sees incoming offers
POST   /api/payments/accept        - User accepts offer
POST   /api/payments/release        - Release contact info after chat

AI:
POST   /api/ai/summarize            - Summarize company problems
POST   /ai/recommend-alternatives   - Find competing startups
POST   /ai/find-contact             - Suggest warm contact paths

Chat:
GET    /api/chat/channels          - List channels
GET    /api/chat/messages/:channel - Get messages (paginated)
POST   /api/chat/messages          - Send message (SSE for updates)

Applications:
POST   /api/applications           - Submit one application to multiple
GET    /api/applications           - User's application status
PUT    /api/applications/:id       - Update status
```

### Docker Setup

```dockerfile
# docker-compose.yml
services:
  app:
    build: .
    ports: 3000:3000
    environment:
      DATABASE_URL: postgresql://user:pass@db:5432/jobrant
      NEXTAUTH_SECRET: ${NEXTAUTH_SECRET}
      STRIPE_SECRET_KEY: ${STRIPE_SECRET_KEY}
    depends_on:
      - db
    volumes:
      - ./uploads:/app/uploads

  db:
    image: postgres:15-alpine
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
      POSTGRES_DB: jobrant
    volumes:
      - pgdata:/var/lib/postgresql/data
    ports:
      - 5432:5432

volumes:
  pgdata:
```

### Environment Variables
```
DATABASE_URL=
NEXTAUTH_SECRET=
NEXTAUTH_URL=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
OPENAI_API_KEY=
```

## Implementation Phases

### Phase 1: Foundation
- Next.js setup with Tailwind
- Database schema + Prisma
- Basic company listing
- Anonymous user sessions

### Phase 2: Core Social
- Problem/rant submission
- Reactions and comments
- User-generated content display
- Search functionality

### Phase 3: AI Features
- Problem summarization
- Startup recommendations
- Contact path suggestions

### Phase 4: Payments
- Stripe Connect setup
- Payment flow
- Contact reveal mechanism

### Phase 5: Real-time
- Live chat
- Notifications
- Real-time updates

### Phase 6: Polish
- Animations
- Mobile optimization
- Performance tuning