website-monitor/SETUP.md

Quick Setup Guide

🚀 Quick Start (5 minutes)

Step 1: Start Database Services

# In project root
docker-compose up -d

This starts PostgreSQL and Redis in Docker containers.

Step 2: Setup Backend

cd backend
npm install
npm run migrate  # Create database tables
npm run dev      # Start backend server

Backend runs on http://localhost:3001

Step 3: Setup Frontend

cd frontend
npm install
npm run dev      # Start frontend server

Frontend runs on http://localhost:3000

Step 4: Create Account

1. Open http://localhost:3000
2. Click "Sign up"
3. Enter email and password (min 8 chars, must include uppercase, lowercase, number)
4. You're ready to go!

✅ Verify Installation

Check Backend Health

curl http://localhost:3001/health

Should return:

{
  "status": "ok",
  "timestamp": "...",
  "uptime": 123
}

Check Database

docker exec -it website-monitor-postgres psql -U admin -d website_monitor -c "\dt"

Should show tables: users, monitors, snapshots, alerts

Check Redis

docker exec -it website-monitor-redis redis-cli ping

Should return: PONG

🐛 Common Issues

Port Already in Use

If port 3000 or 3001 is busy:

# Backend: Change PORT in backend/.env
PORT=3002

# Frontend: Run on different port
npm run dev -- -p 3001

Database Connection Failed

# Check if PostgreSQL is running
docker ps

# Restart if needed
docker-compose restart postgres

# Check logs
docker logs website-monitor-postgres

Cannot Create Account

• Password must be 8+ characters
• Must include uppercase, lowercase, and number
• Example: Password123

📦 What Was Created

website-monitor/
├── backend/              # Express API server
│   ├── src/
│   │   ├── routes/      # API endpoints
│   │   ├── services/    # Business logic
│   │   ├── db/          # Database layer
│   │   ├── middleware/  # Auth middleware
│   │   └── types/       # TypeScript types
│   ├── package.json
│   └── .env
├── frontend/            # Next.js web app
│   ├── app/
│   │   ├── dashboard/   # Main dashboard
│   │   ├── login/       # Login page
│   │   ├── register/    # Register page
│   │   └── monitors/    # Monitor history
│   ├── lib/             # API client & auth
│   ├── package.json
│   └── .env.local
├── docker-compose.yml   # Database services
└── README.md            # Full documentation

🎯 Next Steps

1. Create First Monitor

   • Go to Dashboard
   • Click "+ Add Monitor"
   • Enter a URL (e.g., https://example.com)
   • Select check frequency
   • Click "Create Monitor"

2. Trigger Manual Check

   • Click "Check Now" on any monitor
   • Wait a few seconds
   • Click "History" to see results

3. View Changes

   • When a page changes, you'll see it in History
   • Changed entries are highlighted in blue
   • View details for each check

🔧 Configuration

Email Alerts (Optional)

To enable email alerts, configure SMTP in backend/.env:

SMTP_HOST=smtp.sendgrid.net
SMTP_PORT=587
SMTP_USER=apikey
SMTP_PASS=your-sendgrid-api-key
EMAIL_FROM=alerts@yourdomain.com

For development, use Mailtrap.io (free).

Adjust Plan Limits

Edit backend/.env:

MAX_MONITORS_FREE=5
MAX_MONITORS_PRO=50
MIN_FREQUENCY_FREE=60    # minutes
MIN_FREQUENCY_PRO=5      # minutes

📖 Learn More

• See README.md for complete documentation
• Check backend/src/routes/ for API endpoints
• Look at frontend/app/ for page components

💡 Tips

1. Test with Simple Sites: Start with simple, fast-loading websites
2. Adjust Frequency: Use longer intervals (60+ min) for testing
3. Check Logs: Watch terminal output for errors
4. Database GUI: Use TablePlus or pgAdmin to inspect database

🆘 Get Help

If you encounter issues:

1. Check logs in terminal
2. Verify all services are running
3. Review error messages
4. Check environment variables

🎉 You're All Set!

You now have a fully functional website monitoring system. Start by creating your first monitor and watch it track changes!