Oscars Predictions App with Python and Streamlit — Part 1: Deploying the App

13 min readFeb 16, 2022

Article Overview

The 2022 Oscars are just around the corner, and I thought it would be neat to showcase how easy it is to create an interactive Python dashboard with Streamlit by having fun with an Oscars Predictions App. In this article I will walk you through my experience of creating and deploying a Streamlit Python dashboard fully in the cloud with very minimal Python coding and zero web development experience needed.

You can try out the app right away for fun at: https://bit.ly/oscarsApp.

By the end of this tutorial, you will learn:

How to use GitHub to write and store your Python code directly in the cloud (with no software needed on your computer)
How to deploy an app through Streamlit’s free cloud hosting tier on https://streamlit.io/cloud
How to incorporate different interactive Streamlit dashboard components into your app
How to store and retrieve data in Python from databases using the free Deta Cloud platform: https://www.deta.sh/

The full Python code can be found here and can also be accessed from the Streamlit app, from the top right menu:

Figure 1: Viewing app source from Streamlit app’s menu

This article is the first of a two-part series. The first part covers the first three sections below on deploying your Streamlit App and connecting to the Deta Cloud database. The second part will cover the last two sections below and do a deeper dive on the Oscars App Python code.

App Overview — Description of the app layout and different pages
Setting up Free Accounts — Details on setting up GitHub, Streamlit and Desh accounts
Writing Python code in the cloud — Details on using Github.dev and the online VS Code platform
Python Code Overview — Overview of the major sections in the Python code
Python Code Deep Dive — Detailed explanations of the Streamlit components and major sections of the code

App Overview

The purpose of the app was to showcase different dashboard components from the Streamlit Python package as well as some interactive charts that are available in Python.

The app has 4 main pages that can be selected in the sidebar menu from a dropdown:

Oscar 2022 Nominees
Oscar 2022 Predictions
Past Oscar Winners
Best Picture Emoji Quiz

Oscar 2022 Nominees

This page shows this year’s nominees broken down by movie and category in three different types of outputs:

An interactive Plotly bar chart, where the user can filter for specific award categories in the legend and hover their mouse over the graph’s bars for more details
A count summary table showing total # of nominations by movie (The Power of the Dog is crushing it at 12 nominations, closely followed by Dune at 10)
A detailed table showing all the nominees for all the categories with extra descriptions (e.g. for best Actor and Actress, who were the nominees, for what movie, and what role did they play in that movie)

Each of these outputs can further be filtered by selecting certain award categories in a dropdown multi-select box.

Figure 2: Streamlit multiselect dropdown

Figure 3: Interactive Plotly chart. User can filter for award categories in the legend.

Oscar 2022 Predictions

This page allows the user to make predictions for the top four award categories (best picture, director, actor and actress). The picks are stored in a Deta.sh database and the user can modify their picks by entering their “safe word” (low key password). They can also compare their picks with other users’ predictions and see a summary of picks by category in table or bar chart outputs.

Past Oscar Winners

This page scrapes live Oscar data from Wikipedia (we know, we know… not the most reliable source, but they have greatly formatted tables and data going back to the 1920’s). The page has an interesting interactive “jitter” plot that shows # of nominations vs # of awards won by movie. The legend is also interactive and allows for filtering of the nomination year.

A jitter plot is a special type of scatter plot that slightly offsets overlapping scatter points. They work great when one of the chart axes is not continuous (e.g. categorical, or integer values). In this case, for example, there were more than 20 movies that have had 7 nominations and only 1 award. On a normal scatter plot, all these points would be overlapping and hard to see.

Figure 4: Plotly “jitter” plot to showcase overlapping scatter points.

Best Picture Emoji Quiz

This page is purely for fun to test out Streamlit’s capability of displaying emojis. The 10 best picture nominees each have a set of emojis. You can try the quiz in “easy” mode by matching the emojis to the right movie using pre-filled dropdowns or in “hard” mode where you must type out the movie names in blank textboxes. Try experimenting with different numbers of correct answers to see how the output message changes.

Setting Up Free Accounts

This section will cover:

Setting up GitHub Repo — Details on setting up the app’s repository on GitHub
Connecting GitHub to Streamlit Cloud — Details on deploying the app on Streamlit Cloud
Setting up Deta Cloud database– details on creating your Deta database and storing the Token in your Streamit app’s “Secrets” settings

To create this app, I had to set up three main accounts:

GitHub account — any serious programmer should have a GitHub account to share their creations with the world. Once you make an account you can make a private or public “repo” to upload and share your Python codes.
Streamlit cloud account — Streamlit is a Python package that allows for easy creation of interactive dashboards. You don’t need an account to start using the package right away within your Python program. However, if you want to host your app in the cloud, you can make a free account on their Streamlit cloud platform: https://streamlit.io/cloud. Their free “Starter” tier allows for hosting of 1 private app and unlimited public apps.
Deta cloud account — I used Deta to create a free database to store people’s Oscars winner picks. Deta has a Python package that allows for very fast and easy retrieval and uploading of new data into your database.

