Streamlit Complete Course

Module 1: Getting Started with Streamlit

What is Streamlit?

Streamlit is an open-source Python library that makes it easy to create beautiful, custom web apps for machine learning and data science. With Streamlit, you can turn data scripts into shareable web apps in minutes, not weeks.

Installation

pip install streamlit

Your First App

Create a file called app.py:

import streamlit as st

st.title("My First Streamlit App")
st.write("Hello, World!")
st.write("This is my first data app with Streamlit")

Running the App

streamlit run app.py

💡 Tip: Streamlit automatically reruns your script when you save changes. Enable "Always rerun" in the hamburger menu for faster development.

Module 2: Basic Components

Text Elements

# Title
st.title("This is a Title")

# Header
st.header("This is a Header")

# Subheader
st.subheader("This is a Subheader")

# Text
st.text("This is plain text")

# Markdown
st.markdown("**Bold** and *italic* text")

# Caption
st.caption("This is a caption")

# Code
st.code("print('Hello World')", language="python")

Display Data

import pandas as pd

# Display anything with write
st.write("Anything goes here!")

# Display dataframe
df = pd.DataFrame({
    'Name': ['Alice', 'Bob', 'Charlie'],
    'Age': [25, 30, 35]
})
st.dataframe(df)

# Display metric
st.metric(label="Temperature", value="25°C", delta="1.2°C")

Media Elements

# Image
st.image("image.jpg", caption="My Image")

# Audio
st.audio("audio.mp3")

# Video
st.video("video.mp4")

📝 Exercise: Create an app that displays your name as a title, a short bio as markdown, and a sample dataframe with your favorite books.

Module 3: Layouts and Containers

Columns

col1, col2, col3 = st.columns(3)

with col1:
    st.header("Column 1")
    st.write("Content for column 1")

with col2:
    st.header("Column 2")
    st.write("Content for column 2")

with col3:
    st.header("Column 3")
    st.write("Content for column 3")

Sidebar

# Add to sidebar
st.sidebar.title("Sidebar Title")
st.sidebar.write("Sidebar content")

# Create sidebar widgets
option = st.sidebar.selectbox(
    "Choose an option",
    ["Option 1", "Option 2", "Option 3"]
)

Tabs

tab1, tab2, tab3 = st.tabs(["Tab 1", "Tab 2", "Tab 3"])

with tab1:
    st.write("Content for Tab 1")

with tab2:
    st.write("Content for Tab 2")

with tab3:
    st.write("Content for Tab 3")

Expander

with st.expander("Click to expand"):
    st.write("Hidden content that appears when expanded")
    st.image("image.jpg")

Container

container = st.container()
container.write("This is inside a container")

# You can add to it later
container.write("This was added later")

Module 4: Data Display and Visualization

DataFrames

import pandas as pd
import numpy as np

# Create sample data
df = pd.DataFrame(
    np.random.randn(50, 3),
    columns=['A', 'B', 'C']
)

# Display as interactive table
st.dataframe(df)

# Display as static table
st.table(df.head(10))

# Display with highlighting
st.dataframe(df.style.highlight_max(axis=0))

Charts

# Line chart
st.line_chart(df)

# Area chart
st.area_chart(df)

# Bar chart
st.bar_chart(df)

# Scatter chart
chart_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=['a', 'b', 'c']
)
st.scatter_chart(chart_data)

Advanced Charts with Plotly

import plotly.express as px

# Create plotly figure
fig = px.scatter(df, x='A', y='B', color='C',
                 title='Scatter Plot with Plotly')

# Display in streamlit
st.plotly_chart(fig)

Maps

# Map data
map_data = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=['lat', 'lon']
)

st.map(map_data)

Module 5: Interactive Widgets

Input Widgets

# Button
if st.button("Click Me"):
    st.write("Button was clicked!")

# Checkbox
agree = st.checkbox("I agree")
if agree:
    st.write("Great!")

# Radio
option = st.radio(
    "Choose an option",
    ["Option 1", "Option 2", "Option 3"]
)

# Selectbox
choice = st.selectbox(
    "Pick one",
    ["Choice A", "Choice B", "Choice C"]
)

# Multiselect
options = st.multiselect(
    "Select multiple",
    ["Red", "Green", "Blue", "Yellow"]
)

# Slider
age = st.slider("Select age", 0, 100, 25)

# Text input
name = st.text_input("Enter your name")

# Text area
message = st.text_area("Enter message")

# Number input
number = st.number_input("Enter a number", min_value=0, max_value=100)

# Date input
import datetime
date = st.date_input("Pick a date", datetime.date.today())

# Time input
time = st.time_input("Pick a time")

# File uploader
uploaded_file = st.file_uploader("Choose a file")

Working with State

# Using session state
if 'count' not in st.session_state:
    st.session_state.count = 0

if st.button("Increment"):
    st.session_state.count += 1

st.write(f"Count: {st.session_state.count}")

📝 Exercise: Create a BMI calculator app with sliders for height and weight, and display the result with st.metric().

Module 6: Advanced Features

Caching

import time

@st.cache_data
def load_data():
    time.sleep(2)  # Simulate slow loading
    df = pd.DataFrame({
        'col1': range(100),
        'col2': range(100, 200)
    })
    return df

# This will only run once
df = load_data()
st.dataframe(df)

Forms

with st.form("my_form"):
    st.write("Inside the form")
    slider_val = st.slider("Form slider")
    checkbox_val = st.checkbox("Form checkbox")
    
    # Every form must have a submit button
    submitted = st.form_submit_button("Submit")
    if submitted:
        st.write("Slider:", slider_val, "Checkbox:", checkbox_val)

Progress and Status

import time

# Progress bar
progress_bar = st.progress(0)
for i in range(100):
    time.sleep(0.01)
    progress_bar.progress(i + 1)

# Spinner
with st.spinner("Loading..."):
    time.sleep(2)
st.success("Done!")

# Status messages
st.success("Success!")
st.info("Information")
st.warning("Warning!")
st.error("Error!")

File Handling

# Upload and process CSV
uploaded_file = st.file_uploader("Choose a CSV file", type="csv")

if uploaded_file is not None:
    df = pd.read_csv(uploaded_file)
    st.write(df)
    
    # Download button
    csv = df.to_csv(index=False)
    st.download_button(
        label="Download processed data",
        data=csv,
        file_name="processed_data.csv",
        mime="text/csv"
    )

Multipage Apps

Create a pages folder with multiple Python files:

# File structure:
# app.py
# pages/
#   ├── 1_📊_Dashboard.py
#   ├── 2_📈_Analytics.py
#   └── 3_⚙️_Settings.py

# Each file in pages/ becomes a separate page
# The number prefix controls the order

💡 Advanced Tip: Use st.cache_resource for machine learning models and database connections that should persist across reruns.

Module 7: Best Practices and Deployment

Performance Optimization

Use @st.cache_data for data processing functions
Use @st.cache_resource for model loading
Limit DataFrame size displayed on screen
Use st.spinner for long-running operations
Optimize images before displaying

Code Organization

# Good structure
def load_data():
    # Data loading logic
    pass

def process_data(df):
    # Data processing logic
    pass

def main():
    st.title("My App")
    data = load_data()
    processed = process_data(data)
    st.write(processed)

if __name__ == "__main__":
    main()

Deployment Options

Streamlit Cloud: Free hosting for public apps
Heroku: Free tier available
AWS/GCP/Azure: For production apps
Docker: Containerized deployment