Frontend Dashboard Example
This example is useful when the repo you are describing is a web application with operator-facing screens, route-level entrypoints, and backend API dependencies. It shows how the integrations model adapts to frontend work without losing the same REPO_FACTS.json structure used by service and SDK repos.
Why this profile is a good starting point
- It emphasizes routes, components, and UI integration points instead of binaries or library exports.
- It captures the browser-facing dependency graph that matters for dashboard work: framework, UI kit, data fetching, and backend APIs.
- It demonstrates that the same generator model can express frontend constraints and safe edit zones without creating a frontend-only schema.
Profile at a glance
- Repo: Lumio Admin Dashboard
- Repo path:
{profile.facts.repo.path} - Repo kind:
{profile.facts.repo.kind} - Language:
{profile.facts.repo.language} - Draft status:
{profile.facts.meta.draftStatus} - Summary: Next.js admin dashboard for Lumio workflows, analytics, and document management.
Provenance
- Source repo path:
{profile.provenance.sourceRepoPath} - Snapshot date:
{profile.provenance.snapshotDate} - Owner or steward:
{profile.provenance.ownerOrSteward} - Provenance note: Derived from the repo README and package metadata present in the repo snapshot.
What the facts emphasize
App entry points and UI structure
The entry points guide a reader toward routes, layout, and reusable UI code:
src/app/page.tsxsrc/app/layout.tsxpackage.jsonsrc/appsrc/componentssrc/libCommands, dependencies, and operator-facing behavior
The command set stays aligned with a Next.js application workflow:
- Setup:
{profile.facts.commands.setup.join(" | ")} - Dev:
{profile.facts.commands.dev.join(" | ")} - Test:
{profile.facts.commands.test.join(" | ")} - Build:
{profile.facts.commands.build.join(" | ")}
The integration surface highlights what a dashboard depends on and what it produces:
- Inputs: FastAPI backend APIs, environment variables
- Outputs: Admin UI flows, workflow editing and monitoring screens
- Dependencies: Next.js, React, Ant Design, TanStack Query
Safe edit zones and risky areas
Frontend repos often look easy to change until a contract or workflow breaks. The example keeps that nuance visible:
README.md (Project README)Generated artifact preview
The rendered pack below proves that the shared generator is not only for backend repos. The same artifact set can carry enough frontend context to orient an engineer or agent before they edit routes, components, or API integration code.