Plugin Dashboard System

Overview

This system is designed to monitor, manage, and license websites using a custom plugin.
It consists of four main layers: Client Website + Plugin, Backend API, Database, and Admin Dashboard.

System Architecture

1. Client Website + Plugin (Wordpress)

• Websites install the company’s plugin (WordPress / Shop).
• Plugin responsibilities:
  • Install & activate
  • Send HTTPS requests to the backend with website info (domain, plugin version, license key)

2. Backend API (FastAPI)

• Handles core logic:
  • Authentication (API keys)
  • Website registration
  • License validation
  • Storing website data
• Acts as a bridge between the plugin and the database.

3. Database (SQLAlchemy + Alembic)

• Stores all system data in structured tables:
  • Websites Table: domain, plugin version, status, last seen
  • API Keys Table: unique API keys for authentication
  • License Info Table: license key, type, expiration, status
• Ensures data persistence and supports queries for the dashboard.

4. Admin Dashboard (React)

• Provides a visual interface for the company to:
  • View registered websites
  • Monitor plugin versions and activity
  • Manage licenses
• Retrieves data from the backend API in real-time.

System Flow

1. Website + Plugin
2. Backend API (FastAPI)
3. Database (Websites, API Keys, License Info)
4. Admin Dashboard (React)

Key Points

• API-driven architecture: Plugins and dashboard communicate with the backend via REST API.
• Secure: Each plugin uses a unique API key for authentication.
• Scalable: Backend and database can handle multiple websites.
• Centralized management: All website and license data is stored and monitored in one place.

Running the System Locally

Prerequisites

Make sure you have the following installed:

• Python 3.11+
• Node.js 18+
• npm or yarn
• PostgreSQL
• Git

---

1. Clone the Repository

git clone https://github.com/Reno-03/plugin-monitoring-dashboard
cd plugin-monitoring-dashboard

For installing the WordPress Plugin, copy this sample plugin PHP file:

dashboard-test-plugin.php

And paste to your Wordpress Plugins directory:

app/public/wp-content/plugins

---

2. Backend Setup (FastAPI)

Go to the backend directory:

cd backend

Create a virtual environment:

python -m venv venv

Activate the virtual environment:

Windows

venv\Scripts\activate

macOS / Linux

source venv/bin/activate

Install dependencies:

pip install -r requirements.txt

---

3. Configure Environment Variables

Create a .env file inside the backend/ folder:

DATABASE_URL=postgresql://postgres:password@localhost:5432/plugin_dashboard

Update the values based on your local setup.

---

4. Database Schema

The backend uses SQLAlchemy models.

Main tables:

• websites → stores registered WordPress sites and telemetry data
• api_keys → authentication keys for plugin communication
• licenses → license management per website
• website_logs → event logging for debugging and monitoring

---

5. Start the Backend Server

Run FastAPI locally:

uvicorn app.main:app --reload

Backend will run at:

http://127.0.0.1:8000

Swagger Docs:

http://127.0.0.1:8000/docs

---

6. Frontend Setup (React)

Open a new terminal and go to the frontend directory:

cd frontend

Install dependencies:

npm install

Start the React development server:

npm run dev

Frontend will run at:

http://localhost:5173

---

7. Plugin Integration

Configure the plugin to use your local backend API:

http://127.0.0.1:8000

The plugin should send:

• Domain
• Plugin version
• License key
• API key

through HTTPS/REST requests.

---

8. Activate the WordPress Plugin

Navigate to the Admin Dashboard through:

https://www.yoursite.com/wp-admin

Go to:

Plugins > Installed Plugins

Find the plugin and press Activate:

Test Dashboard Plugin 
[Activate]

---

Project Structure

project-root/
│
├── backend/                          # FastAPI backend
├── frontend/                         # React dashboard
├── dashboard-test-plugin.php         # WordPress plugin
└── README.md

---

Development Notes

• Backend uses FastAPI + SQLAlchemy
• Frontend uses React + Vite
• PostgreSQL is required for persistence
• API documentation available through Swagger UI
• Environment variables should never be committed to Git

---

Common Commands

Backend

uvicorn app.main:app --reload

Frontend

npm run dev