SuporDown Uptime Monitoring and Alerts

A subscription-based monitoring platform that tracks the status of services and devices, sending real-time alerts through multiple channels when outages are detected.

Features

• Main Dashboard UI with status cards showing monitored services/devices with health indicators (green/yellow/red)
• Alert Configuration Panel allowing users to set up notification preferences for email, SMS, Slack, webhook integrations, and push notifications
• Incident Timeline displaying historical uptime/downtime with filtering capabilities
• Quick-Add Widget for rapidly adding new monitoring endpoints with basic configuration
• Status Badges that can be embedded on external websites to display current service status

Built With

• React - Frontend framework
• TypeScript - Type-safe JavaScript
• Vite - Build tool and development server
• Tailwind CSS - Utility-first CSS framework
• Supabase - Backend as a Service
• Stripe - Payment processing
• Radix UI - Headless UI components
• React Router - Client-side routing
• Lucide React - Icon library
• React Hook Form - Form handling
• Framer Motion - Animation library

Getting Started

Prerequisites

• Node.js (version 18 or higher)
• npm or yarn package manager
• Supabase account
• Stripe account (for payment processing)

Installation

1. Clone the repository

   git clone https://github.com/yourusername/uptime-monitoring.git
   cd uptime-monitoring

2. Install dependencies

   npm install

3. Set up environment variables Create a .env file in the root directory and add:

   VITE_SUPABASE_URL=your_supabase_url
   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
   SUPABASE_PROJECT_ID=your_project_id
   SUPABASE_URL=your_supabase_url
   SUPABASE_ANON_KEY=your_supabase_anon_key
   SUPABASE_SERVICE_KEY=your_service_key

4. Set up Supabase database

   npm run types:supabase

5. Start the development server

   npm run dev

6. Open http://localhost:5173 to view it in the browser

Building for Production

npm run build

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Development Guidelines

• Follow the existing code style and conventions
• Write meaningful commit messages
• Add tests for new features
• Update documentation as needed
• Ensure all tests pass before submitting a PR

Top Contributors

Contact

Project Link: https://github.com/yourusername/uptime-monitoring

For support or questions, please open an issue on GitHub.

License

Distributed under the MIT License. See LICENSE for more information.

Acknowledgements

• Tempo - For providing an amazing development platform that made building this project seamless
• Supabase - For the powerful backend infrastructure and real-time capabilities
• Stripe - For reliable payment processing and subscription management
• Radix UI - For accessible and customizable UI components
• Tailwind CSS - For the utility-first CSS framework
• React - For the robust frontend framework
• All the amazing open source contributors who made this project possible