If I would have known - Web Apps edition

Tl;DR

Just create.

It’s easier than ever.

Intro

Let me start with a story.

About my steps into the ITsunami.

The outcome?

See how this 3 bodies web app looks and this data driven formula one web app feels:

yea, ive re-bumped the old slider crank repo started here with Codex CLI x Claude

Just that this time im aware of:

1. very cool prompts to impress via my landings
2. CSR can do a lot…

codex
#3bodies OSS!
git clone https://github.com/JAlcocerT/ThreeBodies/ #root has a DASH version
#cd ThePoincareLab #here there is sth more interesting :)

Until that point I got it working here as you can see on this video.

But I said about CSR, right?

cd landing

claude
#slider crank OSS / mbsd 
git clone 
cd landing

npm run build
npx wrangler pages project create #this will install the wrangler CLI package
#npx wrangler pages project list # See the projects you already have

#npm run build #build the file manually

npx wrangler pages deploy dist # normally will be dist, but whatever <BUILD_OUTPUT_DIRECTORY>
ping multibodysystemdynamics.pages.dev

btw, if you pay attention to the repo, there is some sympy and computational mechanics in it

Enjoy the static deployment: https://multibodysystemdynamics.pages.dev/

You wont have to trust my selfhosting skills to maintain this service up :)

Conclusions

Creating (supply digital products) is easier than ever.

Distribution is most likely your constrain today - aka demand for what you create.

You know…the attract and convert thingy that if you dont get right you wont get $’s.

When I starting the draft for this post, my aim was to focus on a python webapps recap

Like how cool streamlit is for PoCs, maybe consider fastAPI or pocketbase for backend…

Reality: now you have a greenfield full stack web app with one shot prompt that makes the animations way cooler and statically deployed

How will this look in a year?

Im not sure.

What I know is that I will be adding interesting stuff:

