Productivity Apps

Business enablement through automated uptime reporting and one-click presentation export

I built this project to solve a weekly operational pain point: teams were spending hours capturing uptime figures, consolidating comments, and manually building a stakeholder PowerPoint. The work was repetitive, time-consuming, and vulnerable to avoidable mistakes. This application turns that reporting burden into a structured, repeatable business workflow.

React
Vite
Netlify Functions
Airtable
PptxGenJS
Business Automation
Operational Reporting
01

The Project

The most valuable automation is often the kind that quietly gives people back their time.

This application was built to streamline weekly network availability reporting for an ISP operations team. Instead of manually collecting uptime numbers, merging comments, and formatting a PowerPoint from scratch every week, the team can now capture, analyze, and export the entire report from one focused system.

"The goal was not another dashboard. The goal was to remove weekly reporting drag."

02

The Problem

Before this system, the reporting process was manual at every stage: capture, consolidation, review, and presentation preparation.

That meant two business costs at once. First, hours of admin effort were spent on repetitive weekly work. Second, accuracy suffered because the process depended on manual copying, formatting, and hand-built summary material.

Capture uptime and downtime across multiple locations and clients
Log outage comments consistently for stakeholder reporting
Consolidate the weekly data into one view without spreadsheet drift
Build the final PowerPoint presentation without another formatting pass
03

About the Developer

I built this as a purpose-designed internal product, not a generic reporting dashboard. The value comes from how the capture flow, data model, analytical dashboard, and stakeholder export all work together as one business system.

What I Built:

  • A simple capture experience for weekly uptime and outage record entry
  • A serverless API layer for data retrieval, options lookup, and batch submission
  • An interactive dashboard with KPIs, charts, banding, and location drill-down
  • A client-side PowerPoint export flow that removes hours of manual slide prep
  • A hosted internal tool designed around repeatable weekly operations

Live Application Demo

The application is live below. This is the actual dashboard experience used to centralize reporting, review uptime performance, and prepare the weekly stakeholder output.

Live dashboard embed for the production-style uptime reporting workflow

04

Workflow

The strongest part of this project is that it improves the whole reporting chain, from data capture to the final stakeholder-facing artifact.

01

Capture at Source

Operations staff use a lightweight capture form to record uptime hours, downtime, comments, device, client, and period details without juggling spreadsheets or back-and-forth messages.

Make the data easy to enter while the context is fresh

02

Centralize the Data

Netlify Functions receive the submissions and write them into Airtable, creating one structured source of truth for weekly reporting across clients and locations.

From scattered inputs to one consistent reporting store

03

Aggregate for Insight

The React dashboard pulls summarized data from a serverless API and surfaces KPIs, trends, location-level breakdowns, and attention areas that would be difficult to track reliably by hand.

Transform raw capture into operational visibility

04

Export for Stakeholders

A one-click PowerPoint export generates the stakeholder report directly in the browser, removing the final manual formatting step that usually consumes the most admin time.

Finish the workflow where the old process used to begin

05

Feature Set

Capture Form

A mobile-friendly `/capture` workflow for quick weekly uptime submission without spreadsheet friction.

Interactive Dashboard

KPI cards, area and bar charts, and date and location filters for fast operational review.

Availability Bands

Clients are grouped into green, amber, and red performance bands to surface priorities immediately.

Location Drill-Down

A locations matrix lets users move from summary reporting into specific client and site performance.

Attention View

An attention table highlights clients averaging below the defined performance threshold.

PPT Export

PptxGenJS builds the weekly stakeholder presentation directly in the browser with no extra formatting pass.

06

Architecture

0
Serverless endpoints
Dashboard data, capture options, and batch submission
0
Airtable tables
Uptime data plus name conversion mapping
0
Click export
Generate the stakeholder PowerPoint in-browser
0%
Green threshold
Performance bands baked into the reporting model

Capture First

The system starts where the reporting pain starts: capturing the data in a clean, low-friction way before it becomes spreadsheet debt.

Insight Layer

The dashboard does more than display numbers. It organizes them into performance bands, location views, and attention areas that support action.

Final Artifact

The PowerPoint export matters because it completes the business workflow instead of stopping at a dashboard screenshot.

07

Technical Stack

LayerChoiceWhy
FrontendReact + Vite SPAFast internal tool UX with a clear dashboard-driven interface
Capture SurfaceVanilla HTML form at /captureQuick-loading, low-friction data entry for operational teams
Serverless APINetlify Functions (Node.js ESM)Simple deployment model with focused endpoints
Data StoreAirtableStructured operational data without the overhead of a custom database
Presentation ExportPptxGenJSGenerate the final stakeholder artifact directly in the browser
HostingNetlifyFits the serverless model and keeps deployment straightforward
08

API Surface

The serverless layer is intentionally focused: one endpoint for aggregated dashboard data, one for capture-form options, and one for bulk record writes.

netlify functions
GET  /.netlify/functions/get-dashboard
  -> Aggregates Airtable data for KPI cards, charts, band tabs, and location reporting

GET  /.netlify/functions/get-options
  -> Returns client and device lists for the capture workflow

POST /.netlify/functions/batch-submit
  -> Bulk writes queued uptime records from the capture form into Airtable
09

Skills Demonstrated

Business Enablement

  • • Translate repetitive admin work into product opportunities
  • • Design workflows that reduce manual handling and rework
  • • Prioritize accuracy, speed, and reporting clarity together

Frontend Delivery

  • • Build dashboards with filters, charts, and drill-down views
  • • Create mobile-friendly capture experiences for operations teams
  • • Generate PowerPoint output directly in the browser

Backend & Data

  • • Design focused serverless APIs
  • • Model reporting workflows in Airtable-backed structures
  • • Handle batch submission and dashboard aggregation cleanly

Product Thinking

  • • Design around real reporting cycles, not abstract dashboards
  • • Bridge operational data capture and stakeholder presentation output
  • • Remove process waste without overengineering the solution
10

Business Impact

This project demonstrates a kind of software value that matters deeply in real operations: reduce repetitive effort, improve consistency, and produce a final output the business can actually use immediately.

Reduces the weekly admin burden tied to uptime reporting
Improves data accuracy by structuring capture at the source
Shortens the path from operational data to stakeholder communication
Lets teams spend more time on network reliability and less time formatting slides

Repository

Explore the React app, Netlify Functions, Airtable-backed workflow, and PPT export implementation.

4DAnalytics

© 2026 4D Analytics | Isaacson Shoko

Generative AI Developer | Midrand, South Africa

Privacy and analytics

This site records cookie-free interaction events on the production domain to distinguish genuine engagement from infrastructure traffic. It respects Do Not Track and Global Privacy Control and does not include names, email addresses, form messages, or assistant question text in analytics.