2-Hour Streamlit Workshop

Whether you’re learning Streamlit or demonstrating its simplicity to others, this workshop provides a hands-on introduction you can deliver. Feel free to use it.

Streamlit Workshop Curriculum & Materials

• Workshop Title: Get Started with Interactive Web Apps: A 2-Hour Streamlit Workshop
• Target Audience: Beginners with a basic understanding of Python. No web development experience is required.
• Learning Objectives:
  • Install and run a Streamlit application.
  • Understand the core components of a Streamlit app.
  • Use Streamlit functions to display text, data, and visualizations.
  • Incorporate interactive widgets for user input.
  • Build and deploy a simple, interactive data exploration application.

Workshop Timeline Overview

Presenter Tip: Build in natural 5-10 minute breaks during longer sections

Troubleshooting Guide

Common Setup Issues

• Codespaces not loading: Share backup environment or switch to local setup
• Port forwarding problems: Use VS Code “Ports” tab to manually forward port 8501
• Package installation fails: Check Python version, try pip install --upgrade pip

Runtime Problems

• App won’t start: Check for syntax errors, missing imports
• Widgets not working: Ensure proper indentation, check for typos
• Charts not displaying: Verify matplotlib backend, try st.pyplot(fig, clear_figure=True)

Presenter Notes

• Keep energy high - Streamlit is exciting, let that show!
• Code along approach - Don’t just lecture, have everyone build together
• Celebrate small wins - Each working app is an achievement
• Time management - Use “parking lot” for advanced questions
• Have backups ready - Pre-built apps, sample code, screenshots

Part 1: Introduction & Quick Start (20 minutes)

1.1: Welcome and Introduction (5 mins)

(Presenter’s Talking Points)

• “Welcome everyone! In the next two hours, we’re going to learn how to build and share interactive web applications entirely in Python using a fantastic library called Streamlit.”
• “Have you ever done a data analysis in a Jupyter Notebook and wished you could easily turn it into a user-friendly tool for others to use? That’s the problem Streamlit solves.”
• “Streamlit is an open-source Python library that lets you create web apps for data science and machine learning projects with incredible speed. You don’t need to know any HTML, CSS, or JavaScript. If you can write a Python script, you can build a Streamlit app.”
• “By the end of this session, you will have built your own interactive data dashboard and will know how to share it with the world.”

1.2: Environment Setup (10 mins)

We’ll use GitHub Codespaces for the best experience - it provides a complete development environment in your browser with automatic port forwarding.

Quick Setup Steps:

1. Create a New Repository:

   • Go to GitHub and click “New repository”
   • Name it streamlit-workshop
   • Make it public and check “Add a README file”

2. Add Requirements File:

   • Click “Create new file” in your repo
   • Name it requirements.txt
   • Add these dependencies:

     1
     streamlit
     2
     pandas
     3
     scikit-learn
     4
     matplotlib
     5
     seaborn

   • Click “Commit new file”

3. Launch Codespace:

   • Click the green <> Code button
   • Select “Codespaces” tab → “Create codespace on main”
   • Wait ~2 minutes for setup to complete

4. Install Dependencies:

   • In the terminal that opens, run:

     1
     pip install -r requirements.txt

5. Test Installation:

   • Run: streamlit hello
   • Click “Open in Browser” when the popup appears
   • You should see the Streamlit demo app!

Backup Plan (Local Setup): If Codespaces doesn’t work, quickly set up locally:

1
pip install streamlit pandas scikit-learn matplotlib seaborn
2
streamlit hello  # Test installation

Presenter Tip: Have a backup Codespace ready to share if students have issues.

1.3: “Hello, Streamlit!” - Your First App (5 mins)

Let’s build your first app in 60 seconds!

1. Create the file: In Codespaces, create step1_hello.py

2. Add this code:

   1
   import streamlit as st
   2
   
   3
   st.title('Hello, Streamlit! 👋')
   4
   st.write('Welcome to my first web app!')

3. Run it: In terminal: streamlit run step1_hello.py

4. See the magic: Click “Open in Browser” → You’ve built a web app! 🎉

Expected Output: A webpage with a title and welcome message

What just happened?

• st.title() creates a big heading
• st.write() displays text (and much more!)
• Streamlit automatically created a web interface from your Python code