GitHub

Once you have created and verified your free GitHub account, it should take you to your main dashboard. On there, click on “Create Repository”:

In the new screen, enter all your app details:

Enter a repository name.
Enter a description for your repo.
Select Public or Private. Note that if you would like to share the app with others, you will need to make the repo public. However, your code will also be visible to anyone who visits your GitHub repo. If you would like to make your app private, Streamlit cloud only allows for one private app to be hosted under their free tier.
Click on “Create repository” at the bottom of the page.

Figure 8: Steps to creating a GitHub repo

On the new blank repo page, click on “creating a new file” under the Quick setup section at the top:

Figure 9: Adding a new file to GitHub repo

Give your Python app file a descriptive name (I usually use app.py or streamlit_app.py), and for now put some dummy code to test your dashboard:

At the very bottom of the page, you will see an area to “commit” your file. Every time you make major changes to the file and “commit” your file, GitHub will ask you to give a generic reason and optionally a more detailed explanation. This is just used for version control and to track changes to your app (in case others want to “follow” your repo). For now, you can leave the generic description that is already typed in the box.

In terms of deploying your app with Streamlit Cloud, that’s all you really need. You can come back to this app.py file and keep making changes which will then in turn be reflected live to your Streamlit app once it’s deployed.

The only other files you might need in your repo are:

Any source files that the dashboard needs (e.g. csv or Excel files, pdf files, etc.)
A “requirements.txt” file with other Python packages needed in your app

Streamlit Cloud will already have some of the most common packages installed (e.g. Pandas, Numpy, etc.) but if there are any that you use in your app that Streamlit doesn’t have you will get an error message and they need to be added to the requirements file

For my Oscars app, I ended up adding three packages to the requirements file:

deta to allow for connection to the Deta Cloud databae
plotly to create interactive charts
lxml to scrape live data from Wikipedia

You can copy my requirements.txt file from the Oscars repo or copy the code below:

https://github.com/dbogt/oscars2022/blob/main/requirements.txt

deta==1.0.1
plotly==4.13.0
lxml==4.5.0

Streamlit Cloud

On the Streamlit Cloud site you can click on the “Try for free” button at the top of the page or navigate directly to: https://share.streamlit.io/

Here you will have the option to either continue with a Gmail account, GitHub account or another email. If you have already created your GitHub account, I would recommend linking directly to your GitHub. It will then take you to a screen to authorize Streamlit for your GitHub account and then a screen to choose one of the Streamlit plans. Pick “Community” plan for the free account with unlimited public apps and one private app.

Streamlit also has a great step-by-step guide in creating and deploying your app with GitHub:

https://docs.streamlit.io/streamlit-cloud/get-started
https://docs.streamlit.io/streamlit-cloud/get-started/deploy-an-app

Once you have created your account, you can always go back to your main dashboard and launch more apps: https://share.streamlit.io/

Steps for Deploying a new App:

For more detailed screenshots and steps see Streamlit’s guide linked above. Below is a summary of the key steps:

Click on “New app” and “Deploy a new app from existing repo…”
In the new screen, if you have connected Streamlit Cloud to your GitHub account, it will automatically detect all your repos in the “Repository” field
Pick the repo you created (oscarsApp)
Streamlit should automatically detect your Python file in the repo
Click on Deploy!

You will then get a screen saying “Your app is in the oven” while Streamlit creates a cloud environment with all the Python packages you need to run your app (that were previously typed out in the requirements.txt file). This usually takes longer the first time you deploy the app, but once it’s deployed any time you go to your app link it should automatically load up your dashboard.

If you can see some of the dummy text we inputted earlier you are good to go! From now on, anytime you make changes to your Python file, you will see the updates live in your app.

Figure 13: Dummy Streamlit dashboard working!

Deta Cloud Database

I’ve experimented with different ways of storing and retrieving data through Streamlit apps. One option is to store csv files in your GitHub repo, but if your repo is public anyone can see the information inside them. This is not an issue for public data sets (e.g. saving the list of Oscar nominees and categories so your app doesn’t constantly scrape the data from a website), but could be an issue if you’re storing important information (in this case the users’ Oscar prediction and personal information).

Another option I have tried is using a private Google Sheets file and the Google Sheets API to link Python to a Google Drive account. However, I’ve found the Google Sheets API very hard to use and explain to novice programmers and requires a lot of “tinkering” to get your Python code working just right.

The Deta Cloud platform is a great workaround. It’s free, vert fast to set up, and the Python code to connect to your database is very simple to write and understand. If you have used dictionaries in Python, you will know how to interact with your Deta Cloud database.

