skills.rest
1919114514yasenpai-maker
1919114514yasenpai-makerCOMMUNITY
Explore all skills by this author →
GitHub

building-data-apps

Build data dashboards and interactive reports with React, Vite, or Streamlit connected to BigQuery.

Updated Aug 16, 2026
Search Tags:#data visualization#react#dashboard#gemini#streamlit#chat#bigquery
One-click install
npx skills add https://github.com/1919114514yasenpai-maker/focus-quest --skill building-data-apps-1919114514yasenpai-maker
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-data-apps
Source: https://github.com/1919114514yasenpai-maker/focus-quest/tree/main/.gemini/skills/building-data-apps
Command: npx skills add https://github.com/1919114514yasenpai-maker/focus-quest --skill building-data-apps-1919114514yasenpai-maker

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires express, cors, @google-cloud/geminidataanalytics, @google-cloud/bigquery, dotenv, fastapi, pydantic, and includes references (resource) components.

What problem does it solve? Building data-centric web applications requires choosing the right framework, applying consistent design standards, and wiring up complex features like streaming AI chat, which is time-consuming to do from scratch. ## Core Features & Use Cases - Framework Selection Guidance: Chooses between React + Vite (for web developers needing custom interactivity) and Streamlit (for Python data scientists) based on the user's stack and requirements. - Unified Design System: Enforces a zinc-palette, card-based, dark/light mode design system with DM Sans and JetBrains Mono typography across both frameworks. - Gemini Data Analytics Chat Integration: Provides reference implementations for a streaming "chat with your data" interface using Server-Sent Events, with separate thought and final-response rendering, multi-turn history, and follow-up suggestions. - Use Case: A fraud analyst needs a dashboard over BigQuery transaction data with KPI cards, a filterable table, and a natural-language chat panel; this Skill scaffolds the React frontend, FastAPI streaming backend, and styling. ## Quick Start Build a data dashboard app that visualizes my BigQuery sales table and includes a Gemini-powered chat interface for asking questions about the data.

Frequently Asked Questions about building-data-apps

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

FAQPage Schema
How do I build a data dashboard connected to BigQuery?▼

Choose React with Vite for custom interactive UIs or Streamlit for Python-centric workflows, then query BigQuery from a backend API and render results in KPI cards, tables, and charts. This Skill provides design standards and component patterns for both frameworks.

Should I use Streamlit or React for a data dashboard?▼

Use Streamlit when you are a Python data scientist needing single-script deployment and heavy Pandas processing. Use React with Vite when you need complex client-side state, custom branding, drag-and-drop, or integration into a larger web ecosystem.

How do I add a chat with your data feature to a web app?▼

Use the Gemini Data Analytics chat API with a streaming backend in FastAPI or Express that emits Server-Sent Events. The frontend buffers the stream, separates thought messages from final responses, renders markdown, and maintains conversation history for follow-up questions.

Why does the Gemini Data Analytics API return a 400 REFERENCES_NOT_SET error?▼

This error occurs when datasource_references is missing from inline_context in the chat request. The API requires at least one BigQuery table reference, and BigLake or Iceberg tables are not supported.

When should I not use this dashboard-building approach?▼

Do not use it for backend-only services, simple CLI scripts, or web applications that are not data-centric. It is designed specifically for frontends that query and visualize data from GCP sources like BigQuery.

Related Skills

Explore More Data & Analytics Skills→
AubreyHanAubreyHan

building-data-apps

Build data dashboards and interactive reports from BigQuery sources.

Community
Advanced
starlake-aistarlake-ai
209

extract-bq-schema

Extract BigQuery schemas from Google Cloud projects using CLI options.

Official
Intermediate
HTTPArchiveHTTPArchive
7

optimize-storage-costs

Identify and remove dead-end and unused BigQuery tables using Masthead Data lineage analysis.

Official
Advanced
scumunnascumunna
1

marketing-analytics-warehouse-and-dashboards

Design and implement a BigQuery marketing analytics warehouse with Looker Studio dashboards.

Community
Advanced