This is a NextJS starter in Firebase Studio.
To get started, take a look at src/app/page.tsx.
Here is a breakdown of the key files and directories in this project:
next.config.ts: Configuration file for Next.js. It includes settings for image optimization and build process adjustments.tailwind.config.ts: Configuration for the Tailwind CSS framework, where you define the design system (e.g., colors, fonts, spacing).package.json: Lists all project dependencies (like React, Next.js, Genkit) and defines scripts for running, building, and testing the application (e.g.,npm run dev).components.json: Configuration file forshadcn/ui, defining paths and settings for the UI components.tsconfig.json: TypeScript configuration file, which sets the rules for how TypeScript code is compiled into JavaScript.
This is where the main source code for the application resides.
This directory uses the Next.js App Router for routing, pages, and layouts.
page.tsx: The main entry point for the dashboard UI. This is the primary component rendered for the root URL (/).layout.tsx: The root layout for the application. It wraps all pages and is used to include global elements like fonts, stylesheets, and the main<body>tag.globals.css: The global stylesheet. It defines the base styles for the application, including CSS variables for theming (e.g.,--background,--primary) and Tailwind CSS directives.actions.ts: Contains Server Actions. These are server-side functions that can be called directly from client-side components, used for handling form submissions and data mutations securely without needing to create separate API endpoints (e.g.,downloadReportAction,searchAction).
This folder contains all the reusable React components.
dashboard/: Contains the high-level widgets that make up the main dashboard grid, such asTimeSeriesChart.tsx,ChoroplethMap.tsx, andRiskHeatmap.tsx.filters/: Holds the components used for data filtering in the sidebar, likeLocationFilter.tsxandDateRangeFilter.tsx.layout/: Structural components that define the overall layout of the app, includingHeader.tsx,AppSidebar.tsx, andHelpDrawer.tsx.ui/: Base UI components fromshadcn/ui, such asButton.tsx,Card.tsx, andInput.tsx. These are the fundamental building blocks for the UI.
A central place for shared code, data, type definitions, and utilities.
data.ts: The source of mock data for the application's visualizations (e.g., time-series data, risk scores). In a production app, this would be replaced by API calls to a live database.locations.ts: Contains the hierarchical location data (divisions, districts, etc.) used by the location filter.types.ts: Defines all the core TypeScript types used across the application (e.g.,Location,Disease,TimeSeriesDataPoint), ensuring data consistency.utils.ts: Contains utility functions, most notably thecnfunction for conditionally combining Tailwind CSS class names.weather.ts: Includes the server-side logic for fetching live weather data from the OpenWeatherMap API.
This directory holds all the Generative AI logic, powered by Genkit.
genkit.ts: Initializes and configures the core Genkit instance, including setting up the model provider (e.g., Google AI).flows/: Contains the AI workflows (flows). Each file defines a specific multi-step AI task.data-qa.ts: Powers the natural language search bar, answering questions based on the provided data context.generate-report-from-prompt.ts: Handles the logic for generating downloadable reports based on user prompts and filters.data-insights-from-prompt.ts: An AI agent for generating insights from data.