03 Client work

Fracture By Design

A new storefront for ROTEM THE LABEL. The design is hers. I rebuilt it as a static site, connected its Buy buttons to the Shopify checkout she already runs, and host it while it waits for its own domain.

Client: ROTEM THE LABEL
My part: Static rebuild, checkout wiring, hosting
Built with: React, built to static files; Shopify cart permalinks
Rebuild: learntocode.academy (temporary, not indexed)
Her store: fracturebydesign.com (Shopify, unchanged)

Design: ROTEM THE LABEL
Rebuild, checkout wiring, hosting: Angel Melendez

Her store at fracturebydesign.com is still her own Shopify site. The rebuild lives at learntocode.academy, a temporary address that asks search engines not to index it.

The rebuilt Fracture By Design home page in a desktop browser: white hand-drawn lines on black under the headline “What is your breaking point?” — The rebuild at learntocode.academy on 19 October 2026, 10:13 EDT. Desktop 1440 × 900, phone 390 × 844. Design by ROTEM THE LABEL.

The same page on a phone, the drawing filling the screen under the headline. — The rebuild at learntocode.academy on 19 October 2026, 10:13 EDT. Desktop 1440 × 900, phone 390 × 844. Design by ROTEM THE LABEL.

Problem

A design that couldn’t run on its own

Her new site arrived as a React app wired to a hosted backend that had never been deployed, so the code couldn’t run anywhere as it was. Her products and her checkout already lived on Shopify, and they had to stay there.

What I built

Her code first, then as few changes as possible

The first commit is her code, untouched, so every later change reads as a diff against her design, and a new version from her can be compared before anything from it is brought in.

If she sends a new version, the diff shows exactly what she changed.

Then the parts tied to the missing backend came out: a database call at the top of 14 files, the backend’s client library and its sign-in gate.

Her media moved into the site itself, and every Buy button became a Shopify cart permalink. Tapping Buy takes the shopper to the checkout she already uses.

Each deploy goes into its own release folder; a current link switches to it in one step, and the last three releases stay on disk for rollback. The deploy script lints and builds first, puts the previous configuration back if the new one fails its syntax check, and checks the version file and the routes after the switch.

Constraints

Why her domain hasn’t moved yet

Shopify’s checkout runs on the store’s primary domain. If fracturebydesign.com pointed at the static site first, checkout would land inside it and her sales would stop. So the order is written down: move Shopify’s primary domain to a shop subdomain, then point the main domain at the rebuild. Until she decides, her live store stays exactly as it is.

How it compares

Two builds, measured

Her current Shopify store and the rebuild of her new design, each loaded three times by Lighthouse as a mid-range phone on a throttled connection. The table shows the median run. These are two different designs on two different platforms, so it compares what each one asks a phone to do, not which design is better.

Lighthouse 13.5, mobile, median of three runs, 19 October 2026
Measure	Her Shopify store	The rebuild
Scores higher is better, out of 100
Performance	100	98
Accessibility	97	95
Best practices	77	100
SEO the rebuild is noindex on purpose	100	58
Timings lower is better
First contentful paint	0.9 s	1.7 s
Largest contentful paint	1.2 s	2.1 s
Speed index	2.6 s	1.7 s
Total blocking time	34 ms	3 ms
Main-thread work	2.0 s	0.4 s
Layout shift	0.016	0
Download lower is better
Transferred	11.2 MB	3.1 MB
Requests	246	18
Other origins contacted	3	0
Video	8.0 MB	2.7 MB
Images	1.8 MB	0.3 MB
Scripts	282 kB	80 kB
The page’s HTML	39.6 kB	1.6 kB

Measured 19 October 2026 between 16:01 and 16:02 UTC with Lighthouse 13.5.0 in headless Chrome 155: mobile preset, simulated throttling, a fresh load each run. Sizes are bytes over the wire; 1 kB is 1,000 bytes and 1 MB is 1,000,000. The bold value in each row is the better one.

What changed

Lighter, and not yet first to paint

The rebuild asks a phone for 18 files instead of 246, about 3.1 MB instead of 11.2, and all of it comes from its own address. Most of the store’s weight is video: 13 media requests, about 8 MB, against a single 2.7 MB film in the rebuild.

Lighthouse still paints her store first, 0.9 s against 1.7 s for the first content. Her store’s HTML arrives with the page already in it. The rebuild is still the client-rendered React app she handed over: a 1.6 kB HTML shell that stays blank until an 80 kB script has run. Prerendering it would remove that wait.

Same lesson as the RegenerateMX case study, from the other side.

The run also found three things to fix in the rebuild: its robots.txt is answered by the app’s HTML fallback, two small labels in the footer fall below 4.5:1 contrast, and one link’s accessible name leaves out its visible text. Its low SEO score is mostly deliberate: the temporary address sends noindex.