A web app needs a way for people to enter information and see results. Its frontend is the user-facing part: buttons, text boxes, menus, and displayed output. The backend handles work such as calculations and database queries. Frontend development turns a desired user experience into an interface that collects inputs, passes them to the backend, and presents what comes back. section 1.1.1 section 3.5
Traditionally, frontend work uses HTML for page structure, CSS for appearance, and JavaScript for dynamic behavior. Streamlit offers another route for Python developers: write the interface in Python while Streamlit supplies code the browser can display. This avoids writing those languages directly for the examples here; it does not make interface decisions automatic. You still need to decide what users should see, select, and do. section 1.6.2 section 1.1.1 section 1.6.4
For a unit converter, build the interface from the user's task outward:
- Sketch the experience and map each input or output to a UI element before coding. section 3.8
- Add a quantity selector, a value field, two unit dropdowns, and a Convert button. Use a sidebar and columns to arrange them. section 3.6.1
- Connect the controls to conversion logic: configuration determines available quantities and units; the frontend sends selected values to the backend and displays its result. section 3.5.3
A useful first milestone
A dummy converter frontend can show all the controls before conversion works. Its quantity choices and units are temporarily hardcoded, and the Convert button has no action yet. Running `streamlit run frontend.py` opens it in a browser; rerun after changes to inspect the visible result. This separates interface design from backend integration rather than pretending the first screen is a finished app. section 3.6.1
Listing 3.1 Creating the base UI with Streamlit in frontend.py
import streamlit as st
quantity = st.sidebar.radio("Select a quantity", ["Mass", "Length", "Time"])
st.title("Unit Converter")
input_num = float(st.text_input("Value to convert", value="0"))
units = ["Kilograms", "Grams", "Pounds", "Ounces"]
from_unit_col, to_unit_col = st.columns(2)
from_unit = from_unit_col.selectbox("From", units)
to_unit = to_unit_col.selectbox("To", units, index=1)
if st.button("Convert"):
pass # Placeholder for future statements to execute
The base UI listing puts the selector, input, dropdowns, layout, and placeholder button together in one small Python file. section 3.6.1
The browser-facing frontend and the server remain distinct even when the interface is written in Python. A Streamlit server runs the script and tells the browser what to display. As an app grows, frontend actions can call backend functions and display persisted data, as in an account-and-content CRUD app or a movie search interface. Before sharing an app, test unexpected inputs and changes that might break its behavior; deployment also requires a server that stays available to users. section 4.3.1 section 8.1.3 section 11.1.3 section 11.0
