skills.rest
FeexSystems
FeexSystemsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

building-data-apps

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

1|Updated Aug 30, 2026
Search Tags:#data visualization#react#dashboard#gemini#streamlit#chat#bigquery
One-click install
npx skills add https://github.com/FeexSystems/3WM-SONIK-LABS --skill building-data-apps-feexsystems
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-data-apps
Source: https://github.com/FeexSystems/3WM-SONIK-LABS/tree/main/.gemini/skills/building-data-apps
Command: npx skills add https://github.com/FeexSystems/3WM-SONIK-LABS --skill building-data-apps-feexsystems

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google-cloud/geminidataanalytics, @google-cloud/bigquery, express, cors, dotenv, fastapi, pydantic, streamlit, plotly, pandas, numpy, echarts, echarts-for-react, axios, date-fns, lucide-react, react-markdown, remark-gfm, 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 data sources correctly. This Skill guides the creation of dashboards and interactive reports that query and visualize data from GCP sources like BigQuery, with an optional Gemini Data Analytics chat interface for natural language queries. ## Core Features & Use Cases - Framework Selection: Chooses between React + Vite (for complex, production-grade UIs) and Streamlit (for Python-centric, single-script deployments) based on the user's stack and requirements. - Unified Design System: Enforces a zinc-based card layout, DM Sans and JetBrains Mono typography, dark/light theming, and standardized components like KPI cards, data tables, and ECharts visualizations. - Gemini Chat Integration: Adds a streaming "chat with your data" panel using Server-Sent Events, with separated thought and final-response streams, multi-turn history, and follow-up suggestions. - Use Case: A fraud analyst needs a dashboard over a BigQuery transactions table with KPI cards, a filterable data table, and a chat panel to ask questions in natural language. ## Quick Start Build a React dashboard that visualizes data from my BigQuery table and includes a Gemini-powered chat interface for natural language queries.

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 production-grade interactive UIs or Streamlit for Python-based single-script apps, then connect to BigQuery as the data source. Follow the framework-specific reference guides for KPI cards, data tables, and chart components.

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

Use Streamlit if you are a Python user needing heavy Pandas or NumPy processing and single-file deployment. Use React with Vite for complex client-side state, custom branding, drag-and-drop interactions, or integration into a larger web ecosystem.

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

Integrate the Gemini Data Analytics chat API with a FastAPI or Express backend that streams responses via Server-Sent Events. The React frontend must separate thought messages from final responses, maintain conversation history, and render markdown with react-markdown.

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 apps that query and visualize data from GCP sources like BigQuery.

Related Skills

Explore More Data & Analytics Skills→
awsaws
2.5k

ingesting-into-data-lake

Import data from S3, JDBC databases, Snowflake, BigQuery, and DynamoDB into AWS data lake tables.

Official
Advanced
mattstyles333mattstyles333

PostHog Analytics Skill

Query and analyze PostHog analytics data via its REST API.

Community
Intermediate
JaviMontanoJaviMontano

metodologia-data-quality

Design a data quality framework for profiling, validation, anomaly detection, contracts, and SLA monitoring.

Community
Advanced
akillnessakillness
40

looker-studio-bigquery

Connect Looker Studio to BigQuery for analytics dashboards.

Community
Advanced