How sh-mustak/analyticsdashboard works
1. Project shape
- This is a Next.js App Router application built as a dashboard UI rather than a generic website.
- The repo is organized around one main screen with supporting API, state, and visualization layers.
2. Top-level app entry
- app/page.tsx is the primary page entry for the dashboard experience.
- app/layout.tsx provides the shared app shell and global providers/styles, while app/globals.css defines application-wide styling.
3. UI shell / navigation boundary
- components/layout/Header.tsx and components/layout/Sidebar.tsx form the persistent shell around the dashboard content.
- This creates a clear boundary between global navigation/chrome and the actual dashboard data views.
4. Dashboard composition
- The components/Dashboard folder contains the main business UI: KPI summary, filter bar, active customer view, chart section, and bottom section.
- KpiOverview.tsx, kpiCard.tsx, Filterbar.tsx, ActiveCustomer.tsx, DashboardChartsSection.tsx, and DashboardBottomSection.tsx suggest the page is assembled from multiple focused dashboard panels rather than one monolith.
5. Visualization subsystem
- components/Charts/* contains the chart-specific presentation layer:
- OrdersBarChart.tsx
- RevenueLineChart.tsx
- UserPieChart.tsx
- These components isolate chart rendering from the dashboard layout so the page can swap or reuse visualizations independently.
6. Chart configuration / adaptation layer
- lib/Chart.ts likely holds shared chart configuration, data shaping, or utility logic used by multiple chart components.
- This is the main boundary between raw dashboard data and chart-ready data structures.
7. Data fetching boundary
- app/api/dashboard/route.ts defines a server-side API endpoint for dashboard data.
- The frontend appears to consume dashboard data through this route rather than talking directly to an external service from UI components.
8. Client-side state orchestration
- store/dashboardStore.ts centralizes dashboard state such as filters, selected view, and fetched data.
- This store is the coordination point between the filter UI, KPI panels, and chart components, so the dashboard can react to user-driven changes consistently.
9. HTTP/client integration
- lib/axios.ts suggests a shared Axios client or HTTP wrapper used for API calls.
- This provides a reusable network layer between the dashboard store and the API endpoint, keeping request logic out of the components.
10. Typed data contract
- types/dashboard.ts defines the shape of the dashboard domain data.
- This is an important architecture boundary because it keeps the API response, store state, and chart props aligned.
11. Loading/placeholder UX
- components/skeletons/KpiCardSkeleton.tsx indicates the UI supports loading states, at least for KPI cards.
- That implies asynchronous data flow from the dashboard API into the store and then into the rendered components.
12. Overall data flow
- User opens the dashboard page → layout shell renders → dashboard store loads/updates data via the dashboard API → filter interactions update store state → KPI, active customer, and chart components re-render from shared typed state.
- In architecture terms, the key boundaries are: UI shell, dashboard state, API route, data typing, and chart rendering.
13. Technology/runtime context
- The stack is React + TypeScript + Next.js, with App Router and server route handlers.
- The README indicates standard Next.js development/deployment flow, likely with Vercel as the intended hosting platform.
Main entry points: dashboardStore.ts Dashboard Store · page.tsx Dashboard Page · DashboardChartsSection.tsx Charts Section · layout.tsx App Layout
Components 20
App Shell
Next.js app router entry, shared layout, and global styles.
- Dashboard Page · Main dashboard screen rendered by the App Router.
app/page.tsx - App Layout · Shared app shell and providers around the dashboard.
app/layout.tsx - Global Styles · Application-wide styling rules.
app/globals.css
Dashboard UI
Primary dashboard composition and persistent chrome.
- Header · Top-level dashboard navigation and page chrome.
components/layout/Header.tsx - Sidebar · Persistent side navigation boundary.
components/layout/Sidebar.tsx - KPI Overview · Summary section for key metrics.
components/Dashboard/KpiOverview.tsx - KPI Card · Reusable metric card used by the KPI summary.
components/Dashboard/kpiCard.tsx - Filter Bar · Dashboard filters and view controls.
components/Dashboard/Filterbar.tsx - Active Customer · Focused customer activity view.
components/Dashboard/ActiveCustomer.tsx - Charts Section · Container for the dashboard visualization panels.
components/Dashboard/DashboardChartsSection.tsx - Bottom Section · Lower dashboard content area.
components/Dashboard/DashboardBottomSection.tsx - KPI Skeleton · Placeholder UI for async KPI loading.
components/skeletons/KpiCardSkeleton.tsx
Charts
Chart presentation components and shared chart adaptation logic.
- Orders Chart · Orders visualization rendered as a bar chart.
components/Charts/OrdersBarChart.tsx - Revenue Chart · Revenue trend visualization.
components/Charts/RevenueLineChart.tsx - Users Chart · User distribution visualization.
components/Charts/UserPieChart.tsx - Chart Logic · Shared chart configuration and data shaping.
lib/Chart.ts
Data Layer
API, store, HTTP client, and typed contracts for dashboard data.
- Dashboard API · Server-side endpoint for dashboard data.
app/api/dashboard/route.ts - Dashboard Store · Central client-side state for filters and fetched dashboard data.
store/dashboardStore.ts - HTTP Client · Shared client for dashboard requests.
lib/axios.ts - Dashboard Types · Typed contract for dashboard data and state.
types/dashboard.ts
Connections 26
- App Layout → Dashboard Page: renders · The shared app shell contains the dashboard page.
- App Layout → Header: includes · Layout provides the global header.
- App Layout → Sidebar: includes · Layout provides the global sidebar.
- App Layout → Global Styles: applies · Layout is styled by the global CSS base.
- Dashboard Page → KPI Overview: composes · The main page assembles the KPI summary.
- Dashboard Page → Filter Bar: composes · The main page includes dashboard filtering controls.
- Dashboard Page → Active Customer: composes · The main page includes the active customer panel.
- Dashboard Page → Charts Section: composes · The main page includes the charts section.
- Dashboard Page → Bottom Section: composes · The main page includes the lower dashboard section.
- KPI Overview → KPI Card: uses · KPI overview is built from reusable metric cards.
- KPI Overview → KPI Skeleton: loads · KPI summary supports a loading placeholder.
- Charts Section → Orders Chart: shows · Charts section renders the orders chart.
- Charts Section → Revenue Chart: shows · Charts section renders the revenue chart.
- Charts Section → Users Chart: shows · Charts section renders the user chart.
- Orders Chart → Chart Logic: adapts · Bar chart uses shared chart configuration and shaping.
- Revenue Chart → Chart Logic: adapts · Line chart uses shared chart configuration and shaping.
- Users Chart → Chart Logic: adapts · Pie chart uses shared chart configuration and shaping.
- Dashboard Store → Dashboard API: fetches · Store coordinates loading dashboard data from the API route.
- Dashboard Store → HTTP Client: requests · Store uses a shared HTTP client for network calls.
- Dashboard Store → Dashboard Types: types · Store state follows the shared dashboard contract.
- Dashboard API → Dashboard Types: returns · API responses are shaped by the dashboard types.
- Filter Bar → Dashboard Store: updates · Filter interactions update central dashboard state.
- KPI Overview → Dashboard Store: reads · KPI values are driven from store state.
- Active Customer → Dashboard Store: reads · Active customer panel reflects store state.
- Charts Section → Dashboard Store: reads · Charts render from shared dashboard state.
- Bottom Section → Dashboard Store: reads · Lower dashboard content is driven by store state.