Browser-Based API Tester

Relevant source files - public/index.html - public/test.html - routes/test.routes.js - test-email.js

The Browser-Based API Tester is a specialized diagnostic and development interface located at public/test.html. It provides a graphical frontend for interacting with the Subscription Tracker API, allowing developers to bypass external tools like Postman for common workflows such as user authentication, subscription creation, and manual email triggering.

Interface Overview

The tester is designed as a split-pane dashboard. The left pane contains input forms for API interaction, while the right pane serves as a real-time terminal log for inspecting request payloads and server responses public/test.html17-20

Layout Components

Component	File Reference	Description
Authentication Panel	public/test.html94-157	Handles Sign Up and Sign In to capture JWTs.
Subscription Form	public/test.html178-228	Comprehensive form for creating new subscriptions.
Manual Trigger	public/test.html160-175	Button to trigger immediate email reminders.
Terminal Log	public/test.html66-75	A monospace, auto-scrolling log for debugging.

Sources: public/test.html7-83 public/test.html86-175

Authentication Flow and Token Capture

The API Tester manages a local state for the Bearer token. When a user successfully registers or logs in, the script extracts the token from the JSON response and stores it in a variable for subsequent requests public/test.html155

Logic Flow: Auth to Token Storage

The following diagram illustrates how the signupForm and loginForm interact with the backend to establish an authenticated session within the tester.

Tester Authentication Logic

sequenceDiagram
    participant UI as "public/test.html (DOM)"
    participant Script as "Tester Script (JS)"
    participant AuthAPI as "/api/v1/auth/sign-in"
    UI->>Script: Submit loginForm [siEmail, siPass]
    Script->>AuthAPI: fetch(POST, body: credentials)
    AuthAPI-->>Script: Response { success: true, token: "JWT_STR", data: { user } }
    Note over Script: Update global 'token' variable
    Script->>UI: Update
    Script->>UI: Enable

Sources: public/test.html127-157 public/test.html228-233

Subscription Creation and Workflow Confirmation

The subscription form includes all fields required by the Subscription model, including frequency, category, and start date public/test.html184-227

Workflow Integration

When a subscription is created via the tester, the backend returns a workflowRunId. The tester displays this ID in the log, confirming that the Upstash Workflow has been successfully triggered to schedule future email reminders.

Subscription Data Flow

[Flowchart Diagram]

Sources: public/test.html184-233 routes/test.routes.js51 public/test.html66-75

Manual Email Triggering

A unique feature of the API Tester is the Send Test Email section. This allows developers to verify the email pipeline (SMTP settings and templates) without waiting for the scheduled workflow intervals public/test.html161-175

Implementation Details

Endpoint: POST /api/v1/test/send-reminder-emailroutes/test.routes.js51
Authorization: Requires a valid Bearer token routes/test.routes.js9
Payload: Requires a subscriptionIdroutes/test.routes.js10
Controller: Executes sendTestReminder which bypasses the QStash sleep cycle to invoke the mailer immediately routes/test.routes.js3

Terminal Logging Mechanism

The tester uses a custom log() function to append formatted JSON strings to the #log element. This provides immediate feedback on whether the SMTP server (Brevo) accepted the message public/test.html66-75

Sources: public/test.html160-175 routes/test.routes.js7-51 test-email.js27-36