Creating project overviews helps me plan and organize my work, and doubles as a roadmap for my GenAI assistants.
The Network Dashboard Project Overview was create with the help of GenAI. Here is how I did it.
Using GenAI to Build a Project Overview Document #
Step 1: Initial Prompt #
Normally I word vomit all of my ideas into the prompt and let AI sort it out, but since I knew I’d be sharing my process I wanted to be a bit more structured.
👨‍💼 The initial prompt was: #
I am wanting to start a new home personal project.
I have unifi wifi and pi-hole on my local network.
I want to create a local home dashboard that shows various statistics.
Right now, I want to start with just network stats, but eventually add other things to it as well.
This is a personal project so I can work on non-work related programming at home in the evening.
What kind of general project overview would be helpful for GenAI and an agentic AI to help me with the project.
I want help writing a project overview which contains it's purpose, goals, and requirements.
Some requirements off the top of my head:
* Python 3.12
* docker container
* flask
* web frontend with jinja2 templates
* I am an intermediate Python programmer but very novice at frontend code, so frontend code needs to be as minimal as possible for me to understand.
When prompting, I try to provide the following categories:
- Who I am (the target audience)
- Hobbyist programmer, intermediate Python skills, novice frontend skills
- Persona
- Ope. I didn’t set a persona in this prompt
- Requirements
- Listed above
- Response Format
- Project overview with purpose, goals, and requirements
✨ GPT-5 response: #
## 🏠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 (MVP)**
1. **Backend:**
* Create a Flask-based web server that exposes 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:
- Number of connected clients
- Bandwidth usage summary
- DNS queries per minute
- Domains blocked today
2. **Frontend:**
* Use Jinja2 templates for dynamic HTML rendering (no or minimal JavaScript at first).
* Create a simple, responsive layout using only HTML + basic CSS (Bootstrap optional but minimal).
* Display data in tables or summary cards.
3. **Deployment:**
* Run as a containerized service using **Docker** (single container to start).
* Accessible only on the local home network.
---
### **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, minimal CSS, optional Bootstrap |
| Environment | Local network only |
| Version Control | Git (GitHub or local repo) |
| OS/Hosting | Linux or Raspberry Pi (ideal) |
---
### **Architecture Overview (Initial Draft)**
+-------------------------+
| Web Browser |
| (Local dashboard view) |
+-----------+-------------+
|
v
+-------------------------+
| Flask App |
| - API clients for: |
| * UniFi Controller |
| * Pi-hole |
| - Scheduler for updates|
| - Jinja2 templates |
+-----------+-------------+
|
v
+-------------------------+
| Docker |
| (Python 3.12 Container) |
+-------------------------+
---
### **Development Plan**
1. **Phase 1 – Setup & Skeleton:**
* Dockerfile + Flask app + basic “Hello world” dashboard.
* Verify it runs locally and loads in browser.
2. **Phase 2 – Data Integration:**
* Write Python modules to query UniFi and Pi-hole APIs.
* Display static results on dashboard.
3. **Phase 3 – UI and Layout:**
* Create a single Jinja2 template showing real stats.
* Add minimal CSS for readability.
4. **Phase 4 – Polish & Automation:**
* Run data refresh every N minutes via threading or APScheduler.
* Add Docker Compose or systemd if needed.
---
### **Guidance for AI Collaboration**
When using GenAI or an agentic assistant, provide:
* The **project overview** above (so the AI understands purpose + constraints).
* The **current code snapshot** or architecture diagram.
* A short description of your current objective (e.g., “Help me write the Flask route that queries the Pi-hole API”).
* Any limitations you’re working under (e.g., "keep it simple," "must be understandable to a novice at frontend code").
This ensures the AI can generate **incremental, context-aware code or documentation** rather than overly complex or irrelevant material.
Step 2: Review and Provide Feedback #
The next step that I did was to glance through the document and provide high level suggestions and clarification to refine it further. I did this in a conversational manner.
👨‍💼 My feedback prompt: #
take out the Architecture overview section.
In the technical requirements section, it currently lists "optional bootstrap". Yes, we want to use Bootstrap, I am comfortable with Bootstrap.
We can also use HTML, CSS, and Javascript. But I don't want to use any complex frameworks like like React. When using javascript, keep it minimal and simple.
Remove the development plan. I'll use another document or directly in my AI prompts.
Also take out the Guidance for AI Collaboration section.
Notice that I’m asking to remove several sections. Unless specified, Gen AI will be overly verbose and include everything it can think of so I have to be explicit about what I want removed. The first response was was ~650 words. This second response was only ~400 words long.
✨ GPT-5 response: #
## 🏠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 (MVP)**
1. **Backend:**
* Create a Flask-based web server that exposes 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:
- 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.
---
### **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 | Git (GitHub or local repo) |
| OS/Hosting | Linux or Raspberry Pi (ideal) |
Step 3: Edit and Detailed Refinement #
At this point, I copy the response into VSCode and start making more detailed edits. I usually put more effort in reviewing and editing the document than I do in the initial prompting. This is because I want to make sure the document is exactly how I want it and I also want to make sure I understand everything in it.
This time I only made a few small edits to wording and formatting.
I gave the AI my revised version with the following prompts.
👨‍💼 My feedback prompt: #
I'd also like to put something about links and shortcuts on the index page, including buttons that will "disable ad blocking for 30 seconds" and "for five minutes" that will use the pi-hole api.
we added "index page functionality" let's add the "dashboard functionality" section too.
✨ GPT-5 response: #
# 🏠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
- Blocked domains count
- Top blocked domains or most queried domains
* **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 |
I think this is a good version that can be used to guide the project.