In this tutorial, we build an advanced Reflex web application entirely in Python that runs seamlessly inside Colab. We design the app to demonstrate how Reflex enables full-stack development with no JavaScript, just reactive Python code. We create a complete notes-management dashboard featuring two pages, real-time database interactions, filtering, sorting, analytics, and user personalization. We progressively construct the project in five clean snippets, covering setup, configuration, model and state management, user interface design, and final execution, which provides us with a hands-on understanding of Reflex’s declarative architecture and reactivity system. Check out the FULL CODES here.
import os, subprocess, sys, pathlib
APP = "reflex_colab_advanced"
os.makedirs(APP, exist_ok=True)
os.chdir(APP)
subprocess.run([sys.executable, "-m", "pip", "install", "-q", "reflex==0.5.9"])We set up our working environment and installed Reflex inside Colab. We create a new project directory and ensure the framework is ready for use. We prepare the base environment so our app can run smoothly later without dependency issues. Check out the FULL CODES here.
rxconfig = """
import reflex as rx
class Config(rx.Config):
app_name = "reflex_colab_advanced"
db_url = "sqlite:///reflex.db"
config = Config()
"""
pathlib.Path("rxconfig.py").write_text(rxconfig)We define the configuration file that specifies the app name and database connection. We connect Reflex to a local SQLite database to store our notes. We maintain this configuration as minimal as possible while still being essential for managing persistent data. Check out the FULL CODES here.
app_py = """
import reflex as rx
class Note(rx.Model, table=True):
content: str
tag: str = "general"
done: bool = False
class State(rx.State):
user: str = ""
search: str = ""
tag_filter: str = "all"
sort_desc: bool = True
new_content: str = ""
new_tag: str = "general"
toast_msg: str = ""
def set_user(self, v: str): self.user = v
def set_search(self, v: str): self.search = v
def set_tag_filter(self, v: str): self.tag_filter = v
def set_new_content(self, v: str): self.new_content = v
def set_new_tag(self, v: str): self.new_tag = v
def toggle_sort(self): self.sort_desc = not self.sort_desc
async def add_note(self):
if self.new_content.strip():
await Note.create(content=self.new_content.strip(), tag=self.new_tag.strip() or "general")
self.new_content = ""; self.toast_msg = "Note added"
async def toggle_done(self, note_id: int):
note = await Note.get(id=note_id)
if note:
await note.update(done=not note.done)
async def delete_note(self, note_id: int):
await Note.delete(id=note_id)
self.toast_msg = "Deleted"
async def clear_done(self):
items = await Note.all()
for n in items:
if n.done:
await Note.delete(id=n.id)
self.toast_msg = "Cleared done notes"
async def notes_filtered(self):
items = await Note.all()
q = self.search.lower()
if q:
items = [n for n in items if q in n.content.lower() or q in n.tag.lower()]
if self.tag_filter != "all":
items = [n for n in items if n.tag == self.tag_filter]
items.sort(key=lambda n: n.id, reverse=self.sort_desc)
return items
async def stats(self):
items = await Note.all()
total = len(items)
done = len([n for n in items if n.done])
tags = {}
for n in items:
tags[n.tag] = tags.get(n.tag, 0) + 1
top_tags = sorted(tags.items(), key=lambda x: x[1], reverse=True)[:5]
return {"total": total, "done": done, "pending": total - done, "tags": top_tags}
"""
We define our data model Note and the reactive State class that controls user input, filtering, and database operations. We manage asynchronous actions, such as adding, deleting, and updating notes. We also include logic for computing statistics dynamically from stored data. Check out the FULL CODES here.
app_py += """
def sidebar():
return rx.vstack(
rx.heading("RC Advanced", size="6"),
rx.link("Dashboard", href="https://www.marktechpost.com/"),
rx.link("Notes Board", href="http://www.marktechpost.com/board"),
rx.text("User"),
rx.input(placeholder="your name", value=State.user, on_change=State.set_user),
spacing="3", width="15rem", padding="1rem", border_right="1px solid #eee"
)
async def stats_cards():
s = await State.stats()
return rx.hstack(
rx.box(rx.text("Total"), rx.heading(str(s["total"]), size="5"), padding="1rem", border="1px solid #eee", border_radius="0.5rem"),
rx.box(rx.text("Done"), rx.heading(str(s["done"]), size="5"), padding="1rem", border="1px solid #eee", border_radius="0.5rem"),
rx.box(rx.text("Pending"), rx.heading(str(s["pending"]), size="5"), padding="1rem", border="1px solid #eee", border_radius="0.5rem"),
spacing="4"
)
def tag_pill(tag: str, count: int = 0):
return rx.badge(
f"{tag} ({count})" if count else tag,
on_click=State.set_tag_filter(tag),
cursor="pointer",
color_scheme="blue" if tag == State.tag_filter else "gray"
)
async def tags_bar():
s = await State.stats()
tags = [("all", s["total"])] + s["tags"]
return rx.hstack(*[tag_pill(t[0], t[1]) for t in tags], spacing="2", wrap="wrap")
def note_row(note: Note):
return rx.hstack(
rx.hstack(
rx.checkbox(is_checked=note.done, on_change=State.toggle_done(note.id)),
rx.text(note.content, text_decoration="line-through" if note.done else "none"),
),
rx.badge(note.tag, color_scheme="green"),
rx.button("🗑", on_click=State.delete_note(note.id), color_scheme="red", size="1"),
justify="between", width="100%"
)
async def notes_list():
items = await State.notes_filtered()
return rx.vstack(*[note_row(n) for n in items], spacing="2", width="100%")
"""
We design modular UI components, including the sidebar, tag filters, and individual note rows. We use Reflex elements like vstack, hstack, and suspense to build responsive layouts. We ensure that each UI element directly reflects state changes in real-time. Check out the FULL CODES here.
app_py += """
def dashboard_page():
return rx.hstack(
sidebar(),
rx.box(
rx.heading("Dashboard", size="8"),
rx.cond(State.user != "", rx.text(f"Hi {State.user}, here is your activity")),
rx.vstack(
rx.suspense(stats_cards, fallback=rx.text("Loading stats...")),
rx.suspense(tags_bar, fallback=rx.text("Loading tags...")),
spacing="4"
),
padding="2rem", width="100%"
),
width="100%"
)
def board_page():
return rx.hstack(
sidebar(),
rx.box(
rx.heading("Notes Board", size="8"),
rx.hstack(
rx.input(placeholder="search...", value=State.search, on_change=State.set_search, width="50%"),
rx.button("Toggle sort", on_click=State.toggle_sort),
rx.button("Clear done", on_click=State.clear_done, color_scheme="red"),
spacing="2"
),
rx.hstack(
rx.input(placeholder="note content", value=State.new_content, on_change=State.set_new_content, width="60%"),
rx.input(placeholder="tag", value=State.new_tag, on_change=State.set_new_tag, width="20%"),
rx.button("Add", on_click=State.add_note),
spacing="2"
),
rx.cond(State.toast_msg != "", rx.callout(State.toast_msg, icon="info")),
rx.suspense(notes_list, fallback=rx.text("Loading notes...")),
padding="2rem", width="100%"
),
width="100%"
)
app = rx.App()
app.add_page(dashboard_page, route="https://www.marktechpost.com/", title="RC Dashboard")
app.add_page(board_page, route="/board", title="Notes Board")
app.compile()
"""
pathlib.Path("app.py").write_text(app_py)
subprocess.run(["reflex", "run", "--env", "prod", "--backend-only"], check=False)Finally, we assemble the dashboard and board pages and compile the entire Reflex app. We add navigation, input fields, buttons, and live statistics to create a fully interactive interface. We conclude by running the backend server, bringing our advanced Reflex app to life.
In conclusion, we developed and ran a full-featured Reflex application that integrates stateful logic, dynamic components, and a persistent SQLite database, all from within Python. We witness how easily we can define both frontend and backend behavior using a unified reactive framework. Through this step-by-step process, we gain practical insight into managing asynchronous state updates, composing UI elements declaratively, and extending the app with multi-page navigation and analytics.
Check out the FULL CODES here. Feel free to check out our GitHub Page for Tutorials, Codes and Notebooks. Also, feel free to follow us on Twitter and don’t forget to join our 100k+ ML SubReddit and Subscribe to our Newsletter. Wait! are you on telegram? now you can join us on telegram as well.
Asif Razzaq is the CEO of Marktechpost Media Inc.. As a visionary entrepreneur and engineer, Asif is committed to harnessing the potential of Artificial Intelligence for social good. His most recent endeavor is the launch of an Artificial Intelligence Media Platform, Marktechpost, which stands out for its in-depth coverage of machine learning and deep learning news that is both technically sound and easily understandable by a wide audience. The platform boasts of over 2 million monthly views, illustrating its popularity among audiences.