Skip to content

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

1 fork
Report repository
BranchesTags

Repository files navigation

🎭 Reddit Rant Roulette

Turn Internet Rage into Poetry with AI!

A fun and interactive web application that transforms real Reddit rants into beautiful, AI-generated poetry using advanced language models. Experience the magic of turning digital frustration into artistic expression with the power of artificial intelligence!

Reddit Rant Roulette TypeScript Python Flask AI

✨ Features

  • 🤖 AI-Powered Poetry: Real poetry generated by Gemini AI language model
  • 🎰 Live Reddit Integration: Fetches real rants from active subreddits
  • 🎭 Intelligent Fallbacks: Graceful degradation if AI or Reddit APIs are unavailable
  • 📋 Copy to Clipboard: Easily copy rants or poems to share
  • 📱 Responsive Design: Works beautifully on all devices
  • 🎨 Beautiful UI: Stunning gradients and smooth animations
  • ⚡ Fast Performance: Built with Vite for lightning-fast development
  • 🔄 Spin Counter: Track how many times you've spun the wheel
  • 🎯 Reset Functionality: Start fresh anytime
  • 📊 Smart Status Indicators: Shows when using AI vs fallback content

🎮 How It Works

  1. Click "SPIN THE RANT!" - Watch the magical spinning animation
  2. Real Reddit Data - The app fetches a live rant from subreddits like r/rant, r/mildlyinfuriating
  3. AI Poetry Generation - Gemini AI transforms the raw emotion into beautiful verse
  4. Instant Results - See both the original rant and AI-generated poem side by side
  5. Copy & Share - Share your favorite AI-generated poetry creations!

🛠️ Tech Stack

Frontend

  • Framework: React 18.3.1 with TypeScript
  • Build Tool: Vite 5.4.2
  • Styling: Tailwind CSS 3.4.1
  • Icons: Lucide React 0.344.0
  • Development: ESLint, PostCSS, Autoprefixer

Backend

  • Framework: Flask 2.3.3 (Python)
  • AI Model: Gemini AI
  • Reddit API: PRAW 7.7.1
  • HTTP Client: Requests 2.31.0
  • Web Scraping: BeautifulSoup4 4.12.2
  • Environment: python-dotenv 1.0.0
  • CORS: Flask-CORS 4.0.0

AI Integration

  • Model: Gemini AI
  • Endpoint: OpenAI-compatible chat completions
  • Fallback: Template-based poem generation

🚀 Quick Start

Prerequisites

  • Frontend: Node.js (version 16 or higher), npm or yarn
  • Backend: Python 3.7+, pip
  • AI: Gemini account and API token

Full Stack Installation

  1. Clone the repository

    git clone https://github.com/aleeya2903/bolt_project.git
cd bolt_project

  2. Frontend Setup

    # Install frontend dependencies
npm install
# or
yarn install

  3. Backend Setup

    # Navigate to backend directory
cd backend

# Install Python dependencies
pip install -r requirements.txt

# Set up environment variables
cp env_template.txt .env
# Edit .env with your API credentials (see Configuration below)

  4. API Configuration

    Edit your .env file with the following:

    # Required for AI poem generation
HF_TOKEN=your_huggingface_token_here

# Optional for live Reddit data (app works with fallback data)
REDDIT_CLIENT_ID=your_client_id_here
REDDIT_CLIENT_SECRET=your_client_secret_here
REDDIT_USER_AGENT=RedditRantRoulette/1.0

  5. Start Both Servers

    Terminal 1 - Backend (API Server):

    cd backend
python app.py
# Backend will run on http://localhost:5001

    Terminal 2 - Frontend (React App):

    # From project root
npm run dev
# or
yarn dev
# Frontend will run on http://localhost:5173

  6. Test the Integration

    # In backend directory
python test_integration.py

  7. Open your browser

    Navigate to http://localhost:5173

Frontend Only (Static Mode)

If you only want to run the frontend with hardcoded rants:

npm install
npm run dev

The app will work with 8 pre-written rant/poem pairs without needing the backend.

📜 Available Scripts

Frontend Scripts

Command Description
npm run dev Start development server on port 5173
npm run build Build for production
npm run preview Preview production build
npm run lint Run ESLint for code quality

Backend Scripts

Command Description
python app.py Start Flask API server on port 5001
python test_api.py Test the API endpoints
python test_integration.py Test AI poem integration
python reddit_scraper.py Test Reddit scraping functionality
python aiPoem.py Test AI poem generation directly

📁 Project Structure

