Ship your own app this week.

Pick one job

The best apps do one thing and open straight to it.

Before you build, finish this sentence: "When someone opens my app, they immediately ___." If the answer has an "and" in it, you have two apps.

The standalone rule

• The first screen is the job. No splash page, no menu, no "welcome". A host stand opens to the tables. A tip calculator opens to the keypad.
• Everything else goes behind one button. Settings, history, help and links to your other products sit behind a single "More" button.
• It works on a phone first. Design for one thumb, 390px wide. A tablet and a laptop are bonuses.

Write it down

Build it

Start from a working app shell, then fill in your one job by hand or with AI.

Step 1: make your starter kit

The kit is a ready-to-install app. It already passes every App Store check: it has a manifest, icons, offline support and a push notifications hook. Pick a name and a color, then download it.

Inside the zip: index.html (your app), manifest.webmanifest, sw.js (offline + push), icon-192.png, icon-512.png, icon-maskable-512.png, privacy.html and a README.txt.

Step 2: fill in your one job

Make it installable

These pieces turn a web page into an app with its own icon on the home screen.

The starter kit already has all of them. Use this list to check your app, or to upgrade an app you built elsewhere. These are the same checks the App Store runs automatically.

The manifest, explained

{
  "name": "My App",
  "short_name": "MyApp",
  "description": "What it does in one sentence.",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#121110",
  "theme_color": "#121110",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "screenshots": [
    { "src": "/shot-phone.png", "sizes": "1170x2532", "type": "image/png", "form_factor": "narrow" },
    { "src": "/shot-wide.png",  "sizes": "2560x1600", "type": "image/png", "form_factor": "wide" }
  ]
}

Put it online for free

Pick one host. All three are free, give you HTTPS and a link to share, and take a few minutes.

Then test it on your phone

• iPhone: open the link in Safari, tap Share, then "Add to Home Screen". Open it from the new icon.
• Android: open it in Chrome and tap "Install app" when prompted (or ⋮ → "Install app").

Add push notifications

Web Plug Push sends notifications to iPhone and Android for free. You don't need an Apple or Google developer account.

How it works on each phone

Step 1: register your app

Enter your app's live address from lesson 4. You'll get an app ID and a secret. The secret is shown only once, so save it somewhere safe and never put it in your web page.

Step 2: add two lines to your app

In sw.js (the starter kit already has this line, commented out):

importScripts('https://yfhihuqcbpnlhgcobuej.supabase.co/functions/v1/push/sw.js');

In index.html, load the SDK and add a "Turn on notifications" button:

<script src="https://yfhihuqcbpnlhgcobuej.supabase.co/functions/v1/push/sdk.js"></script>
<button id="notify">Turn on notifications</button>
<script>
  WebPlugPush.init({ app: 'my-app' });
  document.getElementById('notify').onclick = async () => {
    const r = await WebPlugPush.subscribe({ user: 'optional-user-id', tags: ['news'] });
    if (r.ok) alert('Notifications are on!');
    else if (r.reason === 'install-first') alert('On iPhone: tap Share → Add to Home Screen, then open the app from your home screen and tap this again.');
    else alert('Notifications are off: ' + r.reason);
  };
</script>

Step 3: send a notification

Send from your server, a script, Zapier or even your terminal. Never send from the web page itself, because that would expose your secret.

curl -X POST https://yfhihuqcbpnlhgcobuej.supabase.co/functions/v1/push/send \
  -H "Authorization: Bearer YOUR_SECRET" \
  -H "Content-Type: application/json" \
  -d '{"title":"Your order is ready","body":"Come grab it at the counter","url":"/"}'

To reach only some people, add "user": "id", "users": [...] or "tags": ["news"]. Add "count": 3 to set the badge on the app icon. The response tells you how many people it reached, and expired subscriptions are cleaned up automatically.

List it on the Web Plug App Store

Free listing, a real store page, reviews and install instructions for every phone.

1. Go to apps.webplug.co/submit and paste your app's address.
2. Press Check my app. It runs the 7 checks from lesson 3 and tells you exactly what's missing.
3. Fill in a one-line subtitle, a description, up to four features, your price ("Free" is fine), a contact email and your privacy page (the starter kit includes one).
4. Agree to the Listing Rules and submit. A person reviews it against the rules. We don't audit your code; we check that it's what it says it is.

Going native (App Store & Google Play)

Your web app already installs and sends push. Go native only when you need the big stores.

What it takes

• Apple: a developer account ($99/year, in your own name or company), plus App Review. Apple rejects apps that are just a website in a wrapper, so your app needs real app features.
• Google Play: a developer account ($25 once). New personal accounts must run a closed test with testers before going public.
• Push in native apps goes through Apple's and Google's own push services instead of Web Plug Push.

You shipped an app.

Finish the lessons above, then come back here.