Part 2: Streamlit Fundamentals (50 minutes)

2.1: Displaying Text and Data (15 mins)

Now let’s explore Streamlit’s text and data display capabilities.

Create a new file: step2_text_data.py

1
import streamlit as st
2
import pandas as pd
3

4
st.title('Streamlit Text & Data Demo')
5

6
# Text elements - try different types
7
st.header('Different Text Types')
8
st.write("st.write() can display almost anything!")
9
st.text("st.text() shows plain text")
10
st.markdown("st.markdown() supports **bold** and *italic*")
11
st.code("st.code('print(hello)')")
12

13
# Data display
14
st.header('Data Display')
15
data = {
16
    'Product': ['Apple', 'Banana', 'Cherry'],
17
    'Price': [1.50, 0.50, 3.00],
18
    'Stock': [100, 150, 50]
19
}
20
df = pd.DataFrame(data)
21

22
st.subheader('Interactive Table (st.dataframe)')
23
st.dataframe(df)  # Interactive - you can sort columns!
24

25
st.subheader('Static Table (st.table)')
26
st.table(df)      # Static display
27

28
# JSON/Dict display
29
st.subheader('Displaying JSON/Dictionary')
30
st.json({'status': 'success', 'items': 3, 'user': 'workshop_participant'})

Run it: streamlit run step2_text_data.py

Try This: Click on column headers in the dataframe to sort the data!

2.2: Interactive Widgets (20 mins)

This is where Streamlit becomes magical - interactive widgets that respond instantly to user input!

Create: step3_widgets.py

1
import streamlit as st
2

3
st.title('🎛️ Interactive Widgets Demo')
4

5
# Text input
6
st.header('User Input')
7
name = st.text_input('What is your name?', placeholder='Enter your name...')
8
if name:
9
    st.write(f'Hello, **{name}**! 👋')
10

11
# Number inputs
12
col1, col2 = st.columns(2)
13
with col1:
14
    age = st.slider('Your age', 0, 100, 25)
15
with col2:
16
    score = st.number_input('Test score', 0, 100, 85)
17

18
st.write(f'You are {age} years old with a score of {score}')
19

20
# Selection widgets
21
st.header('Make Choices')
22
color = st.selectbox('Favorite color', ['Red', 'Blue', 'Green', 'Yellow'])
23
hobbies = st.multiselect('Hobbies', ['Reading', 'Gaming', 'Sports', 'Music'])
24

25
# Show results
26
st.header('Your Profile')
27
st.json({
28
    'name': name,
29
    'age': age,
30
    'score': score,
31
    'color': color,
32
    'hobbies': hobbies
33
})
34

35
# Action button
36
if st.button('🎉 Celebrate!'):
37
    st.balloons()  # Fun animation!
38
    st.success('Congratulations on learning Streamlit!')

Run it: streamlit run step3_widgets.py

Key Insight: Notice how the app updates instantly as you interact with widgets - no “Submit” button needed!

2.3: Data Visualization (15 mins)

Streamlit makes creating charts as easy as calling a function!

Create: step4_charts.py

1
import streamlit as st
2
import pandas as pd
3
import numpy as np
4

5
st.title('📊 Data Visualization Demo')
6

7
# Generate sample data
8
np.random.seed(42)  # For consistent results
9
data = pd.DataFrame({
10
    'Day': range(1, 31),
11
    'Sales': np.random.randint(100, 1000, 30),
12
    'Visitors': np.random.randint(50, 500, 30),
13
    'Revenue': np.random.randint(500, 5000, 30)
14
})
15

16
# Simple built-in charts
17
st.header('Built-in Charts')
18

19
col1, col2 = st.columns(2)
20
with col1:
21
    st.subheader('Line Chart')
22
    st.line_chart(data.set_index('Day')[['Sales', 'Visitors']])
23

24
with col2:
25
    st.subheader('Bar Chart')
26
    st.bar_chart(data.set_index('Day')['Revenue'])
27

28
# Interactive chart selection
29
st.header('Interactive Chart Builder')
30
chart_type = st.radio('Choose chart type:', ['Line', 'Bar', 'Area'])
31
metric = st.selectbox('Choose metric:', ['Sales', 'Visitors', 'Revenue'])
32

