skills.rest
led8
led8COMMUNITY
Explore all skills by this author →
GitHub

fullstack-dashboard

Generate analytics dashboards with Next.js frontend and FastAPI backend.

Updated Aug 27, 2026
Search Tags:#typescript#charts#fastapi#openapi#dashboard#nextjs
One-click install
npx skills add https://github.com/led8/.codex --skill fullstack-dashboard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fullstack-dashboard
Source: https://github.com/led8/.codex/tree/main/skills/fullstack-dashboard
Command: npx skills add https://github.com/led8/.codex --skill fullstack-dashboard

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Generate production-ready analytics dashboards by pairing a Next.js App Router frontend with a FastAPI backend, streamlining data-heavy UIs, charts, and API contracts.

Core Features & Use Cases

  • End-to-end dashboards with KPI cards, sortable/paginated tables, and charts using ECharts, Tremor, and shadcn/ui.
  • Strong typing and OpenAPI-based contracts to keep frontend and backend in sync.
  • Server Components SSR with streaming and clean separation of data endpoints for KPI, charts, and tables.

Quick Start

Bootstraps a Next.js + FastAPI project and wires it to the OpenAPI schemas described in the references to produce a runnable analytics dashboard.

Frequently Asked Questions about fullstack-dashboard

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a full-stack analytics dashboard with Next.js and FastAPI?▼

Build full-stack analytics dashboards by pairing a Next.js App Router frontend with a FastAPI backend, using server-side rendering for data loading and streaming. This approach provides KPI cards, sortable tables, and real-time charts across admin or operations use cases.

How do I keep TypeScript types in sync between a Next.js frontend and FastAPI backend?▼

Keep frontend and backend in sync by using OpenAPI-based contracts to generate typed API contracts. This maintains a clear frontend-backend boundary and ensures strong typing across separate KPI, chart, and table endpoints.

Can I use ECharts and Tremor together in a Next.js dashboard for data visualization?▼

Yes, you can use ECharts, Tremor, and shadcn/ui together in a Next.js dashboard to render production-grade data-heavy UIs. They support real-time charts and sortable, paginated tables for analytics.

What is the best way to structure endpoints for a data-heavy analytics dashboard?▼

Structure analytics dashboard endpoints by cleanly separating data loading for KPIs, charts, and tables into distinct endpoints. This ensures efficient server-side data loading via Next.js Server Components with streaming.

Do I need OpenAPI schemas to generate a Next.js and FastAPI dashboard?▼

Yes, OpenAPI schemas are required to generate typed API contracts and wire the Next.js frontend to the FastAPI backend. Bootstrapping the project references these schemas to produce a runnable analytics dashboard.

Are Next.js Server Components with streaming suitable for real-time chart dashboards?▼

Next.js Server Components with streaming are suitable for real-time chart dashboards, applying to data-heavy tables and KPI cards. This setup handles server-side data loading efficiently for production-grade operations use cases.

Related Skills

Explore More Software Engineering Skills→
databricks-solutionsdatabricks-solutions
1.8k

databricks-app-apx

Builds full-stack Databricks applications with FastAPI backend and React frontend.

Official
Advanced
adelabdelgawadadelabdelgawad

api-integration

Proxy Next.js API routes to FastAPI with cookie forwarding and typed clients.

Community
Advanced
kaiomaced0kaiomaced0

kiranism-shadcn-dashboard

Create Next.js 16 dashboards with shadcn/ui features, tables, forms, and navigation.

Community
Advanced
apakouapakou

supabase-nextjs

Integrate Supabase with Next.js for SSR authentication and realtime channels.

Community
Intermediate