Once you have set up and verified your account, you will be taken to your main dashboard. Important: make sure to copy down your Key and ID in a safe, private place (i.e. do NOT save your key or ID in your GitHub repo or anywhere in your Pyhon code):

Figure 14: Save your Deta key in a safe, private location.

The way you will access your database through the Streamlit app is by saving your Key and ID in the back-end settings of your app in something called “Secrets”. Any data stored in “Secrets” can then be accessed securely from the Python code.

Once you have your Key and ID, you just need to do three more steps:

Add the deta Python package to your requirements.txt on GitHub as seen here.
Save your Deta key and ID in the Secrets section of your Streamlit app (details below).
Add code to your Python .py file to import deta package and connect to the database, as seen in the deta Python tutorial: https://docs.deta.sh/docs/base/py_tutorial/.

Streamlit Secrets and Deta API

Streamlit Secrets are a great feature for Streamlit apps stored in the cloud. If there are any important variables that you want to have access to in your Python code but are confidential (e.g. usernames, passwords, emails, API tokens and keys, etc.) it is essential that these are not stored in your GitHub repo, especially if the repo is public. Instead, these can easily be added to your app through your Streamlit Cloud dashboard. A full background and tutorial on Streamlit Secrets can be found here. The key steps are also below.

Log into your Streamlit Cloud dashboard: https://share.streamlit.io/ and instead of clicking on your app’s link, click on the three dots icon to the right.
Select “Settings” from the menu that pops up.
In the new window that appears, select “Secrets”
In the Secrets window you can type any string or array (list) variables. Create a variable for the Deta project_key, and one for the project_id (see image below).
Click on Save.

Figure 15: Setting up Streamlit App Secrets

That’s it! You can now access your Deta key and Deta account from within your Python code in GitHub by typing:

from deta import Deta
detaKey = st.secrets["project_key"]
deta = Deta(detaKey)

You can also create or connect to an existing database by using deta.Base(“name of database”):

db = deta.Base("oscar_bets_test")

To save new data into your database, use db.put(Python dictionary), where the keys of the dictionary are the column headers in your database table, and the values are the new row’s inputs. To grab existing data from your database use db.fetch().items, which returns a dictionary that can easily be converted to a DataFrame with the Python pandas package.

See the source code of the Oscars app to see these codes in play: https://github.com/dbogt/oscars2022/blob/main/streamlit_app.py

Writing Python Code in the Cloud

One neat thing about hosting your Python code on Github and Streamlit app in the cloud is you can make changes to your Python file directly in your browser and see the changes live without having to install any additional software. This is great when you’re developing on the go, or using a corporate laptop where you are not allowed to install additional software, etc.

In the Python classes I teach, I usually tell participants to install Anaconda to manage their Python packages and create virtual environments. However, since we are running our app in the cloud using Streamlit’s server, all we have to do is add any new packages we want to use to the requirements.txt file on GitHub, without having to install them with Anaconda on our local drives.

I also recommend new Python programmers to use a more robust IDE (Integrated Development Environment) to write and run their Python code, such as Spyder or VS Code (both come with a base installation of Anaconda). These IDE’s have great debugging and auto-completion features that are very helpful for beginner coders. However, when developing Streamlit apps or dashboards, the GitHub web-based editor is more than enough to write quick code and being able to see your updates live in the app is very helpful for debugging.

GitHub.dev

We will be using VS Code for the browser to write and edit our app’s Python code. This IDE is built into GitHub and every time you “commit” changes to your code to your GitHub repo, Streamlit Cloud will pick up the changes and automatically refresh your live app to show the new changes.

A full tutorial on how to use the online VS Code ca be found here: https://github.dev/github/dev.

For some quick steps see below:

Navigate to your Python file in the Github repo you created (e.g.: https://github.com/dbogt/oscars2022/blob/main/streamlit_app.py)
Anywhere on this page just type “.” This will open the VS Code web-editor with your Python file already in edit mode.
Make any changes to your Python code.
Once you are done, you will have to “commit” your changes by clicking on the icon on the left menu with the blue notification symbol. Type a description for the commit message and press the checkmark icon (see image below).

Figure 16: Editing Python code in GitHub.dev

As soon as the commit is completed, the Streamlit app will automatically refresh if you had it open in a different browser.

Part 2 — Python Code Deep Dive

Stay tuned for my Part 2 of this series. I will do an overview and deep dive of the Python code behind the Oscars app and explain some of the major Streamlit components used in the dashboard.

In the meantime, don’t forget to submit your Oscar picks and try out our Best Picture Emoji Quiz: https://bit.ly/oscarsApp.

You can also look at the source code in the GitHub repo:

https://github.com/dbogt/oscars2022/blob/main/streamlit_app.py