↓Skip to main content

Home Dashboard Project Overview

·655 words·4 mins

This is the project overview for the home network dashboard I’m working on. The primary use for this document is to guide my GenAI assistance in helping me build it out. You can find how I created this plan at Building a Project Plan with GenAI.

🏠 Project Overview: Home Network Dashboard ✨
#

Purpose
#

The goal of this project is to build a local web-based dashboard that displays various home network statistics and later expands to other home-related data sources (e.g., Pi-hole, system metrics, weather, or smart home devices).
The initial version will focus on showing live data from UniFi (network device and client stats) and Pi-hole (DNS queries and blocks).

This project serves as a learning and exploration tool to practice real-world software development involving Python backends, lightweight frontend design, and Docker-based deployment — in a non-professional, personal environment.

Primary Goals
#

  1. Backend:

    • Create a Flask-based web server that exposes an index page and a dashboard page.
    • Use Python 3.12 within a Docker container.
    • Query local network APIs — UniFi Controller and Pi-hole’s HTTP API — and periodically cache the data.
    • Present basic metrics such as but not limited to:
      • Number of connected clients
      • Bandwidth usage summary
      • DNS queries per minute
      • Domains blocked today

  2. Frontend:

    • Use Jinja2 templates for dynamic HTML rendering.
    • Build a simple, responsive layout using Bootstrap, HTML, CSS, and minimal JavaScript.
    • Display data in tables or summary cards.
    • Avoid any complex frontend frameworks like React or Vue.

  3. Deployment:

    • Run as a containerized service using Docker (single container to start).
    • Accessible only on the local home network.

Index Page Functionality
#

The index page will serve as the main entry point and navigation hub for the dashboard. It will include:

  • Shortcuts and Links:
    • Quick links to local services such as the UniFi Controller, Pi-hole Admin Console, Router, and any other local interfaces.
    • Optional links to other internal tools or pages added in future expansions.
  • Action Buttons:
    • “Disable Ad Blocking for 30 Seconds” and “Disable Ad Blocking for 5 Minutes” buttons that will call the Pi-hole API to temporarily disable protection.
    • These actions will use a simple JavaScript-based fetch or AJAX call to trigger backend Flask routes that communicate with the Pi-hole API.
    • After the specified duration, ad blocking will automatically re-enable.

This page focuses on being lightweight, quick to load, and intuitive on both desktop and mobile devices.

Dashboard Functionality
#

The dashboard page will display real-time or recently updated network data in a clean, organized format.
Key goals and behaviors:

  • Data Display:
    • Show real-time summaries from UniFi and Pi-hole APIs, such as:
      • Total connected clients
      • Network bandwidth usage (upload/download)
      • Active devices list
      • Total DNS queries today
      • Percentage of blocked queries
  • Layout:
    • Use Bootstrap-based responsive cards or panels for presenting different types of metrics.
    • Each section will have a clear label, a numerical stat, and optionally a small timestamp for “last updated.”
  • Data Refresh:
    • The dashboard should periodically refresh data through background fetching (using minimal JavaScript or meta refresh).
    • Avoid heavy client-side rendering; most work happens in the backend Flask app.
  • Extensible Design:
    • Easily expand in the future with additional metric panels (e.g., CPU load, temperature, or weather information).
    • Include optional tabs or sections if the dashboard grows in scope.

Stretch Goals / Future Enhancements
#

  • Add time-based charts (using a small JS library like Chart.js if desired later).
  • User authentication (local login).
  • Integrate other data sources like:
    • Local machine stats via psutil
    • Weather API
    • Smart home devices or sensors
  • Configurable settings page (stored in a local JSON or SQLite DB).
  • Notification or health status indicators (e.g., when a device goes offline).

Non-Goals (for now)
#

  • Remote or public access over the internet.
  • Complex frontend frameworks (React, Vue, etc.).
  • Heavy data persistence.

Technical Requirements
#

Category Requirement
Language Python 3.12
Framework Flask (with Jinja2 templates)
Containerization Docker
Data Sources UniFi Controller API, Pi-hole API
Frontend HTML, CSS, Bootstrap, minimal JavaScript
Environment Local network only
Version Control GitHub
OS/Hosting Raspberry Pi