website-monitor/SETUP.md

# Quick Setup Guide

## 🚀 Quick Start (5 minutes)

### Step 1: Start Database Services
```bash
# In project root
docker-compose up -d
```

This starts PostgreSQL and Redis in Docker containers.

### Step 2: Setup Backend
```bash
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
```bash
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
```bash
curl http://localhost:3001/health
```

Should return:
```json
{
  "status": "ok",
  "timestamp": "...",
  "uptime": 123
}
```

### Check Database
```bash
docker exec -it website-monitor-postgres psql -U admin -d website_monitor -c "\dt"
```

Should show tables: users, monitors, snapshots, alerts

### Check Redis
```bash
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:
```bash
# Backend: Change PORT in backend/.env
PORT=3002

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

### Database Connection Failed
```bash
# 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`:

```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](https://mailtrap.io) (free).

### Adjust Plan Limits
Edit `backend/.env`:

```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](https://tableplus.com) or [pgAdmin](https://www.pgadmin.org) 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!