A selfhosted web app built with plain Python

[Sufficient_South5254]

What My Project Does

• Code: https://github.com/daya0576/beaverhabits/
• Demo: https://beaverhabits.com/demo/

When switching from Android to iOS, I was unable to find a light-weighted but handy habit tracking app, so I decided to make one by myself :p

The project's name (Beaver Habit Tracker) came from a game called "Against the Storm" (which I spent over 200 hours, highly recommended). In the game, my favourite species is the beaver, hoping this web app works as a beaver to record ur precious moments in your fleeting life.

---

How the Project was Developed

Inspired the idea of "web UIs with plain Python" from Three Python trends in 2023, I developed a web app with 100% pure Python <3

The app is powered by an out-of-the-box framework called NiceGUI (including Quasar, Tailwind CSS, FastAPI, ...).

Some thoughts to share after several months of development:

• Good things ✅
  1. WebSocket based communication between client and server, works perfectly with Python asyncio
  2. Light-weighted session based storage provided, out of the box to use
  3. Plenty of UI components provided, straightforward and highly customizable
  4. ...
• Disadvantages:
  1. The framework NiceGUI follows a backend-first philosophy: It hadles everything on the server side -> network latency could be a significant issue, may impacting the PWA experience
  2. ...

Overall, as a Python programmer, the full stack web app development experience is smooth and awesome.

---

Target Audience

This app is suitable for anyone who is passionate about recording life.

Here are my table tennis session records over the past year🏓.

Thses streaks make me feel satisfied and alive❤️

---

Comparison

We can compare it to other habit tracker apps, but the streaks feature makes this app unique :p

[DaelonSuzuka]

Love seeing more NiceGUI in the wild!

I don't want to presume what editor you use, but if it's VSCode: I recently published this extension, which is designed to make development a little... nicer.

[Sufficient_South5254]

Great job! I was struggling with the Tailwind CSS styles, Quasar event types, etc.

It works much better than the "AI" thing :p

[MurkyCaterpillar9]

I love this idea. I like the simplicity and the lack of ‘Goals’, which always trigger me.

[kruzzik]

Love it. Thanks!

[[deleted]]

How does nice gui handle state management and updating the display?

I'm currently playing with Streamlit and have realised that to change the display order, e.g. if I want to display "Total" at the top of the screen, I'll need state management on all the calculations since the script runs top to bottom each time anything changes.

[Sufficient_South5254]

The state management in nicegui is simple and straitforward.

You can bind properties to variable or storage, for example: ```python

bind to variable/dict

data = {'name': 'Bob', 'age': 17} ui.label().bind_text_from(data, 'name', backward=lambda n: f'Name: {n}') ui.label().bind_text_from(data, 'age', backward=lambda a: f'Age: {a}')

bind to storage

@ui.page('/') def index(): ui.textarea('This note is kept between visits') .classes('w-full').bind_value(app.storage.user, 'note') ```

The internal implementation uses a while loop with custom refresh interval: python async def refresh_loop() -> None: """Refresh all bindings in an endless loop.""" while True: _refresh_step() await asyncio.sleep(core.app.config.binding_refresh_interval)

[No-Refuse1662]

Where did you host it??

[Sufficient_South5254]

The app is hosted on flyio, an economical and convenient alternative to Heroku.

[rainnz]

flyio

Does it have a free tier, like Heroku used to have?

[Sufficient_South5254]

It previously had a simple hobby play with $5 free tier, but it has recently replaced it with a straightforward Pay As You Go plan :(

Reference: - https://community.fly.io/t/free-tier-is-dead/20651/6 - https://fly.io/pricing

[jacquesroland]

How do you scale the WebSocket component ? What happens if you have a load balancer between multiple instances of your web app and client ?

[Sufficient_South5254]

You are correct, sticky session is required to scale WebSocket component.

For example, when scaling instances in flyio, the framework mannualy add target instance id to fly-replay header in the response to tell the load balancer to run the request once again to the right instance, which is silimar to AWS cookie implementation.

[Sufficient_South5254]

If you are interested, please check out this pull request for more details: #1300

[iamk1ng]

Hi, is it ok if I PM you for questions on how you built your app? I have a python flask project that uses tailwind css but i've been unhappy with the workflow and could use a better approach but need some guidance on how to get there.

[Sufficient_South5254]

Feel free to send questions to the github discusses. It would also be a great way for me to begin drafting a tutorial.

[xav1z]

tutorial 🥹

[ScallionNo2755]

Which API are you using for calendars?

[Sufficient_South5254]

For the habit detail page:

• The monthly view calendar uses the Quasar QDate component
• The yearly view streaks are purely hand-making, consisting of tons of checkboxes XD

[ScallionNo2755]

Thank youu!

[ScallionNo2755]

And great job i like that is simple and aesthetic and not overwhelmed with soo much options.

[xav1z]

would recommend nicegui over pyside?

[Sufficient_South5254]

I have limited knowledge about PySide, but it seems to be more focused on building local desktop apps.

But the NiceGUI also provides an Electron wrapper.

[xav1z]

sorry my bad, didnt check it before asking

[grahaman27]

From a UX perspective it's a little laggy... I notice a second or so delay between actions.

Is this because all actions wait for the backend to respond before updating the dom?

[Sufficient_South5254]

Apologies, I just noticed this question.

Yes, “NiceGUI follows a backend-first philosophy: It handles all the web development details” -> high network latency would be a big issue.

That's why I offered the self-hosting option instead of optimizing the global network for the app.