⚡ Zero Ping Uptime Monitor

Keep Your Services Alive 24/7

A full-stack uptime monitoring service that automatically pings your services to keep them alive. Built with modern web technologies for maximum reliability.

Features • Tech Stack • Installation • Deployment • API

---

✨ Features

• 🌐 Unlimited Services - Add as many services as you need
• ⏰ Custom Intervals - Configure ping intervals from 1-30 minutes
• 📊 Real-time Monitoring - Live status updates every 10 seconds
• ⚡ Response Time Tracking - Monitor service performance
• 📈 Uptime Percentage - Track service reliability
• 🔄 Auto-Ping System - Automatic pinging every minute
• ⏸️ Pause/Resume - Control services without deletion
• 💾 MongoDB Integration - Persistent data storage
• 🎨 Beautiful UI - Modern, responsive design with dark mode
• 📱 Mobile Friendly - Works seamlessly on all devices

🛠️ Tech Stack

Frontend

Technology	Purpose
	UI Framework
	Build Tool
	Styling
	HTTP Client
	Icons

Backend

Technology	Purpose
	Runtime
	Web Framework
	Database
	Task Scheduler

📁 Project Structure

uptime-monitor/
├── 📂 backend/          # Node.js/Express API
│   ├── src/
│   │   ├── models/      # MongoDB models
│   │   ├── routes/      # API routes
│   │   ├── jobs/        # Cron jobs for pinging
│   │   └── server.js    # Main server file
│   └── package.json
├── 📂 frontend/         # React application
│   ├── src/
│   │   ├── components/
│   │   └── App.jsx
│   └── package.json
└── 📄 README.md

🚀 Installation

Prerequisites

• ✅ Node.js 18+ installed
• ✅ MongoDB Atlas account (or local MongoDB)
• ✅ Git

Quick Start

1. Clone the repository

git clone <your-repo-url>
cd uptime-monitor

2. Backend Setup

cd backend
npm install

Create a .env file in the backend directory:

MONGODB_URI=your_mongodb_connection_string_here
PORT=5000
NODE_ENV=production

3. Start the Application

From the root directory:

npm run start

This will:

• ✅ Start the backend server on port 5000
• ✅ Serve the pre-built frontend files
• ✅ Your app will be available at http://localhost:5000

For development with hot-reload:

npm run dev

🌐 Deployment

Deploy to Replit (Recommended)

This application is optimized for Replit deployment as a single web service.

Option 1: Using render.yaml (Recommended)

1. 📤 Push your code to GitHub
2. 🔗 Go to Render Dashboard
3. ➕ Click "New +" → "Blueprint"
4. 🔌 Connect your GitHub repository
5. 🎯 Render will auto-detect the render.yaml file
6. 🔐 Add environment variables:
   • MONGODB_URI: Your MongoDB Atlas connection string
7. ✅ Click "Apply" to deploy

Option 2: Manual Deployment

1. 📤 Push your code to GitHub
2. 🔗 Go to Render Dashboard
3. ➕ Click "New +" → "Web Service"
4. ⚙️ Configure:
   • Name: zero-ping-uptime-monitor
   • Environment: Node
   • Build Command:

     npm install && cd frontend && npm install && npm run build && cd ../backend && npm install

   • Start Command:

     cd backend && node src/server.js

   • Environment Variables:
     • MONGODB_URI: Your MongoDB Atlas connection string
     • NODE_ENV: production
     • PORT: 10000
5. 🚀 Click "Create Web Service"
6. ⏳ Wait for deployment to complete
7. 🎉 Your app will be live!

How It Works

• The backend Express server serves both:
  • 🔌 API endpoints at /api/*
  • 🎨 Static frontend files from / (built React app)
• ✅ All requests handled by a single service on one domain
• 🚫 No CORS issues or separate domain management needed

🔐 Environment Variables

Development (Local)

Backend (.env):

MONGODB_URI=your_mongodb_connection_string
PORT=5000
NODE_ENV=production

Production (Render)

Set these in your Render dashboard under Environment tab:

• MONGODB_URI: Your MongoDB Atlas connection string
• NODE_ENV: production
• PORT: 10000 (or your preferred port)

📡 API Endpoints

Services

Method	Endpoint	Description
GET	/api/services	Get all services
GET	/api/services/:id	Get single service
POST	/api/services	Create new service
PUT	/api/services/:id	Update service
DELETE	/api/services/:id	Delete service
GET	/api/services/:id/stats	Get service statistics

Health Check

Method	Endpoint	Description
GET	/api/health	API health status

Example: Create Service

POST /api/services
{
  "name": "My Service",
  "url": "https://example.com",
  "interval": 5
}

💡 How It Works

1. 📝 Add Services - Enter service name, URL, and ping interval
2. ⏰ Automatic Pinging - Cron job runs every minute checking which services need pinging
3. 📊 Status Updates - Each ping updates status (online/offline), response time, and uptime
4. 🔄 Real-time Dashboard - Frontend auto-refreshes every 10 seconds
5. 💾 Persistent Storage - All data stored in MongoDB for persistence

💡 Usage Tips

• ⏱️ Use intervals of 5-15 minutes for most services to avoid rate limiting
• ⏸️ Services can be paused/resumed without deleting them
• 📈 System tracks last 100 pings for each service
• 🐌 Monitor response times to identify slow services

🐛 Troubleshooting

Backend won't start

• ✅ Check MongoDB connection string is correct
• ✅ Ensure MongoDB Atlas allows connections from your IP
• ✅ Verify all dependencies are installed: npm install

Frontend can't connect to backend

• ✅ Check VITE_API_URL in frontend .env
• ✅ Ensure backend is running
• ✅ Check CORS settings in backend

Services not pinging

• ✅ Check backend logs for errors
• ✅ Verify the service URL is accessible
• ✅ Ensure cron job is running (check console logs)

🤝 Contributing

Feel free to submit issues and pull requests!

📄 License

MIT License - see the LICENSE file for details

👨‍💻 Developer

Built with ❤️ by Mr Frank (Darrell Mucheri)

💬 Support

For issues and questions, please open a GitHub issue or contact the developer directly.

---

⭐ Star this repo if you find it helpful!

Made with 💙 using React, Node.js & MongoDB