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

---

Prerequisites

• A web browser (Chrome, Firefox, Safari, Edge)
• An email address

---

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 :

• top 1: files
• position 3: source control

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

---

Step 5: Create requirements.txt

1. Click "New File" icon
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 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)

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

That's it! This simple app:

• Shows a title
• Lets users pick a music feature from a dropdown
• Plots that feature over the years
• Done in just 20 lines!

---

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:

• A dropdown menu
• Select "energy", "danceability", etc.
• See a line graph showing the trend over years
• That's it!

---

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

4. Press Ctrl+S / Cmd+S to save
5. Click Source Control icon
6. Type commit message: Add average display
7. Click Commit & Push
8. Wait 1-2 minutes
9. 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?

• Check repository is Public
• Make sure all 3 files exist: app.py, WorldHits.csv, requirements.txt

Error in app?

• Look at the Streamlit Cloud logs
• Check for typos in app.py

---

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

---

More changes

in chatgpt write teh following prompt

This is the code for a simple streamlit app
https://github.com/SkatAI/music-app-01

The repo is open
I want to compare key metrics by Key  (ythe musical key of the track)

Your task: modify the app.py code

- keep current visualization
- user selects a feature: from ['energy', 'danceability', 'loudness', 'tempo', 'valence'] and 'duration'
- User sees  box plots per key for selected feature

IMPORTANT:
- Keep code super simple
- Do not optimize
- No error handling
- this is a quick demo not production code

- write the whole app.py code with modifications

the new code generated by chatgpt is

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

# Feature selector (added Duration)
feature = st.selectbox(
    "Select a feature:",
    ["energy", "danceability", "loudness", "tempo", "valence", "duration"]
)

# --- Keep current visualization: line chart of yearly average ---
fig_line = px.line(
    df.groupby("year")[feature].mean().reset_index(),
    x="year",
    y=feature,
    title=f"{feature} Over Time (Yearly Average)"
)
st.plotly_chart(fig_line, use_container_width=True)

# --- New visualization: box plots by musical key ---
fig_box = px.box(
    df,
    x="key",
    y=feature,
    points="all",
    title=f"{feature} by Musical Key"
)
st.plotly_chart(fig_box, use_container_width=True)

Edit and Deploy

Copy this code and paste it in the app.py file in the github.dev editor, replacing the original code.

Then click on the source code icon and commit the changes

Go to the app url, it should reload automatically after a few seconds

Troubleshooting

if nothing happens, go to your github repo and check that the code was actually modified

You should see the message you just typed in github.dev as the last commit.

If you have an error, copy it, paste it in chatgpt and ask for a fix