logo
Published on

Stairno 0. The Whole Roadmap

Authors
  • avatar
    Name
    seren-wib
    Twitter
Contents

The first post in a development log of Stairno, a brand I build on my own. It is written so that non-developers can follow from the start. When a term is new, its link takes you to that entry in a glossary post.

1. What is Stairno

Stairno is a brand that gathers the things I make under one name. I take freelance work for other people, make games, and build and sell small programs and web services. Run separately, those three would mean three names, three sites and three accounts. So I tied them together.

The name comes from stairno, "star" in Gothic (an old Germanic language). Read in English, it contains stair. I chose it for the image of a star climbing one step at a time from the ground.

2. Why four sites

Stairno's overall structure

Solid lines are live today, dashed lines are planned (the labels in the diagram are in Korean)

SiteRole
stairno.comThe hub. Introduces Stairno and sends people to each site. Sells nothing
stairnoworks.comWorks. The freelance desk: requests, quotes, deposits, progress
stairnogames.comGames. The home of the game Vane
stairnolabs.comLabs. Catalog and store for Stairno products. Desktop programs are bought and downloaded here

They do completely different things, so they are separate sites. Someone looking to hire a freelancer and someone looking for a game have no reason to wander the same page. The hub is the front gate in between that only shows "this is what Stairno does". All four domains were bought on 17 October 2026.

3. Why one account

Four sites easily turn into four sign-ins and four payment systems: a sign-up form on every site, a payment provider on every site, a refund process on every site. For someone running everything alone, that means doing the same work four times, with four times the bugs and security holes.

So I decided to build it like an Amazon account.

  • One Stairno account signs you into every Stairno site and product except the hub
  • Register a card once
  • See purchases, subscriptions and downloads in one account center (account.stairno.com)
  • Payments, subscriptions and entitlements are handled in one shared API (api.stairno.com)

The other sites do not build sign-in or payments themselves. They just call these two. That is why every arrow in the diagram above gathers in the middle band. The hub has no account screens and no payments, only an account menu in the header.

4. Roadmap

I set the order on 18 October 2026. There are no dates, only order.

StepTaskWhat it coversStatus
1Shared design package stairno-uiPull the hub's colors, fonts, header and footer out so every site uses the same look✅ Done
2Account center documentsProject plan, requirements and design specifications. First, an experiment on whether sign-in works across domains✅ Done
3Account center, part 1: sign-inSign-up, sign-in, verification mail, device management, a sign-in gateway for sites. Live✅ Done
4Account center, part 2: payments (test mode)Card registration, one-time payments, subscriptions, refunds, payment mail. No real money moves✅ Done
5stairnolabs.comProduct catalog → payments and downloads. The first site to connect to Stairno accounts
6stairnoworks.comService introduction → requests, quotes, deposits
7stairnogames.comVane introduction and dev diary
8First product launchOpen atlas-odyssey, a learning roadmap service, for free with Stairno accounts
9Business registration → real paymentsSign a contract with the payment provider and swap the test keys for real keys
10VaneStarting from one playable section

Why this order

  • The design package comes first. So that every site, starting with the account center, begins with the same look as the hub. Building sites first and matching the look later means fixing every site
  • The account center and API come before the sites. Every other site calls these two. They are the only servers, and the sites start as introduction pages and add sign-in and payments later only where needed
  • Real payments are step 9. Taking real money requires business registration and a provider contract first. Until then every payment is in test mode, and the design makes switching a matter of swapping keys
  • Works comes after Labs. A freelance site becomes useful once a few reviews have piled up. Until then, freelance work comes through freelance platforms

5. Where things stand

