Builder Toolkit · 09 / 11

Deployment QA

Check your build before and after shipping so the link you share actually works for other people.

Deployment QA

What this is

Deployment QA is the short pass you run before sharing a link, and again straight after deploying.

It is not debugging. It is the check that finds the problem before someone else does.

The one idea

Your build works on your machine, in your browser, at your screen size, with your files cached. None of that is true for the person opening your link.

Why it matters

The most common way a first build embarrasses its builder is not a crash. It is a link shared in a group chat that opens broken on a phone, because every check happened on a laptop.

Ten minutes of structured checking prevents almost all of it.

What to do

Before you push

npm run build succeeds locally, not just npm run dev.
git status shows no .env or secret files waiting to be committed.
The main action of your project works end to end.
No placeholder text like lorem ipsum or TODO is visible.

npm run dev and npm run build are different. Dev is forgiving. Build is what your host runs, and it catches errors dev hides.

After you deploy

Open the live URL, not localhost, and work through these:

Check	How	Looking for
Loads at all	Open the production URL	The current version, not an old one
Phone width	Real phone, or browser at 390px wide	Sideways scrolling, cut-off text
Main action	Do the thing the project is for	It completes without errors
Links	Click every one	No 404s, no dead buttons
Console	Open developer tools, Console tab	Red errors
Fresh eyes	Private or incognito window	Anything that only worked because you were logged in or cached

Do this now

Open your live URL in a private browsing window on your phone. That single check catches caching problems, layout problems, and login assumptions at once.

Check yourself

I tested the live URL, not localhost.
I tested on a phone or at phone width.
I tested in a private window.
I clicked every link and ran the main action.
The browser console shows no red errors.

Horizontal overflow

Sideways scrolling on a phone is the single most common visual defect in beginner builds. It usually comes from a fixed width, a wide table, or a long unbroken string.

Narrow your browser to 390 pixels. If a horizontal scrollbar appears, something inside is wider than the screen.

If a check fails

This page finds problems. It does not fix them. Take what you found to Deployment troubleshooting or Reading errors.

Common mistakes

Testing localhost and calling it shipped.
Checking only on the laptop the project was built on.
Sharing the link before opening it once yourself.
Ignoring console errors because the page still looks fine.
Testing while logged in, so a signed-out visitor sees something completely different.
Skipping npm run build because dev worked.

Next step

Your build is genuinely shippable. If it needs to save data, continue to Supabase Basics.