🌸 Tila Dashboard 🌸

Effortless Website Monitoring and Incident Management

Note

🌐 Tila Dashboard is a powerful and user-friendly platform that empowers you to monitor your website's uptime, metrics, and incident history. With its sleek design and robust features, you can effortlessly manage your online presence and keep your users informed.

---

Tip

🚀 Demo

Experience the power of Tila Dashboard by visiting the live demo

📋 Features

• 🕰️ Uptime Monitoring: Track the uptime of your website and receive alerts for any downtime.
• 📊 Metrics Visualization: Analyze your website's performance with interactive charts and data visualizations.
• 📢 Incident Reporting: Publish updates and communicate with your users about any incidents or maintenance.
• 🔒 Secure and Self-Hostable: Fully open-source and customizable, with the option to self-host the dashboard.
• 🥟 Desktop UI/UX: Completely desktop friendly and customizable website design, with support for tailwind css.

🛠️ Tech Stack

Tila Dashboard is built using the following powerful technologies:

• 🦕 Deno - A modern, secure, and fast runtime for JavaScript and TypeScript.
• 🔥 Lume - A Deno-powered powerfull static site generator.
• 🌙 Lume CMS - Great content management tool that supports GitHub versioning also as well as local
• 🧠 Nunjucks - A powerful templating engine for JavaScript.
• 🎨 Tailwind CSS - A utility-first CSS framework for rapid UI development.
• 🕸️ Browserless - A cloud-based service for running headless Chrome and Puppeteer.
• 📊 Chart.js - A popular JavaScript library for creating beautiful data visualizations.

🖼️ Screenshots

Here's a working and expected screenshot of Tila dashboard

Website Monitor [Online]

Website Monitor [Offline]

Managing Incidents [CMS]

Content Management System

---

🚀 Self-Hosting

Tip

Tila Dashboard is designed to be easily self-hosted. Follow these steps to set up your own instance:

1. Clone or Use as Template: Start by either cloning the Tila Dashboard repository directly or use it as a template to create a new repository for your own customized version.

2. Clear Demo Data: Before you begin configuring the project, run the command deno run -A scripts/delete_data.js to clear the demo data from the repository, ensuring a clean slate for your own website monitoring setup.

3. Configure Uptime Workflow: Navigate to the .github/workflows/uptimer.yml file and update it with your website's domain and the desired monitoring schedule in crone date time format. This will set up a recurring GitHub Actions workflow to regularly check the uptime of your website.

4. Add Your Website Domain: Either add your website's domain to the CONFIG.json file or specify it under the WEBSITE_DOMAIN environment variable in the .github/workflows/uptimer.yml workflow. This will ensure that the dashboard tracks the correct website.

5. Verify Settings: Run the command deno run -A scripts/get_data.js to check that your website domain and other settings are correctly configured.

6. Set Up Browserless Credentials: Configure the BROWSERLESS_SERVER_DOMAIN GitHub repository secret for the Browserless API and authentication TOKEN. This will allow the uptime monitoring workflow to securely access the Browserless service.

7. Enable GitHub Pages: Enable GitHub Pages for your repository so that the Tila Dashboard can be served as a static website.

8. Deploy to GitHub: Commit and push your changes to your GitHub repository. Once the initial workflow run completes, your self-hosted Tila Dashboard will be up and running, ready to monitor and display the metrics for your website powered by GitHub actions.

Important

Remember, these steps guide you through the initial setup process. After completing these steps, you can further customize the Tila Dashboard to meet your specific needs, such as adding more websites to monitor, configuring incident reporting, and exploring the various features of the dashboard.

---

🛠️ Local Development

To run Tila Dashboard locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/ArnavK-09/tila-dashboard.git
   

2. Navigate to the project directory:

   cd tila-dashboard
   

3. Start the development server:

   deno run serve
   

4. Open your browser and visit http://localhost:6969 to see the Tila Dashboard in action.

🤝 Contribution

We welcome contributions to Tila Dashboard! If you'd like to contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them.
4. Push your changes to your forked repository.
5. Submit a pull request to the main repository.

We'll be happy to review your contribution and merge it if it aligns with the project's goals.

---

🌟 Support the Project

If you find Tila Dashboard useful, please consider starring the repository. Your support helps us improve and maintain the project.

Warning

• Error status on live demo website is because I haven't hosted browserless otherwise it would show working sign!
• Current Content Management System of Incidents Managments is set to be on work local environment only and uses CMS Folder for saving data! If you are using in prod. you need to switch to GitHub storage in cms settings, you can take guidance here

---