Vertical Slice Frontend: Add a Folder, Everything Works

Status: Draft — fill in the sections marked with ✍️
Target: dev.to + Discord Astro #showcase
Timing: Publish alongside stnd.build going public (May 2026)

My thing

At some point I just
✍️ Start with the frustration. You’ve been there — you want to add a blog to a site and suddenly you’re touching 5 files in 5 different folders. A route file here, a component there, a nav config somewhere else, a CSS file in yet another place. You forget one and the whole thing breaks silently. Now multiply that by a dozen features across three sites.

What if adding a feature to a website was as simple as adding a folder? And removing it was as simple as deleting that folder? No config files to update. No imports to manage. The menus rebuild themselves.

That’s what I built with stnd.build — a modular abstraction layer on top of Astro that uses Vertical Slice Architecture to make every feature completely self-contained.

What is Vertical Slice Architecture?

✍️ Explain the concept simply. Most frontend projects are organized horizontally — components in one folder, pages in another, styles in another, utils in another. Vertical Slice flips this: each feature gets its own folder containing everything it needs — server code, client code, styles, config. The feature is the unit of organization, not the file type.

Draw the comparison:

# Horizontal (traditional)
/components/BlogCard.astro
/pages/blog/index.astro
/pages/blog/[slug].astro
/styles/blog.css
/config/nav.ts  ← you have to register the blog here manually

# Vertical Slice (stnd.build)
/features/blog/
  ├── pages/index.astro
  ├── pages/[slug].astro
  ├── components/BlogCard.astro
  ├── styles/blog.css
  └── register.ts  ← self-registers into nav, routes, everything

How stnd.build Implements This on Astro

✍️ This is the technical meat. Explain:

How modules self-register (the register.ts pattern)
How the navigation rebuilds automatically when you add/remove a folder
How this works with Astro’s file-based routing
Show a concrete example: “Here’s what happens when I add a shop feature to a site that already has a blog”

The Self-Registration Pattern

✍️ Code example of how a module declares itself to the system

✍️ Code example of how the nav reads registered modules

Three Sites, One Framework

✍️ Briefly show that stnd.build powers three different sites (ADE, portfolio, Standard Garden) with different feature sets — same framework, different folders enabled.

Why This Matters

✍️ Connect to the bigger picture:

For solo developers and small teams, this reduces cognitive overhead dramatically
For agencies building multiple client sites, this is a template system that actually works
For the Astro ecosystem, this is a pattern that could benefit the community
The same architectural thinking (modular, self-contained, extensible) applies beyond the web — I use it in my Home Assistant setup (link to Mood Controller article) and I’m starting to apply it to physical computing projects

Try It Yourself

GitHub: [link to repo]
Landing page: stnd.build

The framework is open source. If you’re building content-driven sites on Astro and you’re tired of scattered feature code, give it a look. Issues and contributions welcome.

Francis Fontaine is a developer and photographer based in Québec City. He builds modular systems for the web and for the physical world.