We will build a sophisticated CAD system in this tutorial. Reflex A web app written entirely in Python, that works seamlessly with Colab. The app is designed to show how Reflex allows full stack development without JavaScript. Just reactive Python code. The notes management dashboard includes two pages with real-time interactions to the database, filters, sorting and analytics. The project is built in five clean chunks that cover setup, configuration and model management, as well as user interface design and execution. This gives us a good understanding of Reflex’s declarative architecture. Click here to see the FULL CODES here.
import os, subprocess, sys, pathlib
The APP is a cellular phone application. "reflex_colab_advanced"
os.makedirs(APP, exist_ok=True)
os.chdir(APP)
subprocess.run([sys.executable, "-m", "pip", "install", "-q", "reflex==0.5.9"])Reflex is installed inside Colab. The framework will be ready to use once we create the new directory. Our base environment is prepared so that our application can be run without any dependency problems. Look at 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)The configuration file specifies both the database and app names. Reflex is connected to a SQLite local database for storing our notes. The configuration we use is minimal, yet essential in managing persistent data. Look at the FULL CODES here.
app_py = """
Import reflex as rx
Class Note(rx.Model table=True).
content
tag: str "general"
If bool is False, the result will be:
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.sort_desc=not self.sort_desc
Async add_note() (self).
if self.new_content.strip():
await Note.create(content=self.new_content.strip(), tag=self.new_tag.strip() You can also find out more about "general")
self.new_content = ""; self.toast_msg = "Note added"
Async toggle_done (self, note_id int),
note = await Note.get(id=note_id)
Note:
Wait for 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, see:
Then if you don't do anything:
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)
Len = done[n for n in items if n.done])
tags = {}
For n, see:
Tags[n.tag] = tags.get(n.tag, 0) + 1
top_tags = sorted(tags.items()Key=lambda: xReturn[1], reverse=True)[:5]
return {"total": total, "done": done, "pending": total - done, "tags": top_tags}
"""
The reactive State class controls the user input, filters, and database operation. We handle asynchronous operations, like adding, deleting and updating notes. Also, we include logic to compute statistics from the stored data. Take a look at 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"
)
Define tag_pill (tag: str, count int = 0, int: 0).
Return rx.badge
The 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"
)
Tags_bar async():
s = await State.stats()
Tags [("all", s["total"]() + s["tags"]
return rx.hstack(*[tag_pill(t[0]The t[1]"" for t tags="space=""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 create modular UI elements, such as the tag filter, note row, sidebar and more. Reflex components like vstack, hstack, and suspense help us build responsive layouts. Each UI element is designed to reflect state changes directly in real time. Take a look at the FULL CODES here.
app_py += """
def dashboard_page():
Return rx.hstack (
The sidebar is a great way to view the article.(),
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 (
The sidebar is a great way to view the article.(),
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)We then assemble all the pages of the Reflex application, including the board and dashboard. To create an interactive interface, we add buttons, navigation, input fields and live statistics. Then, we run the server to bring our Reflex advanced app into life.
We developed and executed a Reflex-based application with stateful logic and dynamic components that integrated a persistent SQLite Database, all within Python. This unified framework allows us to define front-end and backend behaviors with ease. This step-by-step approach gives us practical insights into how to manage asynchronous updates, compose UI elements in a declarative manner, and extend the app with analytics and multi-page navigation.
Take a look at the FULL CODES here. Check out our GitHub Page for Tutorials, Codes and Notebooks. Also, feel free to follow us on Twitter Join our Facebook group! 100k+ ML SubReddit Subscribe now our Newsletter. Wait! Are you using Telegram? now you can join us on telegram as well.
Asif Razzaq, CEO of Marktechpost Media Inc. is a visionary engineer and entrepreneur who is dedicated to harnessing Artificial Intelligence’s potential for the social good. Marktechpost is his latest venture, a media platform that focuses on Artificial Intelligence. It is known for providing in-depth news coverage about machine learning, deep learning, and other topics. The content is technically accurate and easy to understand by an audience of all backgrounds. Over 2 million views per month are a testament to the platform’s popularity.
