Streamlit Tutorial: From Zero to Cloud Deployment

A comprehensive guide to building and deploying interactive web applications with Streamlit.

📚 What is Streamlit?

Streamlit is an open-source Python framework that makes it incredibly easy to create beautiful, interactive web applications for data science and machine learning projects. No HTML, CSS, or JavaScript required!

Why Streamlit?

✅ Pure Python - Write apps in plain Python, no web development experience needed
✅ Fast Development - Build apps in minutes, not days
✅ Interactive Widgets - Sliders, buttons, file uploads, and more
✅ Live Updates - Changes appear instantly as you modify code
✅ Free Deployment - Deploy to Streamlit Cloud for free
✅ Beautiful UI - Professional-looking apps out of the box

🎯 What You'll Learn

Basic Streamlit Concepts - Text, data, and widgets
Building Simple Apps - Hello World to interactive apps
Advanced Features - Layouts, caching, session state
Cloud Deployment - Deploy your app to the internet for free

📁 Tutorial Structure

Streamlit-tutorial/
│
├── README.md                    # This file
├── DEPLOYMENT_GUIDE.md          # Step-by-step deployment instructions
│
├── examples/
│   ├── 01_hello_world.py       # Simplest possible app
│   ├── 02_basic_widgets.py     # Common widgets demo
│   ├── 03_data_visualization.py # Charts and graphs
│   ├── 04_interactive_app.py   # Complete interactive example
│   └── 05_advanced_features.py # Layouts, caching, state
│
├── my_first_app/               # Template for your first project
│   ├── app.py                  # Main application
│   ├── requirements.txt        # Dependencies
│   └── README.md               # Project documentation
│
└── resources/
    ├── cheatsheet.md           # Quick reference
    └── best_practices.md       # Tips and tricks

🚀 Quick Start (5 Minutes)

Step 1: Install Streamlit

pip install streamlit

Step 2: Create Your First App

Create a file called app.py:

import streamlit as st

st.title("Hello, Streamlit! 👋")
st.write("This is my first Streamlit app!")

name = st.text_input("What's your name?")
if name:
    st.write(f"Hello, {name}!")

Step 3: Run Your App

streamlit run app.py

Your browser will automatically open to http://localhost:8501 with your app running!

📖 Core Concepts

1. Text and Markdown

import streamlit as st

# Title
st.title("My App Title")

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

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

# Regular text
st.write("This is regular text")

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

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

2. Displaying Data

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

# DataFrame
df = pd.DataFrame({
    'Name': ['Alice', 'Bob', 'Charlie'],
    'Age': [25, 30, 35],
    'Score': [85, 92, 78]
})

st.dataframe(df)  # Interactive table
st.table(df)      # Static table

# Metrics
st.metric(label="Temperature", value="70 °F", delta="1.2 °F")

# JSON
st.json({'name': 'Alice', 'age': 25})

3. Interactive Widgets

import streamlit as st

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

# Number input
age = st.number_input("Enter your age", min_value=0, max_value=120)

# Slider
score = st.slider("Select score", 0, 100, 50)

# Select box
option = st.selectbox("Choose option", ['A', 'B', 'C'])

# Multi-select
choices = st.multiselect("Choose multiple", ['Option 1', 'Option 2', 'Option 3'])

# Checkbox
agree = st.checkbox("I agree")

# Radio buttons
choice = st.radio("Pick one", ['Option A', 'Option B'])

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

# File uploader
file = st.file_uploader("Upload file", type=['csv', 'txt'])

4. Charts and Visualizations

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

# Line chart
chart_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=['A', 'B', 'C']
)
st.line_chart(chart_data)

# Bar chart
st.bar_chart(chart_data)

# Area chart
st.area_chart(chart_data)

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

# Plotly charts (more advanced)
import plotly.express as px
fig = px.scatter(chart_data, x='A', y='B')
st.plotly_chart(fig)

5. Layouts

import streamlit as st

# Sidebar
st.sidebar.title("Sidebar")
st.sidebar.write("This is in the sidebar")
sidebar_option = st.sidebar.selectbox("Choose", ['A', 'B', 'C'])

# Columns
col1, col2, col3 = st.columns(3)
with col1:
    st.write("Column 1")
with col2:
    st.write("Column 2")
with col3:
    st.write("Column 3")

# Expander
with st.expander("Click to expand"):
    st.write("Hidden content here")

# 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")

# Container
with st.container():
    st.write("This is inside a container")

6. Caching (Performance)

import streamlit as st
import pandas as pd

# Cache data loading
@st.cache_data
def load_data():
    # This function only runs once, then caches the result
    return pd.read_csv('large_file.csv')

# Cache resource (like ML models)
@st.cache_resource
def load_model():
    # Load expensive resource once
    return load_my_ml_model()

# Use cached functions
df = load_data()
model = load_model()

7. Session State

import streamlit as st

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

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

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

🎨 Building Your First Real App

Let's build a simple data exploration app:

import streamlit as st
import pandas as pd
import numpy as np
import plotly.express as px

# Page config
st.set_page_config(
    page_title="Data Explorer",
    page_icon="📊",
    layout="wide"
)

# Title
st.title("📊 Data Explorer")
st.markdown("Upload a CSV file and explore your data interactively!")

# File upload
uploaded_file = st.file_uploader("Choose a CSV file", type="csv")