33
# Display selected chart
34
if chart_type == 'Line':
35
    st.line_chart(data.set_index('Day')[metric])
36
elif chart_type == 'Bar':
37
    st.bar_chart(data.set_index('Day')[metric])
38
else:
39
    st.area_chart(data.set_index('Day')[metric])
40

41
# Raw data
42
with st.expander('View Raw Data'):
43
    st.dataframe(data)

Run it: streamlit run step4_charts.py

Cool Feature: Try the radio buttons to switch chart types dynamically!

Part 3: Build Your Final Project - Iris Data Explorer (40 minutes)

Time to put it all together! We’ll build a complete data dashboard using everything we’ve learned.

What we’re building: An interactive app that lets users explore the famous Iris flower dataset with filtering, visualization, and statistics.

Learning Goals:

• Combine widgets, data display, and charts
• Use caching for performance
• Structure a multi-section app
• Add professional touches

3.1: Project Setup (5 mins)

Create our final project file: iris_dashboard.py

3.2: Building the Dashboard (30 mins)

Let’s build this step by step. Start with the basic structure:

1
import streamlit as st
2
import pandas as pd
3
from sklearn.datasets import load_iris
4
import matplotlib.pyplot as plt
5
import seaborn as sns
6

7
# Page configuration - always first!
8
st.set_page_config(
9
    page_title="Iris Explorer",
10
    page_icon="🌸",
11
    layout="wide"
12
)
13

14
# Load data with caching for performance
15
@st.cache_data
16
def load_iris_data():
17
    """Load and prepare the Iris dataset"""
18
    iris = load_iris()
19
    df = pd.DataFrame(iris.data, columns=iris.feature_names)
20
    df['species'] = iris.target_names[iris.target]
21
    return df, iris.DESCR
22

23
# Load the data
24
df, description = load_iris_data()
25

26
# === HEADER SECTION ===
27
st.title("Iris Flower Data Explorer")
28
st.markdown("Explore the classic Iris dataset interactively!")
29

30
# Show dataset info
31
with st.expander("About the Dataset"):
32
    st.write(description)
33

34
# === SIDEBAR CONTROLS ===
35
st.sidebar.header("Controls")
36

37
# Species filter
38
species_options = df['species'].unique()
39
selected_species = st.sidebar.multiselect(
40
    "Select Species to Display:",
41
    options=species_options,
42
    default=species_options,
43
    help="Choose which iris species to include in the analysis"
44
)
45

46
# Measurement filter
47
st.sidebar.subheader("Measurement Ranges")
48
sepal_length_range = st.sidebar.slider(
49
    "Sepal Length (cm)",
50
    min_value=float(df['sepal length (cm)'].min()),
51
    max_value=float(df['sepal length (cm)'].max()),
52
    value=(float(df['sepal length (cm)'].min()), float(df['sepal length (cm)'].max()))
53
)
54

55
# === FILTER DATA ===
56
filtered_df = df[
57
    (df['species'].isin(selected_species)) &
58
    (df['sepal length (cm)'] >= sepal_length_range[0]) &
59
    (df['sepal length (cm)'] <= sepal_length_range[1])
60
]
61

62
# === MAIN CONTENT ===
63
if filtered_df.empty:
64
    st.error("No data matches your current filters. Please adjust the criteria.")
65
else:
66
    # Show filtered data stats
67
    col1, col2, col3 = st.columns(3)
68
    with col1:
69
        st.metric("Total Samples", len(filtered_df))
70
    with col2:
71
        st.metric("Species Count", filtered_df['species'].nunique())
72
    with col3:
73
        st.metric("Avg Sepal Length", f"{filtered_df['sepal length (cm)'].mean():.1f} cm")
74

75
    # Data table
76
    st.subheader("Filtered Dataset")
77
    st.dataframe(filtered_df, use_container_width=True)
78

79
    # Visualization section
80
    st.subheader("Visualizations")
81

82
    # Chart selection
83
    chart_type = st.radio(
84
        "Choose visualization:",
85
        ["Scatter Plot", "Box Plot", "Histogram"],
86
        horizontal=True
87
    )
88

89
    # Create charts based on selection
90
    if chart_type == "Scatter Plot":