flowchart LR
    %% --- Styles ---
    classDef free fill:#E8F5E9,stroke:#2E7D32,stroke-width:2px,color:#1B5E20;
    classDef low fill:#FFF9C4,stroke:#FBC02D,stroke-width:2px,color:#FBC02D;
    classDef mid fill:#FFE0B2,stroke:#F57C00,stroke-width:2px,color:#F57C00;
    classDef high fill:#FFCDD2,stroke:#C62828,stroke-width:2px,color:#C62828;
    classDef bridge fill:#E3F2FD,stroke:#1565C0,stroke-width:3px,color:#0D47A1;

    %% --- Nodes ---
    L0("Free Content
($0)"):::free
    L1("AuditMagnet 🛡️
(Free Web Audit )"):::free
    L11(" Blog/Youtube"):::free
    L12(" ebooks"):::free
    L2("DIY
(Optimization Guides) $"):::low
    L3("Done With You
(Consulting) $$"):::mid
    L4("Done For You
(Full Service) $$$"):::high
    L44("GenBI
Shopify PoC"):::bridge
    L45("Real Estate
Funnel Bot"):::bridge


    %% --- Connections ---
    L0 --> L1
    L0 --> L2
    L0 --> L11
    L0 --> L12
    L2 --> L3
    L3 --> L4
    L44 -->|Enhancing| L4
    L45 -->|Enhancing| L4

Wanna see how good is what you create?

You can get things moving:

Consulting Services

Consulting - Tier of Service

DIY via ebooks

Distilled knowledge via web/ooks to enable you to create

If you were lucky, you saw me presenting what I wrote here:

#git clone https://github.com/JAlcocerT/selfhosted-landing
#cd y2026-tech-talks/2- ba-brd-development
#npm run dev 
git clone https://github.com/JAlcocerT/langchain-db-ui
cd langchain-db-ui
#cd langchain-db-ui/Z_PGSQL-GenBI #not foooor now
#make help
#cd langchain-db-ui/Z_PGSQL-GenBI

make install
make demo-db
#duckdb /home/jalcocert/Desktop/langchain-db-ui/backend/demo.duckdb
#./venv/bin/duckdb /home/jalcocert/Desktop/langchain-db-ui/backend/demo.duckdb
#SELECT * FROM customers;
# Then in the prompt:
# SELECT * FROM customers;
make dev #curl http://localhost:8000/docs

#git clone https://github.com/JAlcocerT/selfhosted-landing
#cd y2026-tech-talks/2- ba-brd-development
#npm run dev 
git clone https://github.com/JAlcocerT/langchain-db-ui
cd langchain-db-ui
#cd langchain-db-ui/Z_PGSQL-GenBI #not foooor now
#make help
#cd langchain-db-ui/Z_PGSQL-GenBI

make install
make demo-db

#./venv/bin/duckdb /home/jalcocert/Desktop/langchain-db-ui/backend/demo.duckdb
#SELECT * FROM customers;
# Then in the prompt:
# SELECT * FROM customers;
#.tables
make dev #curl http://localhost:8000/docs
#./venv/bin/uvicorn main:app --reload --port 8000 #./venv/bin/uvicorn main:app --reload --port 8000
#npm run dev
docker compose up --build

Use duckdb:////home/jalcocert/Desktop/langchain-db-ui/backend/demo.duckdb or duckdb:////app/data/demo.duckdb for container

I showed the Vite x fast api one, but there will be more coming with BAML and PGSQL:)

In the meantime, things are getting interesting:

With containers just:

cp .env.sample .env
make docker-up

docker ps -a --filter "name=langchain-db-ui-frontend-1" #vite 5173 or 5175 if you have kenering
docker ps -a --filter "name=langchain-db-ui-backend-1"

http://192.168.1.2:5175/

The tech talk?

Finally after 2 months of the concept creation: and after a funnel manifesting as 100 > 15 > 2 > …1 person acting on the discussed content?

For this one, Ive been using notebookLLM as a ppt creator, from my slidev prepared .md.

I showed the Vite x fast api one, but there will be more coming with BAML and PGSQL:)

In the meantime, things are getting interesting:

Collecting cool prompts for BluePrints

As I have been collecting nice BRDs, tech stacks and green field prompts, im placing them all at:

#git clone /pbi

A veeeery secret place.

Creating PoCs as of 2026

Less than a year ago Id tell you to go with Python Streamlit for PoCs.

But if you are going to let the vibe flow…

FastAPI + VITE is a very reasonable approach.

Whether you are in OPS, in fmcg, healthcare or within telco environment.

git clone https://github.com/JAlcocerT/poc

A place to go from streamlit pocs to full stack ones, with concepts like graph databases or with context for agents like https://github.com/volcengine/OpenViking

OpenViking is an open-source context database designed specifically for AI Agents(such as openclaw). OpenViking unifies the management of context (memory, resources, and skills) that Agents need through a file system paradigm, enabling hierarchical context delivery and self-evolving.

Oh, and how cool is to:

1. get requirements + fireflies
2. idea definition + vibe with claude code
3. generate a slides.md with the creation
4. feed the .md to notebookllm and get a ppt created

If you got the request by 10am, at 1pm you can be done with that PoC

Or, you can still wait for this to be easier.

We are past the point of AI assisted delivery

Would full AI delivery would be enough?

FAQ

What have you created?

Some time ago, I made this one with a friend: my very first published web app with R Shiny.

• https://jalcocert.github.io/JAlcocerT/useful-r-stuff/
• https://jalcocert.github.io/JAlcocerT/useful-python-stuff/

How can you contribute?

The code is accesible from my Github Repository of R/Stocks

Please feel free to fork the repository and experiment with the code.

 fossengineer/rstocks_shiny:latest
 docker run --name stocksubuntu -p 3836:3838 --detach fossengineer/rstocks_rbase2:latest
# you may need log out first `docker logout` ref. https://stackoverflow.com/a/53835882/248616 docker login

docker tag firstimage YOUR_DOCKERHUB_NAME/firstimage

docker push YOUR_DOCKERHUB_NAME/firstimage
docker run --name py_trip_planner --network tunnel -p 8050:8050 --detach py_trip_planner

docker run --name py_trip_planner --network tunnel -p 8050:8050 --detach fossengineer/trip_planner:arm64
MANIFEST: to detect that is arm64 directly -> multi-image (?)
https://hub.docker.com/r/fossengineer/trip_planner:arm64

But why contributing to that when you can create your own!

Specially with lovable…cursor…etc etc

All those tools that you might have heard of, but havent really bother to install and try.

Python use cases

Python and its 288 use cases

This year I have been surprised by Python language (one more time).

And using uv as package manager has been a revelation:

If we are ready…what are those cool use cases?

Photo and Video

• https://www.geeksforgeeks.org/python-pillow-creating-a-watermark/

For editing video, I prefer to use directly FFMPEG.

TO create videos with Python, for now, I have tried data driven animations, which can be exported to .mp4

Plots

For WebApps, I try to go with Plotly, to get interactivity out of the box.

You can also bring to your Python Apps: ChartJS, ApexCharts…as seen here

• https://handhikayp.medium.com/real-time-data-visualizations-using-python-library-plotly-12e0e5b48240

QR Generation

To generate QR’s with logo thanks to Python

And your QR generator can be embedded into WebApps, as seen here

It can be done as well with Inkscape, or with QR-Code-Generator or with emn178

And applied with slubne :)

I got to learn this during this wedding post!

Infographics

Infographics are one of those things can be done as code: with python ofc

Animating yfinance

YFinance for Python, cool plots and animations | Post

Track Infographic

Matplotlib x Race track x Curvature | GA Post

See this sample script: https://github.com/JAlcocerT/DataInMotion/blob/main/tests/plot_total_return_from_yfinance.py

#git clone https://github.com/JAlcocerT/DataInMotion.git
#cd DataInMotion && branch libreportfolio
uv run tests/plot_historical_gweiss.py CAT --start 2005-01-01 --brand "@LibrePortfolio" --warmup-days 400

But for not just yfinance based, I created:

UnfoldingData Repo

Source Code of UnfoldingData plots and animations for Youtube Channel

UnfoldingData Repo

Source Code of UnfoldingData plots and animations for Youtube Channel

Animations

I got very much surprised couple of years ago with the mechanism project.

Which I finally got the change to write about on this post.

The project has a great application of Python animations.

That I could not resist to tinker with some time back

• https://github.com/JAlcocerT/Slider-Crank
• https://github.com/JAlcocerT/mechanism
• https://github.com/JAlcocerT/Streamlit_PoC/tree/main/Animations - Just some matplotlib animations for various use cases

A Summary of Animations

Post with animated F1, Real Estate, yfinance…

F1 Animated Data

Creating animations around F1 Data | Post

And…animations of mechanisms are also getting cooked: