Complete Walkthrough: Streamlit App with GitHub.dev (No IDE Required)

---

Step 1: Create a GitHub Account

1. Go to https://github.com
2. Click "Sign up" (top right)
3. Enter your email address
4. Create a password and username (e.g., john-student-2025)
5. Verify you're human
6. Check your email and enter the verification code
7. Click "Create account"
8. You can skip the personalization questions or answer them

---

Step 2: Create a New Repository

1. After logging in, click the green "New" button (top left, or go to https://github.com/new)
2. Fill in the details:
   • Choose a Repository name: for instance my-streamlit-app (no spaces!)
   • Description: "A Streamlit data visualization app"
   • Select "Public" (required for free Streamlit deployment)
   • ✅ Check "Add a README file"
   • Click "Create repository"

---

Step 3: Open GitHub.dev (Web-Based Editor)

1. You're now on your repository page: https://github.com/YOUR-USERNAME/my-streamlit-app (change the last part of the URL to your repo name if different)
2. Press the . key (period/dot) on your keyboard
   • OR change .com to .dev in the URL: https://github.dev/YOUR-USERNAME/my-streamlit-app
3. A VS Code-like editor opens in your browser!

This is where you are going to edit your code.

Everytime you edit your code you need to save it and commit it to github. Then wait a few seconds and your app will be deployed with the changes you made.

---

Step 4: Create Your Data File

1. In the left sidebar (Explorer), click the "New File" icon (📄+ symbol)
2. Name it: data.csv
3. Paste this sample data:

Month,Sales,Expenses
January,12000,8000
February,15000,9000
March,13000,8500
April,17000,10000
May,19000,11000
June,21000,12000

4. Press Ctrl+S (Windows) or Cmd+S (Mac) to save

---

Step 5: Create requirements.txt

1. Click "New File" again
2. Name it: requirements.txt
3. Add this content:

streamlit
pandas
plotly

4. Press Ctrl+S / Cmd+S to save

---

Step 6: Create Your Streamlit App

1. Click "New File" again
2. Name it: app.py
3. Paste this complete code:

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

# Page configuration
st.set_page_config(page_title="Sales Dashboard", page_icon="📊", layout="wide")

# Title
st.title("📊 Monthly Sales Dashboard")
st.markdown("---")

# Load data
@st.cache_data
def load_data():
    df = pd.read_csv('data.csv')
    return df

df = load_data()

# Display the data
st.subheader("📋 Raw Data")
st.dataframe(df, use_container_width=True)

st.markdown("---")

# Create two columns
col1, col2 = st.columns(2)

with col1:
    st.subheader("📈 Sales vs Expenses")
    fig1 = px.line(df, x='Month', y=['Sales', 'Expenses'],
                   title='Monthly Trend',
                   markers=True)
    st.plotly_chart(fig1, use_container_width=True)

with col2:
    st.subheader("💰 Profit Analysis")
    df['Profit'] = df['Sales'] - df['Expenses']
    fig2 = px.bar(df, x='Month', y='Profit',
                  title='Monthly Profit',
                  color='Profit',
                  color_continuous_scale='RdYlGn')
    st.plotly_chart(fig2, use_container_width=True)

# Interactive filters
st.markdown("---")
st.subheader("🔍 Filter Data")

selected_month = st.selectbox("Select a month:", df['Month'].tolist())
month_data = df[df['Month'] == selected_month].iloc[0]

st.metric("Sales", f"${month_data['Sales']:,}")
st.metric("Expenses", f"${month_data['Expenses']:,}")
st.metric("Profit", f"${month_data['Profit']:,}")

4. Press Ctrl+S / Cmd+S to save

---

Step 7: Commit and Push Your Code to GitHub

1. Click the Source Control icon in the left sidebar (looks like a branch/fork symbol, usually 3rd icon)
2. You'll see 3 files listed as changes
3. In the text box at the top (says "Message"), type: Initial commit - Streamlit app
4. Click the ✓ Commit & Push button (or the dropdown arrow and select "Commit & Push")
5. If asked to stage changes, click "Yes" or "Always"
6. Your code is now on GitHub!

---

Step 8: Verify Files on GitHub

1. Go back to your repository: https://github.com/YOUR-USERNAME/my-streamlit-app
2. You should see 4 files:
   • README.md
   • app.py
   • data.csv
   • requirements.txt

---

Step 9: Create Streamlit Cloud Account

1. Go to https://share.streamlit.io
2. Click "Sign up"
3. Click "Continue with GitHub"
4. Log in to GitHub if prompted
5. Click "Authorize streamlit" to allow Streamlit to access your repositories

---

Step 10: Deploy Your App

1. On Streamlit Cloud, click "New app"
2. Fill in the deployment form:
   • Repository: Select YOUR-USERNAME/my-streamlit-app
   • Branch: main (should be default)
   • Main file path: app.py
3. Click "Deploy!"
4. Wait 2-3 minutes while your app builds
5. You'll see logs scrolling - this is normal!

---

Step 11: Your App is Live! 🎉

1. Once deployment completes, your app will automatically open
2. Your app URL will be: https://YOUR-USERNAME-my-streamlit-app-app-RANDOM.streamlit.app
3. You can share this URL with anyone!

What you'll see:

• A dashboard with your sales data
• Interactive line and bar charts
• A dropdown to filter by month
• Metrics updating based on selection

---

Step 12: Making Changes Later

To update your app:

1. Go to https://github.dev/YOUR-USERNAME/my-streamlit-app
2. Edit app.py or data.csv
3. Save the file (Ctrl+S / Cmd+S)
4. Click Source Control icon
5. Type a commit message (e.g., "Updated data" or "Added new chart")
6. Click Commit & Push
7. Streamlit Cloud will automatically redeploy your app in 1-2 minutes!

---

Troubleshooting

App won't deploy?

• Check that repository is Public
• Verify all 3 files exist: app.py, data.csv, requirements.txt
• Look at the deployment logs for error messages

Can't push code?

• Make sure you're signed into GitHub in github.dev
• Try refreshing the page and committing again

App crashes?

• Check the logs in Streamlit Cloud
• Most common issue: typo in app.py or missing file

---

Summary of What Students Created

✅ GitHub account and public repository ✅ Web-based code editor (github.dev) ✅ CSV data file ✅ Python Streamlit app with interactive visualizations ✅ Deployed live web application ✅ Shareable URL for their project

All without installing anything on their computer!