91
        fig, ax = plt.subplots(figsize=(10, 6))
92
        sns.scatterplot(
93
            data=filtered_df,
94
            x='sepal length (cm)',
95
            y='sepal width (cm)',
96
            hue='species',
97
            ax=ax,
98
            s=100
99
        )
100
        plt.title("Sepal Length vs Width by Species")
101
        st.pyplot(fig)
102

103
    elif chart_type == "Box Plot":
104
        fig, ax = plt.subplots(figsize=(10, 6))
105
        sns.boxplot(data=filtered_df, x='species', y='sepal length (cm)', ax=ax)
106
        plt.title("Sepal Length Distribution by Species")
107
        st.pyplot(fig)
108

109
    else:  # Histogram
110
        fig, ax = plt.subplots(figsize=(10, 6))
111
        for species in filtered_df['species'].unique():
112
            species_data = filtered_df[filtered_df['species'] == species]
113
            plt.hist(species_data['sepal length (cm)'], alpha=0.6, label=species, bins=15)
114
        plt.xlabel("Sepal Length (cm)")
115
        plt.ylabel("Frequency")
116
        plt.title("Sepal Length Distribution")
117
        plt.legend()
118
        st.pyplot(fig)
119

120
    # Summary statistics
121
    st.subheader("📋 Summary Statistics")
122
    st.dataframe(filtered_df.describe(), use_container_width=True)

Run it: streamlit run iris_dashboard.py

3.3: Testing Your Dashboard (5 mins)

Try these interactions:

• Filter different species combinations
• Adjust the sepal length slider
• Switch between chart types
• Expand the dataset info section

What makes this a great dashboard?

• Clear navigation and controls
• Real-time filtering and updates
• Multiple visualization options
• Performance optimization with caching
• Professional layout with columns and metrics

Part 4: Share Your App & Next Steps (20 minutes)

4.1: Deployment Demo (10 mins)

Your app is ready to share with the world! Let’s deploy it to Streamlit Cloud.

Prerequisites for Deployment:

1. GitHub Repository with your app code
2. Requirements file listing dependencies
3. Streamlit Cloud account (free!)

Quick Deployment Steps:

1. Prepare your repository:

   1
   your-repo/
   2
   ├── iris_dashboard.py      # Your main app
   3
   ├── requirements.txt       # Dependencies
   4
   └── README.md             # Optional description

2. Create requirements.txt:

   1
   streamlit
   2
   pandas
   3
   scikit-learn
   4
   matplotlib
   5
   seaborn

3. Deploy on Streamlit Cloud:

   • Go to streamlit.io/cloud
   • Connect your GitHub account
   • Select repository and main file
   • Click “Deploy” → Your app goes live!

Live Demo: (Presenter should show the deployment process if time permits)

Result: Your app gets a public URL like: https://your-app.streamlit.app

4.2: What You’ve Accomplished & Next Steps (10 mins)

Congratulations! In 2 hours, you’ve learned:

Core Streamlit Concepts

• Text display and formatting
• Interactive widgets (sliders, selectboxes, buttons)
• Data visualization and tables
• App layout and organization

Built 4 Complete Apps

• Hello World starter
• Text & data display demo
• Interactive widgets showcase
• Professional data dashboard

Professional Skills

• Code organization and structure
• Performance optimization with caching
• User interface design principles
• Deployment ready applications

Where to Go Next

Level Up Your Streamlit Skills:

1. File Uploads & Processing

   1
   uploaded_file = st.file_uploader("Choose a CSV file")
   2
   if uploaded_file:
   3
       df = pd.read_csv(uploaded_file)

2. Session State (Persistent Data)

   1
   if 'counter' not in st.session_state:
   2
       st.session_state.counter = 0

3. Advanced Charts (Plotly, Altair)

4. Multi-page Apps

5. Custom Components

Essential Resources

• Official Docs: docs.streamlit.io
• Cheat Sheet: docs.streamlit.io/library/cheatsheet
• App Gallery: streamlit.io/gallery
• Community: discuss.streamlit.io
• 30 Days Challenge: Search “30 days of Streamlit”

🏆 Challenge: Build Your Own App!

Try creating an app with your own data or interests. Start simple, then add features as you learn more.

Thank you for participating! Share your creations and keep building!