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

Prerequisites

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 (at least 15 characters OR 8+ characters with a number and lowercase letter)
  5. Choose a username
  6. Verify you’re human (puzzle/challenge)
  7. Check your email and enter the verification code
  8. Click “Create account”
  9. 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 right, or go to https://github.com/new)
  2. Fill in the details:
    • Repository name: music-app (no spaces!)
    • Description: “A simple Streamlit app”
    • IMPORTANT: Choose visibility : Select “Public” (required for free Streamlit deployment)
    • ✅ Check “Add a README file”
    • don’t add a .gitignore or License (I mean you could but it’s overkill for this demo)
    • Click “Create repository”

You are now on the github repository of your new app.

The future is yours!

Check out the url of your repository. It should look like this: https://github.com/YOUR-USERNAME/music-app\

You see just one file : README.md

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

  1. You’re now on your repository page: https://github.com/YOUR-USERNAME/music-app
  2. Press the . key (period/dot) on your keyboard
    • OR change .com to .dev in the URL: https://github.dev/YOUR-USERNAME/music-app
  3. A VS Code-like editor opens in your browser!

This is where you edit the code.

on the left you have multiple icons. each gives you access to different features of github.dev

we will use :

In the middle you have the code editor where you edit your code.

Step 4: Let’s add a dataset

In the following I use the World Music Hits Dataset. See the description here

Option 1: Drag and drop

download the file from here

and drag drop it into the file explorer in the githb.dev editor

Alternative: Copy paste
  1. In the left sidebar, click the “New File” icon (📄+ symbol)
  2. Name it: WorldHits.csv
  3. Get the data:
    • Open a new browser tab and go to: https://raw.githubusercontent.com/SkatAI/epitadb/refs/heads/master/data/WorldHits.csv
    • You’ll see the raw CSV data
    • Press Ctrl+A (Windows) or Cmd+A (Mac) to select all
    • Press Ctrl+C (Windows) or Cmd+C (Mac) to copy
  4. Go back to github.dev tab
  5. Click inside the WorldHits.csv file editor
  6. Press Ctrl+V (Windows) or Cmd+V (Mac) to paste all the data
  7. Press Ctrl+S (Windows) or Cmd+S (Mac) to save

or download the ffile and uploadit to github.dev

Step 5: Create requirements.txt

  1. Click “New File” icon
  2. Name it: requirements.txt
  3. Add this content:
streamlit
pandas
plotly
  1. 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 simple code:
import streamlit as st
import pandas as pd
import plotly.express as px

# Title
st.title("🎵 Music Data Explorer")

# Load data
df = pd.read_csv('WorldHits.csv')

# Let user select which column to plot
column = st.selectbox(
    "Select a feature to plot over time:",
    ['energy', 'danceability', 'loudness', 'tempo', 'valence']
)

# Create the line chart
fig = px.line(
    df.groupby('year')[column].mean().reset_index(),
    x='year',
    y=column,
    title=f'{column.capitalize()} Over Time'
)

# Display the chart
st.plotly_chart(fig)
  1. Press Ctrl+S / Cmd+S to save

That’s it! This simple app:

Step 7: Commit and Push Your Code to GitHub

  1. Click the Source Control icon in the left sidebar (branch/fork symbol, 3rd icon)
  2. You’ll see 3 files listed as changes
  3. In the text box at the top, type: Add music app
  4. Click the ✓ Commit & Push button
  5. If asked to stage changes, click “Yes”
  6. Your code is now on GitHub!

Step 8: Verify Files on GitHub

  1. In a new tab, go back to your repository: https://github.com/YOUR-USERNAME/music-app
  2. You should see 4 files:
    • README.md
    • app.py
    • WorldHits.csv
    • requirements.txt

Step 9: Create Streamlit Cloud Account

Now we need to deploy your app. For that we need to create a Streamlit Cloud account.

Now the deploy part so that the website is live! and everyone can access it on the world wide web.

  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”

Step 10: Deploy Your App

  1. On Streamlit Cloud, click “New app”
  2. choose : “Deploy a public app from github”
  3. Fill in:
    • Repository: YOUR-USERNAME/music-app
    • Branch: main
    • Main file path: app.py
    • change the url if you want
  4. Click “Deploy!”
  5. Wait 2-3 minutes
  6. Done!

Step 11: Your App is Live! 🎉

Your app URL: https://YOUR-USERNAME-music-app-RANDOM.streamlit.app

What you see:

Step 12: Practice: Make a Change

Let’s add one more line to show the data:

  1. Go back to https://github.dev/YOUR-USERNAME/music-app
  2. Open app.py
  3. Add this line at the end of the file:
st.write(f"Average {column}: {df[column].mean():.2f}")
  1. Press Ctrl+S / Cmd+S to save
  2. Click Source Control icon
  3. Type commit message: Add average display
  4. Click Commit & Push
  5. Wait 1-2 minutes
  6. Refresh your app - you’ll see the average value now!

Key Workflow to Remember

Write Code → Save → Commit → Push → Auto Deploy

Every time you push to GitHub, Streamlit Cloud automatically rebuilds your app!

Troubleshooting

App won’t load?

Error in app?

Summary

✅ Created GitHub account ✅ Created repository ✅ Wrote 20 lines of Python code ✅ Committed and pushed code ✅ Deployed live web app ✅ Made a change and redeployed

Core lesson: Write → Commit → Push → Deploy → Repeat