Design is more than what you see

Web apps, mobile apps, games and large business systems all rest on planning, design and architecture. Scroll on to see the layers behind some of Stellar Brilliance's work.

Start a project Take it apart

The page Design

The catalog at gaminggalaxy.net: three games that run in the browser, and a nickname that follows you between them.

gaminggalaxy.netLiveOpen

The Gaming Galaxy site at gaminggalaxy.net

The parts Build

The site is a shell around the games. Each game is its own repo and its own deployment, shown in a frame.

gaminggalaxy.net

Site headerPlaying asPitch, Play nowFeatured gameDo The Thing

Duck Party Hub

SALVO

The code BuildFrom the repo

Every game is one entry in this registry. The site never imports game code.

Gaming Galaxy, src/games/registry.ts (trimmed)TypeScript

{
  slug: 'do-the-thing',
  frame: 'portrait',
  bundlePath: '/games/do-the-thing/index.html',
  identity: { messageType: 'gauntlet:identity' },
  leaderboard: { serverEnv: 'DO_THE_THING_SERVER_URL' },
},

Keeping it up Run

We host it: a plain Node container with a health check, and daily boards proxied through the site.

Site, Node containerGames, own deploymentsDaily boards, proxied

Response: 165 ms
Reports: 3 games in the catalog
Checked: Oct 19, 10:10 UTC, by this site

gaminggalaxy.net GET /api/health 200 OK

The page Design

starhe.art: drop or paste files anywhere on the page and they are in your album.

starhe.artLiveOpen

The parts Build

The whole page is the drop target. A draft lives in the browser and survives closing the tab.

starhe.art

Header, Add filesDrop target: the whole pageUpload panelChoose files

The code BuildFrom the repo

An album can be taken down sooner. It is never kept up longer than the link promised.

StarHeart, AlbumController.cs (trimmed)C#

/// Only ever brings the expiry *forward*. Pushing it
/// out would break the promise the viewer was given.
[HttpPost("{albumKey}/expire")]
public async Task<IActionResult> Expire(
    [FromRoute] string albumKey,
    [FromBody] ExpireAlbumRequest? request)

Keeping it up Run

We host it. Watermarks and conversions run in a separate worker container, off the request.

API, .NETWorker, off the requestMySQL

Response: 220 ms
Reports: ready
Checked: Oct 19, 10:10 UTC, by this site

starhe.art GET /health/ready 200 OK

The page Design

syncopation.app: a blacklight tent wall introduces the app, with a sign-up form for release news.

syncopation.appLiveOpen

The parts Build

The pointer acts as a UV lamp. A relay map shows how messages move between nearby phones.

syncopation.app

Syncopation wordmarkBlacklight wall and app pitchRelease sign-up

The code BuildFrom the repo

Sign-ups are appended to a file before email is tried, so a mail outage does not lose them.

SyncopationWebsite, src/lib/signup/store.tsTypeScript

export async function storeSignup(record: StoredSignup): Promise<void> {
  const dir = dataDir();
  await mkdir(dir, { recursive: true });
  await appendFile(path.join(dir, 'signups.jsonl'), JSON.stringify(record) + '\n', 'utf8');
}

Keeping it up Run

The site runs in a Node container. Its health endpoint checks the sign-up store and mail configuration.

Site, Node containerSign-ups, stored firstEmail, optional

Response: 204 ms
Checked: Oct 19, 10:10 UTC, by this site

syncopation.app GET /api/health 200 OK

The page Design

radiant.rentals: why booking direct beats a platform, and a request that goes straight to the host.

radiant.rentalsLiveOpen

The Radiant Rentals site at radiant.rentals

The parts Build

Every home gets the same page shape: photos, sleeping arrangement, amenities and location.

radiant.rentals

Nav, Request a stayWhy book directBook direct, send a requestOr a platform

The code BuildIllustrative

Plain HTML and CSS with one deferred script. The next home is a new page from the same template.

HTMLIllustrative

<!-- Same template for every home -->
<main class="home">
  <section class="gallery">…</section>
  <section class="amenities">…</section>
  <form class="request">…</form>
</main>
<script src="/site.js" defer></script>

Keeping it up Run

We host the static site behind Cloudflare. The booking form sends requests to the host. This site checks its health endpoint.

Site, static pagesAssets, CloudflareBooking requests

Response: 295 ms
Checked: Oct 19, 10:10 UTC, by this site

radiant.rentals GET /api/health 200 OK

The page Design

deckbrewer.com: paste a decklist or import a deck URL to check a Commander deck.

deckbrewer.comLiveOpen

The parts Build

The deck editor feeds the analysis panels. Changes to cards and their roles update the report.

deckbrewer.com

NavigationDeck editorImport and editing controlsDeck summary and analysis

The code BuildFrom the repo

Land-drop and opening-hand odds use the probability of drawing cards without replacement.

DeckBrewerWebsite, src/lib/analysis/hypergeometric.ts (excerpt)TypeScript

const hi = Math.min(p.n, p.K);
if (kk > hi) return 0;
let total = 0;
for (let i = kk; i <= hi; i++) total += hypergeomPmf(p.N, p.K, p.n, i);
return total > 1 ? 1 : total;

Keeping it up Run

One Node container serves the app and its card data. Account decks live in SQLite on a persistent volume.

App, Node containerCard data, ScryfallAccounts, SQLite

Response: 255 ms
Checked: Oct 19, 10:10 UTC, by this site

deckbrewer.com GET / 200 OK

The page Design

ravestars.cc, for an Old School RuneScape group: pages for members, free tools for any player.

ravestars.ccLiveOpen

The parts Build

Group pages and tools are built from the same components, so the site reads as one place.

ravestars.cc

Shared navGroup introGroup pagesFree tools

The code BuildIllustrative

One panel component, shared by a group page and a calculator.

ReactIllustrative

// Group pages and tools share it.
function Panel({ title, children }) {
  return <section className={s.panel} aria-label={title}>{children}</section>;
}
<Panel title="Skill of the Week" />
<Panel title="Calculators" />

Keeping it up Run

We host the site, including the group pages and free player tools. This site checks whether ravestars.cc answers.

Site, hosted by usGroup pagesFree tools

Response: 334 ms
Checked: Oct 19, 10:10 UTC, by this site

ravestars.cc GET / 200 OK

The page Design

The catalog at gaminggalaxy.net: three games that run in the browser, and a nickname that follows you between them.

The parts Build

The site is a shell around the games. Each game is its own repo and its own deployment, shown in a frame.

The code BuildFrom the repo

Every game is one entry in this registry. The site never imports game code.

Keeping it up Run

We host it: a plain Node container with a health check, and daily boards proxied through the site.

Read the Gaming Galaxy case study

Whatever your software needs, Stellar Brilliance would love to hear from you

We love planning, designing, implementing, and deploying high quality software of all shapes and sizes. Tell us what it is and who uses it. We can take it from the first page to the server, or do only the layers you need.

Start a project