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

    © 2025 4D Analytics | Isaacson Shoko

    Independent AI Systems Consultant | Johannesburg, South Africa