HackerOne Insight

A streamlined Next.js web application for analyzing HackerOne security reports with AI-powered insights via n8n workflows, featuring glassmorphism design and real-time updates.

Features

• 🔐 Secure Authentication: Email/password authentication with Supabase
• 📊 Report Analysis: Submit HackerOne report URLs for automated analysis
• 🤖 AI Integration: Pure n8n webhook-based AI processing with real-time updates
• 💫 Modern UI: Glassmorphism design with dark theme and neon accents
• 📱 Responsive: Mobile-first design that works on all devices
• ⚡ Real-time: Live status updates and instant result display
• 🎨 Beautiful Design: Production-ready UI with smooth animations

Tech Stack

• Frontend: Next.js 13+ (App Router), TypeScript, Tailwind CSS
• Backend: Next.js API Routes, n8n Webhooks, Supabase PostgreSQL
• Authentication: Supabase Auth
• UI Components: shadcn/ui with custom glassmorphism styling
• Icons: Lucide React
• Database: PostgreSQL with Row Level Security (RLS)
• AI Processing: n8n workflow automation with webhook integration

Project Structure

├── app/                          # Next.js App Router pages
│   ├── api/submit/route.ts      # API endpoint for URL submission
│   ├── api/webhook/route.ts     # Webhook endpoint for n8n results
│   ├── analysis/[id]/page.tsx   # Analysis results page
│   ├── dashboard/page.tsx       # Main dashboard
│   ├── login/page.tsx          # Authentication page
│   ├── layout.tsx              # Root layout
│   ├── page.tsx                # Landing page
│   └── globals.css             # Global styles with glassmorphism
├── components/                  # Reusable React components
│   ├── ui/                     # shadcn/ui components
│   ├── Auth.tsx                # Login/signup forms
│   ├── UrlInputForm.tsx        # URL submission form
│   ├── SubmissionList.tsx      # List of submissions
│   └── AnalysisView.tsx        # Analysis results display
├── lib/                        # Utility functions
│   ├── supabase.ts             # Supabase client configuration
│   └── utils.ts                # General utilities
├── supabase/                   # Database schema and migrations
│   └── migrations/             # Database migration files
└── README.md                   # This file

Setup Instructions

Prerequisites

• Node.js 18+ and npm
• Supabase account
• n8n instance with webhook capabilities

1. Clone and Install Dependencies

git clone <repository-url>
cd hackerone-insight
npm install

2. Configure Supabase

1. Create a new Supabase project at supabase.com
2. Go to Settings > API to get your project URL and anon key
3. In the Supabase SQL Editor, run the migration from supabase/migrations/

3. Set Environment Variables

Copy .env.example to .env.local and fill in your values:

cp .env.example .env.local

Update the values in .env.local:

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

# N8N Webhook Configuration (required)
N8N_WEBHOOK_URL=https://your-n8n.com/webhook/hacker-report
N8N_TOKEN=your-webhook-token

# App Configuration
NEXT_PUBLIC_APP_NAME=HackerOneInsight

4. Run the Development Server

npm run dev

Open http://localhost:3000 to see the application.

5. Configure n8n Workflow (Required)

Set up your n8n workflow with the following components:

Incoming Webhook (Trigger)

• URL: Your n8n webhook URL
• Authentication: Bearer token
• Payload: Receives submission data from the app

Expected payload from app:

{
  "submission_id": "uuid",
  "url": "https://hackerone.com/reports/123456",
  "user_id": "uuid"
}

AI Processing Node

• Process the HackerOne report URL
• Extract and analyze security information
• Generate structured output

Outgoing Webhook (Result)

• URL: https://your-app.com/api/webhook
• Method: POST
• Authentication: Bearer token (same as N8N_TOKEN)
• Payload: Send analysis results back to app

Required payload to app:

{
  "submission_id": "uuid",
  "status": "done", // or "failed"
  "result": {
    "summary": "Analysis summary text",
    "techniques": [
      {
        "name": "Technique name",
        "description": "Technique description"
      }
    ],
    "pro_tip": "Professional recommendation",
    "confidence": "high" // or "medium", "low"
  }
}

Database Schema

The application uses two main tables:

Submissions Table

• Stores submitted HackerOne report URLs
• Tracks processing status (queued, in_progress, done, failed)
• Links to the user who submitted it

Analyses Table

• Stores analysis results from n8n processing
• Contains structured data: summary, techniques, pro tips, confidence
• Links to the original submission

Both tables have Row Level Security (RLS) policies to ensure users can only access their own data.

API Endpoints

POST /api/submit

Handles URL submission:

1. Validates the HackerOne URL format
2. Authenticates the user session
3. Creates a submission record in the database
4. Triggers the n8n webhook (if configured)
5. Returns the submission ID

POST /api/webhook

Receives results from n8n:

1. Validates the webhook token
2. Updates submission status
3. Saves analysis results to database
4. Triggers real-time updates via Supabase

Design System

The application uses a custom glassmorphism design system with:

• Glass Cards: Semi-transparent backgrounds with backdrop blur
• Neon Accents: Cyan and purple gradient highlights
• Dark Theme: Black/charcoal backgrounds
• Smooth Animations: Hover states and transitions
• Responsive Layout: Mobile-first approach

Key CSS classes:

• .glass-card: Main glassmorphism effect
• .border-neon: Neon border styling
• .neon-button: Gradient button with glow effects
• .glass-input: Transparent input fields

Workflow Architecture

User → Submit URL → App API → n8n Webhook → AI Processing → Result Webhook → App → Real-time Update → User

1. User submits HackerOne report URL
2. App validates and stores submission (status: queued)
3. n8n webhook receives submission data
4. AI agents process the report in n8n
5. Results webhook sends analysis back to app
6. App updates database and shows results
7. Real-time updates notify user of completion

Security Features

• Row Level Security: Database-level access control
• JWT Authentication: Secure session management with Supabase
• URL Validation: Server-side validation of HackerOne URLs
• HTTPS Only: Secure communication for all API calls
• Environment Variables: Sensitive data stored securely
• Webhook Authentication: Bearer token validation for n8n communication

Deployment

The application is configured for static export and can be deployed to:

• Vercel (recommended for Next.js)
• Netlify
• Any static hosting provider

Build for production:

npm run build

n8n Workflow Template

A complete n8n workflow template is available that includes:

• Webhook trigger for receiving submissions
• AI processing nodes for report analysis
• Result webhook for sending data back
• Error handling and status updates

Contact the development team for the workflow template file.

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Commit changes: git commit -m 'Add feature'
4. Push to branch: git push origin feature-name
5. Submit a pull request

License

This project is licensed under the MIT License.

Support

For questions or support, please contact the development team or create an issue in the repository.