bolt_project/
├── frontend/
│   ├── public/               # Static assets
│   ├── src/
│   │   ├── App.tsx          # Main React component (updated with AI integration)
│   │   ├── main.tsx         # React entry point
│   │   ├── index.css        # Global styles
│   │   └── vite-env.d.ts    # Vite type definitions
│   ├── index.html           # HTML template
│   ├── package.json         # Frontend dependencies
│   ├── vite.config.ts       # Vite configuration
│   ├── tailwind.config.js   # Tailwind CSS configuration
│   └── tsconfig.json        # TypeScript configuration
├── backend/
│   ├── app.py              # Flask API server (with AI endpoints)
│   ├── aiPoem.py           # AI poem generation logic
│   ├── reddit_scraper.py   # Reddit data scraping logic
│   ├── test_integration.py # Integration testing script
│   ├── start_server.py     # Alternative server starter
│   ├── test_api.py         # API testing utilities
│   ├── requirements.txt    # Python dependencies
│   ├── env_template.txt    # Environment variables template (updated)
│   ├── README.md          # Backend-specific documentation
│   └── REDDIT_SETUP.md    # Reddit API setup guide
├── .gitignore             # Git ignore rules
└── README.md             # This file

🎯 Core Components

RantData Interface (Updated)

interface RantData {
  id: number;
  rant: string;
  poem: string;
  source?: string;      // Shows Reddit source info
  isAI?: boolean;       // Indicates if poem is AI-generated
}

Key Features

  • Live Reddit Integration: Real rants from active subreddits
  • AI Poetry Generation: Mistral-7B creates unique poems for each rant
  • Smart Fallbacks: Template-based poems if AI is unavailable
  • State Management: React hooks for UI state
  • Responsive Layout: Two-column grid for rants and poems
  • Interactive Animations: Spinning wheels, hover effects, and transitions

🎨 Design Features

  • Gradient Backgrounds: Beautiful purple-to-blue gradients
  • Animated Text: Pulsing rainbow headers
  • Card Layouts: Distinct styling for rants (red/orange) vs poems (green/teal)
  • AI Indicators: Visual cues showing "🤖 AI POEM" vs "🎭 THE POEM"
  • Source Attribution: Shows Reddit source and upvote count
  • Hover Effects: Scale transforms and shadow effects
  • Loading States: Spinning animations during AI generation
  • Mobile-First: Responsive design that works on all screen sizes

🔧 Configuration

Frontend Configuration (Vite)

  • React plugin enabled
  • Development server on port 5173
  • Optimized for lucide-react package

Frontend Styling (Tailwind CSS)

  • Custom gradient configurations
  • Responsive breakpoints
  • Animation utilities

Backend Configuration

Required: Hugging Face API Setup

  1. Create Hugging Face Account

  2. Generate API Token

  3. Configure Environment

    cd backend
cp env_template.txt .env

    Edit .env file:

    # Required for AI functionality
HF_TOKEN=hf_your_actual_token_here

# Optional for live Reddit data
REDDIT_CLIENT_ID=your_14_character_client_id
REDDIT_CLIENT_SECRET=your_27_character_secret
REDDIT_USER_AGENT=RedditRantRoulette/1.0

Optional: Reddit API Setup

For live Reddit data (app works with sample data if not configured):

  1. Create Reddit App

    • Go to Reddit Apps
    • Click "Create App" or "Create Another App"
    • Choose "script" as the app type
    • Fill in the form:
      • Name: Reddit Rant Roulette
      • Description: AI poetry generator from internet rants
      • Redirect URI: http://localhost:8080

  2. Add credentials to .env (see above)

API Endpoints

Endpoint Method Description
/api/rant GET Get a single random rant from Reddit
/api/rants?count=3 GET Get multiple rants
/api/poem POST Generate AI poem from provided rant text
/api/rant-and-poem GET Main endpoint: Get rant + AI poem
/api/health GET Health check + AI/Reddit status
/api/setup-info GET Configuration status and setup instructions

Main Integration Endpoint

GET /api/rant-and-poem - The primary endpoint used by the frontend:

{
  "success": true,
  "rant": {
    "title": "Why do people...",
    "content": "Full rant text...",
    "subreddit": "rant",
    "score": 1234,
    "url": "https://reddit.com/..."
  },
  "poem": "AI-generated poem text...",
  "using_live_data": true
}

🧪 Testing

Integration Testing

Run the comprehensive integration test:

cd backend
python test_integration.py

This tests:

  • ✅ Health check endpoint
  • ✅ Setup configuration status
  • ✅ Reddit rant fetching
  • ✅ AI poem generation
  • ✅ Combined rant-and-poem endpoint
  • ✅ Environment variable validation

Manual Testing

  1. Test AI directly:

    cd backend
