devloperdevesh / devloperdevesh/FaultPlane

[Feat/UI]: Scaffold Next.js and Tailwind CSS Operations Dashboard Boilerplate Setup

Open
#38 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement good first issue help wanted
Dominant language
Go
Stars
2
Forks
1
Avg merge
14m
Merged PRs (30d)
57

Description

Problem

Currently, the core FaultPlane engine functions at the transport boundary layer, tracking connections and saving checkpoint state bit arrays natively. While our operational dashboard prototype layout runs standalone data mappings efficiently, we lack a clean, modular, and un-coupled Next.js application structure inside the source repository to let frontend contributors build out isolated terminal UI components without exposing or interfering with low-overhead backend networking Go parameters.


Proposed Solution

Scaffold a high-performance, minimalist Next.js operations boilerplate application inside an isolated /dashboard directory.

  • Initialize a fresh Next.js application template engineered with complete TypeScript configuration tracks.
  • Configure Tailwind CSS natively to provide microsecond styling and utility class parsing.
  • Build a lightweight structural layout defining three independent, low-overhead interface frames:
    1. Sidebar Navigation Component: Modular layout containing links for Core Metrics, Workers Pool, and Network Ingress logs.
    2. Topbar/Navbar Header Component: Compact status frame displaying circuitbreaker states (Circuit: CLOSED) and regional sandbox parameters.
    3. Main Dashboard Panel Grid: Responsive canvas area prepared to hold asynchronous statistics charts, resource tracking blocks, and real-time streaming telemetry logging feeds.
  • Ensure the clean application structure runs and builds perfectly (npm run build) without dependency errors.

Alternatives

  • Packaging a monolithic microservice frontend repository with complex external state managers, which introduces heavy framework overhead and configuration delays for open-source contributors.

Use Case

Provides open-source frontend systems engineers with a secure, production-grade sandbox directory to build responsive visualization widgets, allowing full developer onboarding velocity while keeping our backend Layer 4 proxy data routes protected.


Additional Notes

This layout must remain modular and strictly un-coupled from active network routing daemons. Please follow our contributing guidelines. Drop a comment below to get assigned!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the repository root and create the isolated /dashboard application described in the issue. Define the sidebar, topbar, and responsive main dashboard panel structure with Next.js, TypeScript, and Tailwind CSS, keeping it separate from the Go networking code. Done means the dashboard structure is present and npm run build completes without dependency errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js, tailwindcss, typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.