Frontend & Configuration Layer

The user-facing dashboard is built gracefully with Next.js (App Router), React 19, and Tailwind CSS 4.0. It serves as the visual representation of your proxy configurations, allowing your entire team to manage domains securely and fast.

Backend Database Layer

Instead of writing state to files, the Dashboard acts autonomously, pushing all administrative state changes to the MongoDB Database. It connects natively using Mongoose schemas representing the core business logic.

State Management: Handled dynamically via Server Actions to omit excessive Client API loading.
Data Validation: Strict Zod formatting happens inside Next.js prior to database mutations to ensure the Edge nodes only receive sanitized configs.

Example Configuration Sync

Using Next.js Server actions, saving the actual config looks like this natively:

// Example Server Action saving a proxy configuration from the UI
import dbConnect from "@/lib/mongoose";
import MongooseProxy from "@/models/ProxyConfig";

export async function saveProxyConfig(config: ProxyConfig) {
  try {
    await dbConnect();
    
    // Automatically creates a MongoDB Change Event
    // The Control Plane listens closely to this mutation
    const result = await MongooseProxy.create(config);
    
    return { success: true, id: result._id };
  } catch (error) {
    return { success: false, error: "Failed to allocate routing" };
  }
}

Styling and Layout

The overall UI brings a modern look combining tools such as:

Tailwind v4 for low-latency styling.
shadcn/ui providing accessible and deeply customizable primitive structural components.
Framer Motion managing complex layout transitions to maintain native feeling.
Complex backgrounds driven functionally to provide a cohesive frosted-glass aesthetic globally.

Netgoat Headers

When Netgoat proxies requests to your upstream services (like your frontend, backend API, or SSR server), it injects specific operational HTTP headers. These help you debug, trace, and identify traffic flowing through the edge.

`x-netgoat-tracelet-id`

The Tracelet ID is a highly unique, cryptographically secure identifier generated by the Edge Proxy Native Engine for every single incoming request before it ever reaches your application.

Why is it useful?

Distributed Tracing: You can log this ID in your frontend or backend monitoring tools (like Datadog, Sentry, or generic structured logs). If a user reports an error, you can find the exact request path through the WAF, the edge proxy, and your server by searching for this single ID.
Support Requests: Expose this tracelet ID in your UI's error boundary so users can copy-paste it to your support team!

`x-netgoat-connecting-ip`

Contains the actual, original IP address of the client making the request. Because traffic routes through Netgoat's reverse proxy, your application's native request.ip will likely show the Netgoat Edge Node's IP. Use this header instead to perform geo-blocking, rate-limiting, or user analytics on your frontend.

NetGoat