python aiPoem.py

  2. Test Reddit scraping:

    cd backend
python reddit_scraper.py

  3. Test API endpoints:

    cd backend
python test_api.py

🚀 Deployment

Frontend Deployment

Build for Production:

npm run build

The build files will be generated in the dist/ directory.

Frontend Hosting Options:

  • Vercel: Zero-config deployment for React apps
  • Netlify: Drag-and-drop deployment with continuous integration
  • GitHub Pages: Free hosting for static sites
  • Cloudflare Pages: Fast global CDN deployment

Backend Deployment

Backend Hosting Options:

  • Heroku: Easy Python app deployment
  • Railway: Modern platform with Git integration
  • DigitalOcean App Platform: Managed container hosting
  • AWS EC2: Full control virtual private servers
  • Google Cloud Run: Serverless container platform

Environment Variables for Production:

# Required for backend deployment
HF_TOKEN=your_production_hf_token
REDDIT_CLIENT_ID=your_production_client_id
REDDIT_CLIENT_SECRET=your_production_secret
REDDIT_USER_AGENT=RedditRantRoulette/1.0
FLASK_ENV=production

Full Stack Deployment

For a complete deployment, you'll need:

  1. Backend API deployed and accessible via HTTPS
  2. Frontend configured to point to your backend API URL
  3. Environment variables properly configured for production
  4. CORS settings updated for your frontend domain

Example Production Setup:

  • Backend: https://your-api.herokuapp.com
  • Frontend: https://your-app.vercel.app
  • Update frontend API calls to use production backend URL

🎭 Sample Content

The app features both AI-generated and fallback content covering topics like:

  • 🚶 Slow walkers in hallways
  • 🍕 Pineapple on pizza debates
  • 🚗 Turn signal etiquette
  • 🧽 Household chores
  • 🎵 Loud music on public transport
  • 🍽️ Dining manners
  • 🎬 Movie theater behavior
  • 🏧 ATM efficiency
  • 🎯 And real-time Reddit rants on any topic!

🔧 Troubleshooting

AI/Backend Issues

  • "Error: Hugging Face API token not found":
    • Ensure HF_TOKEN is set in your .env file
    • Verify the token is valid at HF Settings
  • "The muses are silent" errors:
    • Hugging Face API might be busy
    • Model could be loading (first request takes longer)
    • Check your internet connection
  • AI poems seem generic:
    • This uses template fallback, check if HF_TOKEN is configured
    • Verify the backend logs for AI errors

Frontend Issues

  • Port 5173 already in use: Kill the process with lsof -ti:5173 | xargs kill -9
  • Module not found: Run npm install to ensure all dependencies are installed
  • Build fails: Check Node.js version (requires 16+)
  • API connection fails: Ensure backend server is running on port 5001

Backend Issues

  • "No rant found" errors:
    • Reddit API might be hitting rate limits
    • Try again in a few minutes
    • Verify Reddit API credentials in .env file
  • CORS errors:
    • Ensure Flask server is running on port 5001
    • Check if both frontend and backend servers are running
  • Import errors:
    • Install dependencies: pip install -r requirements.txt
    • Check Python version (3.7+ required)
  • Port 5001 already in use: Find and kill the process using the port

Integration Issues

  • Backend not connecting:
    • Backend server must be running before frontend
    • Check http://localhost:5001/api/health in browser
    • Verify no firewall is blocking the connection
  • AI not working but app loads:
    • Check http://localhost:5001/api/setup-info for configuration status
    • Run python test_integration.py for detailed diagnostics

🔑 API Keys & Security

Required API Keys

  1. Hugging Face Token (Required for AI features)

  2. Reddit API (Optional for live data)

Security Notes

  • Never commit .env files to version control
  • Use environment variables in production
  • Rotate API keys regularly
  • Monitor usage to avoid rate limits

🤝 Contributing

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

Development Setup

# Frontend development
npm run dev

# Backend development  
cd backend
python app.py

# Run tests
python test_integration.py

📄 License

This project is open source and available under the MIT License.

🎉 Fun Facts

  • AI Model: Uses Mistral-7B-Instruct-v0.3, a state-of-the-art language model
  • Poetry Style: AI generates unique, contextual poems for each rant
  • Rant Sources: Live data from 10+ active Reddit communities
  • Performance: Optimized for smooth animations and quick loading
  • Fallback System: 3-tier system (AI → Templates → Hardcoded) ensures it always works
  • Color Psychology: Red/orange for anger, green/teal for tranquility

Made with 💀, ☕, and 🤖 for maximum internet chaos

Transform your daily frustrations into beautiful art with the power of AI - one rant at a time! 🎭✨

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

Packages

Contributors

Languages