Create a Surfing Web App Using Python  | Towards Data Science

Businesses pay astronomical amounts on data to ensure that they are one step ahead of their competitors. With freely available datasets, specifically about the most ideal surfboard, surfing can mean business, right?
A Python web application is a web page, where the instructions/actions are created using python programming. For example, the following snippet of code creates a drop down option where the user can select multiple wave heights as a filter:
wave_height = st.sidebar.multiselect("Wave height", df['wave_height'].unique())st.write("Wave height selected", wave_height)
This is a creative way to showcase what your python script can do without needing others to install python on their computers — all they require is an internet connection.
While python helps define your actions on your web app, a web framework will take care of the details. This is where Streamlit comes in. Streamlit does the dashboarding design for you.
“Streamlit turns data scripts into shareable web apps in minutes.All in Python. All for free. No front‐end experience required.” — Streamlit Inc., 2021
This tutorial will make use of Streamlit as the web framework of choice, however, it is good to understand the alternative options out there
Popular web frameworks used to build web applications using Python based programming include: Dash, Streamlit, Voila , Flask and Django.
Flask is a web framework that has no data analysis capabilities. It is more of a ‘building from scratch’ engineering tool that allows more customisation. It is better equipped at building smaller custom applications and websites e.g. Reddit and Airbnb. Whereas, Django is geared to help create more complex sites that receive a lot of traffic e.g. Spotify and Instagram.
Where Flask is a web framework, Streamlit and Dash would, for example, run on Flask, as they are considered to be ‘dashboarding tools’. Streamlit is a great way to showcase a ‘Proof of Value’ to stakeholders, whereas, Dash is if you require your dashboard to be put into production and available for company use.
If you are coding in Jupyter Notebook and want to visualise your findings on a web page, then you would use an add-on like Viola. Streamlit cannot, yet, be used in Jupyter Notebooks, but rather runs your .py file in PyCharm, for example.
After choosing the best suited web framework, you would also need to choose a web server to host your website and there are a variety of free and paid options available.
A popular example is Google App Engine, which is created under your Google Cloud project. Other popular cloud providers include Amazon Web Services (AWS) and Microsoft Azure.
Here is a cheat sheet comparing these three cloud services:
You can download the publicly available dataset, that I use in this working example, from kaggle (Author: Guilherme Loureiro). The df_surf.csv dataset was an online survey answered by surfers. Each row represents an individual surfer and the columns refer to the questions answered. These questions relate to the surfboard, wave, surfer, manoeuvres and the surfer’s performance.
By creating a new project in PyCharm, it will create a ‘main.py’ file for you. Save the df_surf.csv in the same location as this main.py file. You can rename the .py file to anything you like, but make sure you adapt my code to import your renamed file.
In the PyCharm Terminal, install the following packages:
pip install streamlitpip install pandaspip install numpy
In the main.py script, insert the following code and see my comments to follow along. If you are new to Streamlit, here is a cheat sheet that is available on the streamlit site, created by Daniel Lewis, 2021.
#import the packagesimport pandas as pdimport numpy as npimport streamlit as st#import the dataset and create a checkbox to shows the data on your websitedf1 = pd.read_csv("df_surf.csv")if st.checkbox('Show Dataframe'):    st.write(df1)#Insert some sentences in markdown format'''# Surfing App'''#Read in data again, but by using streamlit's caching aspect. Our whole app re-runs every time we make small changes, which is infeasible the more complicated our code becomes. So this is the recommended way to import the data.df = st.cache(pd.read_csv)("df_surf.csv")#create side bars that allow for multiple selections:age = st.sidebar.multiselect("Select age", df['surfer_age'].unique())st.write("Age selected", age)weekly_surfs = st.sidebar.multiselect("Surfer Exercise frequency", df['surfer_exercise_frequency'].unique())st.write("Frequency selected", weekly_surfs)surfer_experience = st.sidebar.multiselect("Surfer Experience", df['surfer_experience'].unique())st.write("Experience selected", surfer_experience)surfer_gender = st.sidebar.multiselect("Surfer Gender", df['surfer_gender'].unique())st.write("Gender selected", surfer_gender)wave_height = st.sidebar.multiselect("Wave height", df['wave_height'].unique())st.write("Wave height selected", wave_height)board_type = st.sidebar.multiselect("Board Type", df['board_type'].unique())st.write("Board type selected", board_type)#create a sidebar to select the variable output you want to see after making your multiple selectionsvariables = st.sidebar.multiselect("Select what you want to see for your selection", df.columns)st.write("You selected these variables", variables)# return the sub-set data  of variables you want to seeselected_data = df[(df['surfer_age'].isin(age))]subset_data = selected_data[variables]data_is_check = st.checkbox("Display the data of selected variables")if data_is_check:    st.write(subset_data)
In your terminal you will run the following command:
streamlit run main.py
The following will appear in the terminal:
Click on the local host link and your web app will open in your browser:
There you have it. Your very own web app to explore board types and manoeuvres.
By looking at a combination of the questions asked to these group of surfers, you can gain some insight into what type of boards are being used to achieve specific manoeuvres and what type of surfer they are. A professional that has never done a cut back on a 5ft wave or a beginner stealing all the fun with his/her long board?
This tutorial was just an introduction to get you started, but you can add more data, visualisations and even video clips to colour in your story. But until then, it is now time to go get that perfect wave.