Pretty Hooker

A modern cross-platform webhook notification service with a professional, elegant interface.

Comment

Pretty Hooker

A modern cross-platform webhook notification service with a professional, elegant interface.

"Digital Food for the Analog Soul"

A project by CLOUDWERX LAB

Features

  • User Authentication: Secure email/password authentication with NextAuth.js
  • Webhook Management: Create, update, and delete webhook endpoints
  • Native Notifications: Receive native notifications on any platform when webhooks are triggered, with proper app branding, source identification, and icon
  • Comprehensive Notification System:
    • View and manage your notification history
    • Search and filter notifications by read/unread status
    • Mark notifications as read individually or in bulk
    • Real-time updates with optimistic UI
  • Interactive Dashboard: Real-time data visualization with SWR for automatic updates
  • Beautiful UI: Modern, professional interface with both light and dark modes, subtle dot grid background, using shadcn/ui components with consistent styling across all pages
  • Customizable Settings: Personalize your notification preferences, view system information, and manage local storage
  • Admin Panel:
    • Secure admin access with environment variable authentication
    • Complete user management (view, create, delete)
    • Webhook and notification management across all users
    • Database management with table viewer and SQL interface
    • Comprehensive dashboard with all information visible simultaneously
    • Detailed system information with memory usage in MB/GB
    • Real-time activity logs and performance monitoring
  • Secure: JWT-based authentication and webhook verification with toggleable secrets
  • API Access: Programmatically manage webhooks and notifications
  • User Profiles: Manage your account information, preferences, and upload custom profile images
  • Profile Customization: Upload and crop profile images, update profile information
  • Account Security: Change password functionality with validation
  • Detailed Documentation: Comprehensive guides and API reference

Getting Started

Prerequisites

  • Node.js 18.0.0 or later
  • npm or yarn

Installation

  1. Clone the repository:
git clone http://github.com/CLOUDWERX-DEV/pretty-hooker.git
cd pretty-hooker
  1. Install dependencies:
npm install
# or
yarn install
  1. Set up the environment variables:
cp .env.example .env

  1. Edit the .env file with your configuration:

    • DATABASE_URL: Your database connection string
    • NEXTAUTH_SECRET: Secret key for JWT signing
    • NEXTAUTH_URL: Your application URL
    • ADMIN_PASSWORD: Password for admin panel access

  2. Initialize the database:

npx prisma db push
node init-db.js
  1. Start the development server:
npm run dev
# or
yarn dev
  1. Open http://localhost:3000 in your browser.

Usage

Creating a Webhook

  1. Sign in to your account
  2. Navigate to the Webhooks page
  3. Click "New Webhook"
  4. Enter a name and description for your webhook
  5. Click "Create Webhook"
  6. Copy the generated webhook URL

Using Your Webhook

Use the generated webhook URL in any service that supports webhooks. When the webhook is triggered, you'll receive a Windows 11 notification.

Windows 11 Notification System

Pretty Hooker uses a multi-layered approach to ensure reliable Windows 11 notifications:

  1. App Registration: The app registers itself with Windows 11 for proper branding
  2. Custom App ID: Uses "PrettyHooker" as the app ID for consistent branding
  3. Multiple Notification Methods:
    • PowerShell-based Windows 11 notifications (primary method)
    • node-notifier with WindowsToaster (secondary method)
    • VBScript fallback (last resort)
  4. Proper Branding: Notifications appear with the app name and logo
  5. Smart Registration: Only registers once to avoid duplicate notifications
  6. Source Identification: Notifications include the source of the webhook
    • Automatically detects sources like GitHub, OpenWebUI, etc.
    • Supports custom source headers for third-party services
    • Shows source in notification title (e.g., "OpenWebUI: Signup")
  7. Customizable Appearance: Control how notifications look and behave

Supported Services

Pretty Hooker works with any service that can send HTTP POST requests to a webhook URL, including:

  • GitHub
  • Vercel
  • CircleCI
  • Stripe
  • Slack
  • And many more!

Development

Project Structure

pretty-hooker/
├── src/                      # Source directory
│   ├── app/                  # Next.js app directory
│   │   ├── api/              # API routes
│   │   │   ├── auth/         # Authentication endpoints
│   │   │   ├── webhooks/     # Webhook endpoints
│   │   │   ├── notifications/# Notification endpoints
│   │   │   └── admin/        # Admin panel endpoints
│   │   ├── dashboard/        # Dashboard page
│   │   ├── notifications/    # Notification history page
│   │   ├── settings/         # Settings page
│   │   ├── webhooks/         # Webhooks management pages
│   │   ├── admin/            # Admin panel pages
│   │   │   ├── login/        # Admin login page
│   │   │   ├── users/        # User management
│   │   │   ├── webhooks/     # Webhook management
│   │   │   ├── notifications/# Notification management
│   │   │   ├── database/     # Database management
│   │   │   ├── system/       # System information
│   │   │   └── page.tsx      # Admin dashboard
│   │   ├── layout.tsx        # Root layout
│   │   ├── page.tsx          # Home page
│   │   └── globals.css       # Global styles with Tailwind CSS v4
│   ├── components/           # React components
│   │   ├── ui/               # shadcn/ui components
│   │   ├── layout/           # Layout components
│   │   │   ├── admin-layout.tsx # Admin panel layout
│   │   │   └── main-layout.tsx  # Main application layout
│   │   └── theme-provider.tsx# Theme provider component
│   └── lib/                  # Utility functions
│       ├── db.ts             # Database client
│       ├── utils.ts          # Utility functions
│       └── notifications.ts  # Notification utilities
├── prisma/                   # Prisma schema and migrations
│   ├── schema.prisma         # Database schema
│   └── dev.db                # SQLite database file
├── public/                   # Static assets
│   ├── logo.svg              # App logo (SVG format)
│   └── logo.png              # App logo (PNG format)
├── init-db.js                # Database initialization script
├── delete-users.js           # User cleanup script
├── scripts/                  # PowerShell scripts
│   ├── register-app.ps1      # Windows notification registration
│   ├── send-notification.ps1 # Send Windows notifications
│   └── notify.vbs            # VBScript notification fallback
├── postcss.config.mjs        # PostCSS configuration
├── tailwind.config.js        # Tailwind CSS configuration
├── vite.config.ts            # Vite configuration
└── next.config.js            # Next.js configuration

Building for Production

npm run build
# or
yarn build

Running in Production

npm start
# or
yarn start

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

Share this project:

Updates