Hook Forge

🚀 Futuristic AI-Powered Hook Generator for X (Twitter) Writers

A cutting-edge cyberpunk-themed SaaS platform with neon aesthetics and holographic UI

🌟 Overview

Hook Forge helps content creators write better hooks for their X posts using advanced AI. Features a unique futuristic interface with glassmorphism, neon glows, and cyber-grid backgrounds.

✨ Features

• 🎯 Hook Generator: AI generates 5+ viral hook variations for any topic
• 📊 Hook Analyzer: Real-time scoring (0-100) with detailed feedback
• 📚 Pattern Library: 10+ proven hook templates from viral content
• 🎨 Futuristic UI: Cyberpunk-themed interface with neon effects

🛠️ Tech Stack

• Frontend: React + TypeScript + Vite + Tailwind CSS
• Backend: Node.js + Express + TypeScript
• Database: JSON file-based storage
• AI: OpenAI GPT-5.2 API
• Deployment: Docker + Render.com

🚀 Quick Deploy

Deploy to Render.com (Recommended)

1. Click the "Deploy to Render" button above
2. Connect your GitHub account
3. Add your OPENAI_API_KEY environment variable
4. Click "Apply"

See DEPLOYMENT.md for detailed instructions.

💻 Local Development

Prerequisites

• Bun 1.2+ (Recommended) or Node.js 18+
• OpenAI API key (get one here)

Installation

1. Clone the repository:

git clone <your-repo-url>
cd hook-forge

2. Install dependencies:

bun install:all

3. Configure environment variables:

cd server
cp .env.example .env

4. Edit server/.env and add your OpenAI API key:

OPENAI_API_KEY=sk-your-key-here
JWT_SECRET=your-random-secret-here

Running the App

Start both frontend and backend:

bun run dev

The app will be available at:

• Frontend: http://localhost:5173
• Backend: http://localhost:3001

Usage

Generate Hooks

1. Click the "Generate Hooks" tab
2. Enter your topic (e.g., "productivity tips for developers")
3. Click "Generate Hooks"
4. Copy your favorite hooks

Analyze a Hook

1. Click the "Analyze Hook" tab
2. Paste your hook
3. Get a score (0-100) and specific feedback

Browse Patterns

1. Click the "Pattern Library" tab
2. Filter by category
3. Copy templates to use in your posts

Project Structure

hook-forge/
├── client/                 # React frontend
│   ├── src/
│   │   ├── components/    # React components
│   │   ├── App.tsx        # Main app component
│   │   ├── api.ts         # API client
│   │   └── main.tsx       # Entry point
│   └── package.json
├── server/                # Express backend
│   ├── src/
│   │   ├── routes/        # API routes
│   │   ├── services/      # Business logic
│   │   ├── db.ts          # Database setup
│   │   └── index.ts       # Server entry point
│   └── package.json
└── package.json           # Root package.json

API Endpoints

• POST /api/hooks/generate - Generate hooks for a topic
• POST /api/hooks/analyze - Analyze a hook
• GET /api/hooks/patterns - Get all hook patterns
• GET /api/hooks/history - Get hook history

Development

bun run dev          # Run both frontend and backend
bun run dev:server   # Run only backend
bun run dev:client   # Run only frontend
bun run build        # Build both for production

🐳 Docker Deployment

Build Docker Image

docker build -t hook-forge .

Run Container

docker run -p 3001:3001 \
  -e OPENAI_API_KEY=your_key_here \
  -e NODE_ENV=production \
  hook-forge

Docker Compose

version: "3.8"
services:
  hook-forge:
    build: .
    ports:
      - "3001:3001"
    environment:
      - NODE_ENV=production
      - OPENAI_API_KEY=${OPENAI_API_KEY}
      - JWT_SECRET=${JWT_SECRET}
    restart: unless-stopped

Environment Variables

Server (.env)

• PORT - Server port (default: 3001)
• OPENAI_API_KEY - Your OpenAI API key (required)
• JWT_SECRET - Secret for JWT tokens
• NODE_ENV - Environment (development/production)

License

MIT