Initial implementation of Website Change Detection Monitor MVP

Features implemented: - Backend API with Express + TypeScript - User authentication (register/login with JWT) - Monitor CRUD operations with plan-based limits - Automated change detection engine - Email alert system - Frontend with Next.js + TypeScript - Dashboard with monitor management - Login/register pages - Monitor history viewer - PostgreSQL database schema - Docker setup for local development Technical stack: - Backend: Express, TypeScript, PostgreSQL, Redis (ready) - Frontend: Next.js 14, React Query, Tailwind CSS - Database: PostgreSQL with migrations - Services: Page fetching, diff detection, email alerts Documentation: - README with full setup instructions - SETUP guide for quick start - PROJECT_STATUS with current capabilities - Complete technical specifications Ready for local testing and feature expansion. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-16 18:46:40 +01:00
commit 2c1ec69a79
45 changed files with 5941 additions and 0 deletions
--- a/SETUP.md
+++ b/SETUP.md
@@ -0,0 +1,190 @@
+# 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!