if uploaded_file is not None:
    # Load data
    df = pd.read_csv(uploaded_file)

    # Show basic info
    st.subheader("Dataset Overview")
    col1, col2, col3 = st.columns(3)
    col1.metric("Rows", df.shape[0])
    col2.metric("Columns", df.shape[1])
    col3.metric("Memory", f"{df.memory_usage().sum() / 1024:.2f} KB")

    # Display data
    st.subheader("Raw Data")
    st.dataframe(df)

    # Statistics
    st.subheader("Statistics")
    st.dataframe(df.describe())

    # Visualization
    st.subheader("Visualization")
    numeric_cols = df.select_dtypes(include=[np.number]).columns.tolist()

    if len(numeric_cols) >= 2:
        col1, col2 = st.columns(2)
        with col1:
            x_axis = st.selectbox("X-axis", numeric_cols)
        with col2:
            y_axis = st.selectbox("Y-axis", numeric_cols, index=1)

        fig = px.scatter(df, x=x_axis, y=y_axis)
        st.plotly_chart(fig, use_container_width=True)
else:
    st.info("👆 Upload a CSV file to get started!")

🌐 Deploying to Streamlit Cloud

See DEPLOYMENT_GUIDE.md for detailed instructions on deploying your app to the cloud for free!

Quick Overview:

Push your code to GitHub
Sign up at share.streamlit.io
Connect your GitHub repository
Deploy in one click!

📚 Learning Resources

Official Documentation

Streamlit Docs - Official documentation
API Reference - Complete API
Cheat Sheet - Quick reference

Example Apps

Streamlit Gallery - Browse examples
30 Days of Streamlit - Daily tutorials

Community

Streamlit Forum - Ask questions
GitHub - Source code

🎯 Common Use Cases

Data Science

Data exploration and analysis
Interactive dashboards
Model performance visualization
A/B test analysis

Machine Learning

Model demos
Hyperparameter tuning interfaces
Dataset labeling tools
Model comparison dashboards

Business

KPI dashboards
Report generators
Internal tools
Prototyping

Education

Interactive tutorials
Data visualization demos
Algorithm explanations
Student projects

💡 Tips and Best Practices

1. Performance

Use @st.cache_data for data loading
Use @st.cache_resource for ML models
Avoid expensive computations in main flow

2. User Experience

Add clear titles and descriptions
Use columns for better layout
Add loading spinners for slow operations
Provide helpful error messages

3. Code Organization

Split large apps into multiple pages
Use functions to organize code
Keep widgets in logical groups
Document your code

4. Debugging

Use st.write() to debug values
Check browser console for errors
Use st.error() to show error messages
Test with different data

🚧 Troubleshooting

App won't start

# Check if Streamlit is installed
pip list | grep streamlit

# Reinstall if needed
pip install --upgrade streamlit

Port already in use

# Use a different port
streamlit run app.py --server.port 8502

Changes not reflecting

Streamlit auto-reloads on file save
If not working, click "Rerun" in the browser
Or press 'R' key in the terminal

Import errors

# Install missing packages
pip install package_name

# Or use requirements.txt
pip install -r requirements.txt

📝 Exercises

Exercise 1: BMI Calculator

Create an app that:

Takes height and weight as input
Calculates BMI
Shows BMI category (underweight, normal, overweight, obese)
Displays result with color coding

Exercise 2: Stock Price Viewer

Create an app that:

Takes a stock ticker as input
Fetches stock data (use yfinance)
Displays price chart
Shows key statistics

Exercise 3: Text Analyzer

Create an app that:

Takes text input
Counts words, characters, sentences
Shows word frequency
Displays sentiment (use textblob)

🎓 Next Steps

Explore Examples - Run the example apps in the examples/ folder
Build Your App - Use the template in my_first_app/
Deploy - Follow the deployment guide to put your app online
Share - Show your app to the world!

📞 Getting Help

Check the Official Docs
Search the Forum
Look at Example Apps
Ask on Stack Overflow with tag streamlit

Happy Building! 🎉

Streamlit makes it easy to turn data scripts into shareable web apps in minutes, all in pure Python. No front-end experience required!

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
.vs		.vs
examples		examples
my_first_app		my_first_app
resources		resources
DEPLOYMENT_GUIDE.md		DEPLOYMENT_GUIDE.md
QUICKSTART.md		QUICKSTART.md
README.md		README.md
TUTORIAL_SUMMARY.md		TUTORIAL_SUMMARY.md

Folders and files

Latest commit

History

Repository files navigation

Streamlit Tutorial: From Zero to Cloud Deployment

📚 What is Streamlit?

Why Streamlit?

🎯 What You'll Learn

📁 Tutorial Structure

🚀 Quick Start (5 Minutes)

Step 1: Install Streamlit

Step 2: Create Your First App

Step 3: Run Your App

📖 Core Concepts

1. Text and Markdown

2. Displaying Data

3. Interactive Widgets

4. Charts and Visualizations

5. Layouts

6. Caching (Performance)

7. Session State

🎨 Building Your First Real App

🌐 Deploying to Streamlit Cloud

📚 Learning Resources

Official Documentation

Example Apps

Community

🎯 Common Use Cases

Data Science

Machine Learning

Business

Education

💡 Tips and Best Practices

1. Performance

2. User Experience

3. Code Organization

4. Debugging

🚧 Troubleshooting

App won't start

Port already in use

Changes not reflecting

Import errors

📝 Exercises

Exercise 1: BMI Calculator

Exercise 2: Stock Price Viewer

Exercise 3: Text Analyzer

🎓 Next Steps

📞 Getting Help

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages