Initial commit

.streamlit/config.toml

@@ -0,0 +1,6 @@
+[browser]
+serverAddress = '0.0.0.0'
+
+[theme]
+base="dark"
+primaryColor="#4be8e0"

Dockerfile

@@ -0,0 +1,37 @@
+# Start with a lightweight Linux Anaconda image
+FROM continuumio/miniconda3:25.3.1-1
+
+# Update all packages and install nano unzip and curl
+RUN apt-get update
+RUN apt-get install nano unzip curl -y
+
+# THIS IS SPECIFIC TO HUGGINFACE
+# We create a new user named "user" with ID of 1000
+RUN useradd -m -u 1000 user
+# We switch from "root" (default user when creating an image) to "user" 
+USER user
+# We set two environmnet variables 
+# so that we can give ownership to all files in there afterwards
+# we also add /home/user/.local/bin in the $PATH environment variable 
+# PATH environment variable sets paths to look for installed binaries
+# We update it so that Linux knows where to look for binaries if we were to install them with "user".
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+
+# We set working directory to $HOME/app (<=> /home/user/app)
+WORKDIR $HOME/app
+
+# Leverage layer caching: copy only reqs first
+COPY requirements.txt requirements.txt
+RUN pip install -r requirements.txt
+
+# Copy all local files to /home/user/app with "user" as owner of these files
+# Always use --chown=user when using HUGGINGFACE to avoid permission errors
+COPY --chown=user . $HOME/app
+
+# THIS IS SPECIFIC TO HUGGINGFACE AS WELL
+# expose port 7860 which is the port used by HuggingFace for Web Application
+EXPOSE 7860
+
+# Run streamlit server
+CMD ["streamlit", "run", "app.py", "--server.port=7860"]

app.py

@@ -0,0 +1,163 @@
+import streamlit as st
+import pandas as pd
+import plotly.express as px 
+import plotly.graph_objects as go
+import numpy as np
+
+### Config
+st.set_page_config(
+    page_title="E-commerce",
+    page_icon="💸 ",
+    layout="wide"
+)
+
+DATA_URL = ('https://full-stack-assets.s3.eu-west-3.amazonaws.com/Deployment/e-commerce_data.csv')
+
+### App
+st.title("Build dashboards with Streamlit 🎨")
+
+st.markdown("""
+    Welcome to this awesome `streamlit` dashboard. This library is great to build very fast and
+    intuitive charts and application running on the web. Here is a showcase of what you can do with
+    it. Our data comes from an e-commerce website that simply displays samples of customer sales. Let's check it out.
+
+    You can download the whole code here 👉 [Source code](https://github.com/JedhaBootcamp/streamlit-demo-app)
+
+    Also, if you want to have a real quick overview of what streamlit is all about, feel free to watch the below video 👇
+""")
+
+with st.expander("⏯️ Watch this 15min tutorial"):
+    st.video("https://youtu.be/B2iAodr0fOo")
+
+st.markdown("---")
+
+
+# Use `st.cache` when loading data is extremly useful
+# because it will cache your data so that your app 
+# won't have to reload it each time you refresh your app
+@st.cache_data
+def load_data(nrows):
+    data = pd.read_csv(DATA_URL, nrows=nrows)
+    data["Date"] = data["Date"].apply(lambda x: pd.to_datetime(",".join(x.split(",")[-2:])))
+    data["currency"] = data["currency"].apply(lambda x: pd.to_numeric(x[1:]))
+    return data
+
+st.subheader("Load and showcase data")
+st.markdown("""
+
+    You can use the usual Data Science libraries like `pandas` or `numpy` to load data. 
+    Then simply use [`st.write()`](https://docs.streamlit.io/library/api-reference/write-magic/st.write) to showcase it on your web app. 
+
+""")
+
+data_load_state = st.text('Loading data...')
+data = load_data(1000)
+data_load_state.text("") # change text from "Loading data..." to "" once the the load_data function has run
+
+## Run the below code if the check is checked ✅
+if st.checkbox('Show raw data'):
+    st.subheader('Raw data')
+    st.write(data)    
+
+## Simple bar chart
+st.subheader("Simple bar chart built directly with Streamlit")
+st.markdown("""
+    You can build simple chart directly with streamlit using:
+
+    * [`st.bar_chart`](https://docs.streamlit.io/library/api-reference/charts/st.bar_chart)
+    * [`st.line_chart`](https://docs.streamlit.io/library/api-reference/charts/st.line_chart)
+    * [`st.area_chart`](https://docs.streamlit.io/library/api-reference/charts/st.area_chart)
+
+    Eventhough it doesn't offer great flexibility, it is still a very simple way to create graphs quickly since 
+    streamlit since these methods accepts a pandas DataFrame or Numpy array as input.
+
+""")
+currency_per_country = data.set_index("country")["currency"]
+st.bar_chart(currency_per_country)
+
+## Bar chart built with plotly 
+st.subheader("Simple bar chart built with Plotly")
+st.markdown("""
+    Now, the best thing about `streamlit` is its compatibility with other libraries. For example, you
+    don't need to actually use built-in charts to create your dashboard, you can use :
+    
+    * [`plotly`](https://docs.streamlit.io/library/api-reference/charts/st.plotly_chart) 
+    * [`matplotlib`](https://docs.streamlit.io/library/api-reference/charts/st.pyplot)
+    * [`bokeh`](https://docs.streamlit.io/library/api-reference/charts/st.bokeh_chart)
+    * ...
+
+    This way, you have all the flexibility you need to build awesome dashboards. 🥰
+
+""")
+fig = px.histogram(data.sort_values("country"), x="country", y="currency", barmode="group")
+st.plotly_chart(fig, use_container_width=True)
+
+
+### Input data 
+st.subheader("Input data")
+st.markdown("""
+    As a final note, you can use data that a user will insert when he/she interacts with your app.
+    This is called *input data*. To collect these, you can do two things:
+    * [Use any of the input widget](https://docs.streamlit.io/library/api-reference/widgets)
+    * [Build a form](https://docs.streamlit.io/library/api-reference/control-flow/st.form)
+
+    Depending on what you need to do, you will prefer one or the other. With a `form`, you actually group
+    input widgets together and send the data right away, which can be useful when you need to filter
+    by several variables.
+
+""")
+
+#### Create two columns
+col1, col2 = st.columns(2)
+
+with col1:
+    st.markdown("**1️⃣ Example of input widget**")
+    country = st.selectbox("Select a country you want to see all time sales", data["country"].sort_values().unique())
+    
+    country_sales = data[data["country"]==country]
+    fig = px.histogram(country_sales, x="Date", y="currency")
+    fig.update_layout(bargap=0.2)
+    st.plotly_chart(fig, use_container_width=True)
+
+with col2:
+    st.markdown("**2️⃣ Example of input form**")
+
+    with st.form("average_sales_per_country"):
+        country = st.selectbox("Select a country you want to see sales", data["country"].sort_values().unique())
+        start_period = st.date_input("Select a start date you want to see your metric")
+        end_period = st.date_input("Select an end date you want to see your metric")
+        submit = st.form_submit_button("submit")
+
+        if submit:
+            avg_period_country_sales = data[(data["country"]==country)]
+            start_period, end_period = pd.to_datetime(start_period), pd.to_datetime(end_period)
+            mask = (avg_period_country_sales["Date"] > start_period) & (avg_period_country_sales["Date"] < end_period)
+            avg_period_country_sales = avg_period_country_sales[mask].mean()
+            st.metric("Average sales during selected period (in $)", np.round(avg_period_country_sales, 2))
+
+
+### Side bar 
+st.sidebar.header("Build dashboards with Streamlit")
+st.sidebar.markdown("""
+    * [Load and showcase data](#load-and-showcase-data)
+    * [Charts directly built with Streamlit](#simple-bar-chart-built-directly-with-streamlit)
+    * [Charts built with Plotly](#simple-bar-chart-built-with-plotly)
+    * [Input Data](#input-data)
+""")
+e = st.sidebar.empty()
+e.write("")
+st.sidebar.write("Made with 💖 by [Jedha](https://jedha.co)")
+
+
+
+### Footer 
+empty_space, footer = st.columns([1, 2])
+
+with empty_space:
+    st.write("")
+
+with footer:
+    st.markdown("""
+        🍇
+        If you want to learn more, check out [streamlit's documentation](https://docs.streamlit.io/) 📖
+    """)

requirements.txt

@@ -0,0 +1,50 @@
+altair==5.5.0
+attrs==25.4.0
+blinker==1.9.0
+boto3==1.40.62
+botocore==1.40.62
+cachetools==6.2.1
+click==8.3.0
+contourpy==1.3.3
+cycler==0.12.1
+fonttools==4.60.1
+gitdb==4.0.12
+GitPython==3.1.45
+gunicorn==23.0.0
+Jinja2==3.1.6
+jmespath==1.0.1
+joblib==1.5.2
+jsonpointer==2.1
+jsonschema==4.25.1
+jsonschema-specifications==2025.9.1
+kiwisolver==1.4.9
+MarkupSafe==3.0.3
+matplotlib==3.10.7
+narwhals==2.10.0
+numpy==2.3.4
+pandas==2.3.3
+pillow==12.0.0
+plotly==6.3.1
+protobuf==6.33.0
+pyarrow==21.0.0
+pydeck==0.9.1
+pyparsing==3.2.5
+python-dateutil==2.9.0.post0
+pytz==2025.2
+referencing==0.37.0
+rpds-py==0.28.0
+s3transfer==0.14.0
+scikit-learn==1.7.2
+scipy==1.16.3
+seaborn==0.13.2
+setuptools==78.1.1
+six==1.17.0
+smmap==5.0.2
+streamlit==1.51.0
+tenacity==9.1.2
+threadpoolctl==3.6.0
+toml==0.10.2
+tornado==6.5.2
+tzdata==2025.2
+watchdog==6.0.0
+wheel==0.45.1