Day 1: Streamlit Basics — Your First Dashboard in 20 Minutes

What You'll Build Today

A sales KPI dashboard with a title, key metrics (total revenue, order count, average order value), a data table, and a download button. All from a single Python file, running in your browser.

Setup

Installing Streamlit

bash

pip install streamlit pandas plotly

Create a file called dashboard.py. To run it:

bash

streamlit run dashboard.py

Your browser opens automatically at localhost:8501. Every time you save the file, Streamlit reloads.

The Streamlit model: Every time a user interacts with your dashboard, Streamlit reruns your entire Python script from top to bottom. This is how reactivity works. Outputs re-render with new values automatically.

Core Widgets

The essential Streamlit components

pythondashboard.py

import streamlit as st
import pandas as pd

# Title and header
st.title("Sales Dashboard 2024")
st.header("Q4 Performance")
st.subheader("Regional Breakdown")

# Text and markdown
st.write("Sales are up 23% this quarter.")
st.markdown("**Bold text** and *italics* work here.")

# Metric cards — the staple of any KPI dashboard
col1, col2, col3 = st.columns(3)
col1.metric("Total Revenue", "$842K", "+12%")
col2.metric("Orders", "3,241", "+8%")
col3.metric("Avg Order Value", "$260", "+4%")

DataFrames

Displaying data tables

python

df = pd.read_csv("sales.csv")

# st.dataframe — interactive, sortable, filterable
st.dataframe(df, use_container_width=True)

# st.table — static, non-interactive
st.table(df.head(10))

# Download button — let users export data
csv = df.to_csv(index=False).encode("utf-8")
st.download_button(
    label="Download CSV",
    data=csv,
    file_name="sales_export.csv",
    mime="text/csv"
)

Layout

Columns, expanders, and page config

pythondashboard.py — full starter

import streamlit as st
import pandas as pd
import numpy as np

# Configure page — call this first
st.set_page_config(
    page_title="Sales Dashboard",
    page_icon="📊",
    layout="wide"
)

# Synthetic data (replace with read_csv in real project)
np.random.seed(42)
df = pd.DataFrame({
    "date": pd.date_range("2024-01-01", periods=365),
    "revenue": np.random.randint(1000, 15000, 365),
    "region": np.random.choice(["West", "East", "South"], 365),
    "orders": np.random.randint(5, 50, 365),
})

st.title("Sales Dashboard 2024")

# KPI row
col1, col2, col3 = st.columns(3)
col1.metric("Total Revenue", f"${df['revenue'].sum():,.0f}")
col2.metric("Total Orders", f"{df['orders'].sum():,}")
col3.metric("Avg Daily Revenue", f"${df['revenue'].mean():,.0f}")

st.divider()
st.dataframe(df.head(20), use_container_width=True)

Run it: Save this as dashboard.py and run streamlit run dashboard.py. You'll have a working dashboard in your browser. Tomorrow we add real charts.

What You Learned Today

How Streamlit's re-run model works
Title, header, markdown, and st.write() for text
st.metric() for KPI cards
st.columns() for side-by-side layout
st.dataframe() and st.download_button()
st.set_page_config() for wide layout and page title

Course Progress

Day 1 of 5 — 20%

Day 1 Complete

Day 2: Charts and Visualizations

Tomorrow you'll add interactive Plotly charts — line charts, bar charts, scatter plots.

Start Day 2

← Course Overview Join the Bootcamp