DateWhat happened
16 OctoberThe brand name Stairno and the four-site structure settled
17 OctoberFour domains bought. The hub stairno.com went live. Decided to split accounts and payments into their own project
18 OctoberRoadmap set. Steps 1–3 done, sign-in live. Payments built and first release v0.4.0
19 OctoberAccount center redesign v0.4.1. Payment rehearsal tool
Early hours of 20 OctoberTwo production bugs fixed in a hurry (v0.4.2). Production payment rehearsal: 8 of 10 passed
21 OctoberThe last two rehearsal scenarios (three failed renewals, mail in both languages) passed. All 10 passed
22 OctoberRehearsal cleanup, shared documents brought in line, operating procedures written, pending changes shipped as v0.4.3. Step 4 done

Step 4 is done. All 10 production payment rehearsal scenarios passed. The rehearsal scripts and connection details are gone, the shared documents match the Markdown originals again, and the pending changes shipped as v0.4.3. The closing day is in section 12 of part 4a. Step 5, Labs, is next, but first come the jobs the rehearsal turned up: refund requests in the account center, "keep me signed in", and three bugs found along the way.

The pace may look oddly fast. The plan said 1–2 weeks for sign-in and 2–3 weeks for payments, but the code went in within a day. Most of the code was written by an AI coding agent (Claude Code). I set the scope and made the decisions, checked the results, and did what a person has to do, such as dashboard settings and entering cards. That speed also meant missing things, and each post says so openly.

6. Working principles

Four principles run through the whole series. They come back in each post.

  1. Can one person run it? Technology is chosen not for "does it look impressive" but for "is it less work to run alone". One language (TypeScript), servers someone else manages, fixed costs close to zero
  2. Documents first. Before code, write the project plan, requirements and design specifications. If documents and code disagree, fix one of them in the same change
  3. Tests first. TDD. Write a failing test first, then make it pass
  4. Check in production. Do not stop at passing tests. At the end of each stage, go through the acceptance checklist item by item on the real service address

7. Series contents

PostRoadmap stepContent
Stairno 1. The shared design package1Pulling the hub's look out so every site can share it
Stairno 2. The plan and the cross-domain sign-in experiment2Four documents, and an experiment on "does this really work"
Stairno 3. Building sign-in and going live3From an empty repo to production
Stairno 4. Building payments4Card registration, payments, subscriptions, refunds
Stairno 4a. The production payment rehearsal4What came out of running it on production (all 10 passed)

There are five glossary posts.

PostCovers
Web Basics GlossaryDomains, servers, APIs, cookies, sessions, status codes
Sign-in Basics GlossaryOIDC, tokens, JWT, PKCE, hashing
Online Payments Basics GlossaryProviders, billing keys, webhooks, idempotency, state machines
Development and Operations Basics GlossaryGit, TDD, CI/CD, deploying, secrets, databases
Cloudflare Basics GlossaryWorkers, regions and latency, R2, wrangler

8. Tools in this series

No need to be put off by the names. They are all "parts someone else made".

NameOne-line descriptionUsed for
TypeScriptJavaScript plus checks like "this value is a number"Everything
AstroA framework for building web pagesThe hub, account center screens
HonoA lightweight framework for building APIsThe shared API
Better AuthAn auth component bundling sign-up, sign-in, sessions and a sign-in gateway for other sitesThe shared API
Cloudflare Workers, PagesPlaces to run code and host sites without a server machineEvery site and the API
NeonA PostgreSQL DB rented in the cloudAccounts, orders, payment records
DrizzleA tool for defining and using DB tables in TypeScript codeThe shared API
ResendA service that sends service mail (verification mail, receipts)The shared API
Toss Payments, PayPalPayment providers. Korean won at home, US dollars abroadThe shared API
VitestA tool that runs testsEverything
GitHub ActionsAutomation that runs tests and deploys on every pushEverything
Claude CodeAn AI coding agentEverything

9. Repos

RepoContent
seren-wib/stairno.comThe hub
seren-wib/stairno-uiThe shared design package @stairno/ui
seren-wib/account.stairno.comThe account center and the shared API

Next: Stairno 1. The shared design package