A demo video -> https://youtu.be/B9nN7qCLkuo?si=a3e72CTXOPFL-cFG
AlertFrame is a visual website monitoring tool that lets you click on any element on any website and receive instant email notifications when it changes. Perfect for tracking competitor prices, job postings, news articles, and more.
- Node.js 18.x or higher
- PostgreSQL database (Supabase recommended)
- Google OAuth credentials
- Gmail API enabled
- OnKernel API key (free tier available)
# Clone the repository
git clone <your-repo-url>
cd alert-system
# Install dependencies
npm installCopy the example environment file:
cp .env.example .envEdit .env with your credentials:
# Database (REQUIRED)
DATABASE_URL="postgresql://user:password@host:5432/database"
# Google OAuth (REQUIRED)
GOOGLE_CLIENT_ID="your-client-id.apps.googleusercontent.com"
GOOGLE_CLIENT_SECRET="GOCSPX-your-client-secret"
# NextAuth (REQUIRED)
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="generate-with-openssl-rand-base64-32"
# Encryption (REQUIRED)
ENCRYPTION_KEY="generate-with-openssl-rand-base64-32"
# App Config (REQUIRED)
NODE_ENV="development"
APP_URL="http://localhost:3000"
# OnKernel - Users add their own keys (in Settings or when prompted)
# No platform-wide API key needed
# Email Fallback (OPTIONAL)
RESEND_API_KEY="re_xxxxxxxxxxxx"
EMAIL_FROM="onboarding@resend.dev"Generate secrets:
openssl rand -base64 32 # For NEXTAUTH_SECRET
openssl rand -base64 32 # For ENCRYPTION_KEYSet up Google OAuth:
- Go to Google Cloud Console
- Create OAuth 2.0 Client ID
- Add authorized redirect URI:
http://localhost:3000/api/auth/callback/google - Enable Gmail API
- Copy Client ID and Secret to
.env
OnKernel Setup (User-Based):
- Each user adds their own API key (in Settings or when prompted)
- No platform-wide key needed
- Users sign up at OnKernel Dashboard
- Free tier: $5/month credits (~1,000 page loads)
# Push database schema
npx prisma db push
# Generate Prisma client
npx prisma generateAlertFrame requires two processes running simultaneously:
npm run devThis starts the Next.js application on http://localhost:3000
npm run workerThis starts the background worker that checks alerts every minute.
Both processes must be running for alerts to work.
- Open browser: http://localhost:3000
- Sign in with your Google account (redirects back to home page)
- Add your OnKernel API key when prompted (or in Settings)
- Create a test alert:
- Enter URL:
https://news.ycombinator.com - Click on the first story title
- Set check frequency to "Every 2 minutes"
- Click "Create Alert"
- Enter URL:
- Check terminal logs - Worker should show "Running alert check..."
- Check your Gmail - You'll receive notifications when changes are detected
npm run dev # Start development server (port 3000)
npm run build # Build for production
npm run start # Start production server
npm run worker # Start background worker (checks alerts)
npm run db:push # Push database schema
npm run db:studio # Open Prisma Studio (database GUI)
npm run db:generate # Generate Prisma client- Next.js 15
- TypeScript
- Prisma + PostgreSQL
- OnKernel (Proxy for iframe loading)
- Playwright Core
- NextAuth.js + Gmail API
- Tailwind CSS
lsof -ti:3000 | xargs kill -9npx prisma db push
npx prisma generate- Check both terminals are running
- Verify
DATABASE_URLis correct - Ensure Gmail OAuth is set up properly
- Check terminal logs for error messages
npx prisma studio # Opens at http://localhost:5555- Users add their own API keys in Settings or directly in the selector modal
- Check you have credits at https://dashboard.onkernel.com
- Free tier includes $5/month credits
AlertFrame uses OnKernel as a proxy to solve iframe loading issues (CORS) when displaying external websites in the selector.
User-Based API Keys:
- Each user brings their own OnKernel API key
- Add key in Settings or directly when prompted
- Free tier: $5/month credits (~1,000 page loads)
- No credit card required for free tier