M4RKYU.SYSEdition 2027
Skip to content
LOCEN/Ontario · CA/▸work · bloomprintStandbyOK/--:--:--EST
M4M4RK_YUportfolio
  • BuildBuild
    BuildOverview
    • WorkSelected case studies and write-ups
    • GamesPlayable prototypes and game-dev logs
  • GalleryGallery
    GalleryOverview
    • PhotosPhoto collections and visual experiments
    • ShopPrints, posters, and one-off objects
  • WritingWriting
    WritingOverview
    • BlogLong-form devlogs and field notes
    • NotesShort observations, links, snippets
  • ResourcesResources
    ResourcesOverview
    • Tools38 in-browser developer utilities
    • LinksDaily-use dev and design bookmarks
  • AboutAbout
  • ContactContact
中文
← projects
Web app · 2026Ready

Bloomprint

Turns yard inspiration into a buildable plan — what to buy, how much, what tools, in what order, and what can go wrong.

Quick facts

Role
Solo developer: planning engine, product UI, local-first storage, and optional cloud sync.
Timeline
2026 · active development
Platforms
Responsive web · Local-first planning
LiveSource

On this page

  • >What it is
  • >What it looks like
  • >Built with
  • >Highlights
  • >Engineering
  • >Under the hood
  • >Outcome
  • >Roadmap & lessons
Bloomprint home page offering buildable yard plans for real homes
Fig. 01 — Bloomprint
01

What it is

#

Problem

Landscaping a yard is overwhelming: an inspiration photo says nothing about materials, quantities, tools, sequencing, or the ways a project can go wrong — and most tools answer with a chatbot's confident guess.

Solution

A structured planning app, not a chatbot: a deterministic engine is the source of truth and works fully offline with no AI key and no photo — AI only rephrases the finished plan. Every plan is grounded in a region-aware catalog (Ontario-first), price bands instead of fake exact prices, material calculators that widen when you haven't measured, and per-phase how-to guides.

02

What it looks like

#
  • Planning engineThe demo exposes the deterministic stages before the result: intake, regional scoring, quantities, risk checks, and packaging.
03

Built with

#

Frontend

  • Next.js
  • React 19
  • TypeScript
  • Tailwind CSS
  • Konva

Backend

  • Supabase
  • Zod

ML

  • TensorFlow.js
04

Highlights

#
  • Deterministic planning engine as the source of truth
  • Local-first storage with optional Supabase cross-device sync
  • Free/Open Data Mode — works with no paid API
  • Region-aware retailer links and honest price bands
  • Optional AI presentation (Claude) with silent fallback
  • On-device photo segmentation (TensorFlow.js)
05

Engineering

#
  1. Process 01

    Make the planner deterministic before adding AI

    Context
    Material quantities, sequencing, and regional suitability cannot depend on a model improvising plausible advice.
    Approach
    Let a rules-based engine own the plan and restrict Claude to rephrasing facts that are already set.
    Outcome
    Plans remain inspectable and work without AI, while expanding capability requires catalog and rule work rather than prompt changes.
  2. Process 02

    Represent uncertainty instead of hiding it

    Context
    Users may not have measurements, retailer inventory changes, and Ontario-first data does not generalize everywhere.
    Approach
    Return ranges, confidence labels, sources, last-checked dates, and explicit verify-before-buying notes.
    Outcome
    The output is less magically precise but more trustworthy and actionable.
06

Under the hood

#

Architecture notes

  • The deterministic engine owns the truth; AI and live data only enrich, never override.
  • Local-first by design — the plan never waits on the network; cloud sync sits behind the local layer.
  • Every live fact carries a source, a confidence tag, and a 'last checked' time.

Challenges

  • Producing useful material ranges when users have not measured their yard without disguising uncertainty as precision.
  • Keeping AI, live-data adapters, and optional cloud sync additive so the core planner still works when every external service is absent.
  • The current catalog is Ontario-first; recommendations outside that region need broader data before they can claim the same grounding.
07

Outcome

#
“
A working local-first planning app live at bloomprint.online that chooses honest grounding — sourced facts, confidence tags, price ranges — over confident AI guesswork.
08

Roadmap & lessons

#

Lessons learned

  1. 01Deterministic-first earns trust a chatbot-first tool can't.
  2. 02Honest hedging — ranges, 'verify before buying' — reads as more credible than false precision.
  3. 03Local-first changes every assumption about state, sync, and failure.

Next steps

  1. 01Expand the catalog beyond Ontario
  2. 02Connect and evaluate live-data providers
  3. 03Add collaborative plan review

Related work

Web app

Nimbus

A passwordless cloud workspace for organizing, sharing, beaming, and asking questions about your files.

Web app

M4rketView

A free, no-key crypto dashboard with live prices, resilient public-data fallbacks, local portfolios, alerts, and comparison tools.

PreviousM4rketViewA free, no-key crypto dashboard with live prices, resilient public-data fallbacks, local portfolios, alerts, and comparison tools.
Back to all work
NextPolitiLensA political news intelligence dashboard for comparing how outlets across the spectrum frame the same story.
Back to archive
M4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYU
Crafted since 2024
ZhenXiao Mark YuZhenXiao Mark Yu
get in touch

Saw something here?Tell me about it.

It's a portfolio, not a service · but I read every note — drop a line if anything here resonated, or just to say hi.

Start a conversation
open channel

say hi anytime · 2026

--:--:--ESTOntario, Canada
  • Email
  • GitHub
  • dev.to
  • LinkedIn
  • Twitter / X
  • Instagram
  • Facebook
  • YouTube
  • CodePen
  • Spotify
  • Snapchat

Newsletter

Get the occasional dispatch

Notes and logs from m4rkyu.com — short, dated, no noise. Unsubscribe anytime.

Work

Production builds, games, and visual archives.

  • Projects
  • Games
  • Archive
  • Logs

Resources

Daily-use tools and a personal link library.

  • Search
  • Latest
  • Tools
  • Links
  • Notes
  • Topics
  • Shop
RSSJSON feed

Studio

Background, contact, and channels for collaboration.

  • About
  • Contact
  • Changelog
  • Colophon
  • Resumepending

Socials

Find me on the usual feeds.

  • GitHub
  • dev.to
  • LinkedIn
  • Twitter / X
  • Instagram
  • Facebook
  • YouTube
  • CodePen
  • Spotify
  • Snapchat
  • Email
© 2026 ZhenXiao Mark Yumarkyu0615@gmail.com
  • Email
  • GitHub
  • dev.to
  • LinkedIn
  • Twitter / X
  • Instagram
  • Facebook
  • YouTube
  • CodePen
  • Spotify
  • Snapchat
PrivacyTermsBuilt with Next.js 16 · React 19 · Tailwind 4