On this tutorial, we construct a complicated Reflex net utility totally in Python that runs seamlessly inside Colab. We design the app to exhibit how Reflex allows full-stack growth with no JavaScript, simply reactive Python code. We create an entire notes-management dashboard that includes two pages, real-time database interactions, filtering, sorting, analytics, and consumer personalization. We progressively assemble the undertaking in 5 clear snippets, masking setup, configuration, mannequin and state administration, consumer interface design, and remaining execution, which supplies us with a hands-on understanding of Reflex’s declarative structure and reactivity system. Take a look at the FULL CODES right 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 arrange our working surroundings and put in Reflex inside Colab. We create a brand new undertaking listing and make sure the framework is prepared to be used. We put together the bottom surroundings so our app can run easily later with out dependency points. Take a look at the FULL CODES right 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 outline the configuration file that specifies the app title and database connection. We join Reflex to an area SQLite database to retailer our notes. We preserve this configuration as minimal as potential whereas nonetheless being important for managing persistent knowledge. Take a look at the FULL CODES right here.
app_py = """
import reflex as rx
class Word(rx.Mannequin, desk=True):
content material: str
tag: str = "normal"
carried out: bool = False
class State(rx.State):
consumer: str = ""
search: str = ""
tag_filter: str = "all"
sort_desc: bool = True
new_content: str = ""
new_tag: str = "normal"
toast_msg: str = ""
def set_user(self, v: str): self.consumer = 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 Word.create(content material=self.new_content.strip(), tag=self.new_tag.strip() or "normal")
self.new_content = ""; self.toast_msg = "Word added"
async def toggle_done(self, note_id: int):
word = await Word.get(id=note_id)
if word:
await word.replace(carried out=not word.carried out)
async def delete_note(self, note_id: int):
await Word.delete(id=note_id)
self.toast_msg = "Deleted"
async def clear_done(self):
gadgets = await Word.all()
for n in gadgets:
if n.carried out:
await Word.delete(id=n.id)
self.toast_msg = "Cleared carried out notes"
async def notes_filtered(self):
gadgets = await Word.all()
q = self.search.decrease()
if q:
gadgets = [n for n in items if q in n.content.lower() or q in n.tag.lower()]
if self.tag_filter != "all":
gadgets = [n for n in items if n.tag == self.tag_filter]
gadgets.type(key=lambda n: n.id, reverse=self.sort_desc)
return gadgets
async def stats(self):
gadgets = await Word.all()
whole = len(gadgets)
carried out = len([n for n in items if n.done])
tags = {}
for n in gadgets:
tags[n.tag] = tags.get(n.tag, 0) + 1
top_tags = sorted(tags.gadgets(), key=lambda x: x[1], reverse=True)[:5]
return {"whole": whole, "carried out": carried out, "pending": whole - carried out, "tags": top_tags}
"""
We outline our knowledge mannequin Word and the reactive State class that controls consumer enter, filtering, and database operations. We handle asynchronous actions, similar to including, deleting, and updating notes. We additionally embody logic for computing statistics dynamically from saved knowledge. Take a look at the FULL CODES right here.
app_py += """
def sidebar():
return rx.vstack(
rx.heading("RC Superior", dimension="6"),
rx.hyperlink("Dashboard", href="https://www.marktechpost.com/"),
rx.hyperlink("Notes Board", href="http://www.marktechpost.com/board"),
rx.textual content("Person"),
rx.enter(placeholder="your title", worth=State.consumer, on_change=State.set_user),
spacing="3", width="15rem", padding="1rem", border_right="1px stable #eee"
)
async def stats_cards():
s = await State.stats()
return rx.hstack(
rx.field(rx.textual content("Complete"), rx.heading(str(s["total"]), dimension="5"), padding="1rem", border="1px stable #eee", border_radius="0.5rem"),
rx.field(rx.textual content("Carried out"), rx.heading(str(s["done"]), dimension="5"), padding="1rem", border="1px stable #eee", border_radius="0.5rem"),
rx.field(rx.textual content("Pending"), rx.heading(str(s["pending"]), dimension="5"), padding="1rem", border="1px stable #eee", border_radius="0.5rem"),
spacing="4"
)
def tag_pill(tag: str, rely: int = 0):
return rx.badge(
f"{tag} ({rely})" if rely else tag,
on_click=State.set_tag_filter(tag),
cursor="pointer",
color_scheme="blue" if tag == State.tag_filter else "grey"
)
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(word: Word):
return rx.hstack(
rx.hstack(
rx.checkbox(is_checked=word.carried out, on_change=State.toggle_done(word.id)),
rx.textual content(word.content material, text_decoration="line-through" if word.carried out else "none"),
),
rx.badge(word.tag, color_scheme="inexperienced"),
rx.button("🗑", on_click=State.delete_note(word.id), color_scheme="purple", dimension="1"),
justify="between", width="100%"
)
async def notes_list():
gadgets = await State.notes_filtered()
return rx.vstack(*[note_row(n) for n in items], spacing="2", width="100%")
"""
We design modular UI parts, together with the sidebar, tag filters, and particular person word rows. We use Reflex parts like vstack, hstack, and suspense to construct responsive layouts. We make sure that every UI ingredient immediately displays state modifications in real-time. Take a look at the FULL CODES right here.
app_py += """
def dashboard_page():
return rx.hstack(
sidebar(),
rx.field(
rx.heading("Dashboard", dimension="8"),
rx.cond(State.consumer != "", rx.textual content(f"Hello {State.consumer}, right here is your exercise")),
rx.vstack(
rx.suspense(stats_cards, fallback=rx.textual content("Loading stats...")),
rx.suspense(tags_bar, fallback=rx.textual content("Loading tags...")),
spacing="4"
),
padding="2rem", width="100%"
),
width="100%"
)
def board_page():
return rx.hstack(
sidebar(),
rx.field(
rx.heading("Notes Board", dimension="8"),
rx.hstack(
rx.enter(placeholder="search...", worth=State.search, on_change=State.set_search, width="50%"),
rx.button("Toggle type", on_click=State.toggle_sort),
rx.button("Clear carried out", on_click=State.clear_done, color_scheme="purple"),
spacing="2"
),
rx.hstack(
rx.enter(placeholder="word content material", worth=State.new_content, on_change=State.set_new_content, width="60%"),
rx.enter(placeholder="tag", worth=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="data")),
rx.suspense(notes_list, fallback=rx.textual content("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"], verify=False)Lastly, we assemble the dashboard and board pages and compile all the Reflex app. We add navigation, enter fields, buttons, and dwell statistics to create a completely interactive interface. We conclude by working the backend server, bringing our superior Reflex app to life.
In conclusion, we developed and ran a full-featured Reflex utility that integrates stateful logic, dynamic parts, and a persistent SQLite database, all from inside Python. We witness how simply we will outline each frontend and backend conduct utilizing a unified reactive framework. Via this step-by-step course of, we acquire sensible perception into managing asynchronous state updates, composing UI parts declaratively, and lengthening the app with multi-page navigation and analytics.
Take a look at the FULL CODES right here. Be at liberty to take a look at our GitHub Web page for Tutorials, Codes and Notebooks. Additionally, be happy to observe us on Twitter and don’t neglect to affix our 100k+ ML SubReddit and Subscribe to our Publication. Wait! are you on telegram? now you’ll be able to be a part of us on telegram as nicely.
Asif Razzaq is the CEO of Marktechpost Media Inc.. As a visionary entrepreneur and engineer, Asif is dedicated to harnessing the potential of Synthetic Intelligence for social good. His most up-to-date endeavor is the launch of an Synthetic Intelligence Media Platform, Marktechpost, which stands out for its in-depth protection of machine studying and deep studying information that’s each technically sound and simply comprehensible by a large viewers. The platform boasts of over 2 million month-to-month views, illustrating its recognition amongst audiences.
Elevate your perspective with NextTech Information, the place innovation meets perception.
Uncover the most recent breakthroughs, get unique updates, and join with a world community of future-focused thinkers.
Unlock tomorrow’s developments in the present day: learn extra, subscribe to our e-newsletter, and grow to be a part of the NextTech group at NextTech-news.com
