Sitewatch - Website Uptime Monitor

A comprehensive website uptime monitoring application built with Go (backend) and React (frontend).

Features

• Group Management: Organize websites into logical groups
• Real-time Monitoring: Continuous monitoring of website availability
• Response Time Tracking: Track and visualize response times over time
• Status Dashboard: Visual status indicators (green/yellow/red)
• Charts & Analytics: Response time charts with daily, weekly, and monthly views
• Easy Website Addition: Add multiple websites when creating groups

Quick Start

Prerequisites

• Go (1.19 or later)
• Node.js (18 or later)
• pnpm package manager

Using the Makefile

The easiest way to run Sitewatch is using the provided Makefile:

# Show all available commands
make help

# Install all dependencies
make install

# Run both frontend and backend in development mode
make dev

# Quick start (install + dev)
make quick-start

Manual Setup

If you prefer to run services manually:

Backend

cd server
go mod download
go run cmd/api/main.go

Frontend

cd frontend
pnpm install
pnpm run dev

Available Make Commands

General Commands

• make help - Show help message with all available commands
• make install - Install dependencies for both frontend and backend
• make dev - Run both services in development mode
• make build - Build both frontend and backend for production
• make run - Run the production build
• make test - Run all tests
• make clean - Clean build artifacts
• make stop - Stop running processes

Frontend Commands

• make frontend-dev - Run only the frontend development server
• make frontend-build - Build frontend for production
• make frontend-install - Install only frontend dependencies

Backend Commands

• make backend-dev - Run only the backend development server
• make backend-build - Build backend binary
• make backend-test - Run backend tests
• make backend-watch - Run backend with live reload (using air)

Docker Commands

• make docker-up - Start services using Docker Compose
• make docker-down - Stop Docker services

Deployment Commands

• make deploy - Clean, build, and prepare for deployment
• make quick-start - Install dependencies and start development servers

New Feature: Add Websites with Groups

The application now supports adding websites directly when creating a new group, saving you time and steps:

How to Use:

1. Click the "Add Group" button
2. Enter a group name
3. Optionally add one or more websites:
   • Fill in the website name and URL
   • Click "Add Website" to add more website fields
   • Use the trash icon to remove website fields (minimum 1 required)
4. Click "Add Group" to create the group with all specified websites

Features:

• Default Website Field: One website field is shown by default
• Dynamic Fields: Add or remove website fields as needed
• Optional Websites: You can create a group without any websites
• Validation: Only websites with both name and URL filled will be added
• Batch Creation: All valid websites are added automatically after group creation

API Endpoints

The backend provides a RESTful API:

• GET /api/groups - Get all groups with their websites
• POST /api/groups - Create a new group
• PUT /api/groups/{id} - Update a group
• DELETE /api/groups/{id} - Delete a group
• POST /api/groups/{id}/websites - Add a website to a group
• PUT /api/groups/{groupId}/websites/{websiteId} - Update a website
• DELETE /api/groups/{groupId}/websites/{websiteId} - Delete a website
• GET /api/chart/{period} - Get chart data (today/weekly/monthly)
• POST /api/check - Force a monitoring check

Development

Project Structure

sitewatch/
├── frontend/          # React frontend application
│   ├── app/
│   │   ├── routes/    # React Router routes
│   │   └── components/ # Reusable UI components
│   └── package.json
├── server/            # Go backend application
│   ├── cmd/api/       # Application entry point
│   ├── internal/      # Internal packages
│   │   ├── database/  # Database operations
│   │   ├── models/    # Data models
│   │   ├── monitor/   # Monitoring logic
│   │   └── server/    # HTTP server and routes
│   └── go.mod
└── Makefile          # Build and development commands

Technology Stack

Frontend:

• React 18 with TypeScript
• React Router for navigation
• Recharts for data visualization
• Tailwind CSS for styling
• shadcn/ui component library
• Vite for build tooling

Backend:

• Go 1.19+
• Chi router for HTTP routing
• SQLite database
• CORS support for frontend integration

Monitoring

The application continuously monitors all configured websites and updates their status based on:

• Green: Website is responding normally (< 5 seconds)
• Yellow: Website is slow or has minor issues (5-10 seconds)
• Red: Website is down or not responding (> 10 seconds or error)

Response times and status changes are tracked and stored for historical analysis and charting.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests: make test
5. Submit a pull request

License

This project is licensed under the MIT License.