Launchpad Control Room Blueprint Release Train Operator Desk Signal Grid

shockstack v1 / convention-first monorepo

Build full-stack apps at lightning speed

Astro 5 SSR, Vue 3 islands, Tailwind 4, design tokens, Better Auth, and an optional .NET 10 backend all arrive pre-wired so the first useful commit comes fast.

Get Started View on GitHub

Frontend: Astro 5 + Vue 3
Theme engine: 19 token palettes
Backend lane: .NET 10 optional

Boot Sequence

bash

$ git clone https://github.com/codywilliamson/shockstack my-app

$ cd my-app && pnpm install

$ dotnet run --project backend/src/ShockStack.AppHost

-> postgres running on port 5432

-> api ready on https://localhost:7275

-> frontend ready on http://localhost:4321

check aspire dashboard on http://localhost:15888

Full-Stack Visibility

Operate the whole stack without losing the plot.

Keep the frontend, auth, token system, docs, and backend in one operating view so the repo stays legible as pages, features, and services start to stack up.

Open the Docs Browse Components

Live surfaces: 6 system views
Boot path: frontend -> api -> infra
Docs drift: kept low by default

system control surface channel 01

Astro SSR + Vue islands

Server-first pages with client islands only where interaction earns its keep.

Better Auth + middleware

Protected routes, shared sessions, and guardrails that carry into the API lane.

CSS vars + Tailwind theme

Theme values stay centralized, so redesigning the app never means chasing stray hex values.

.NET 10 + Aspire

Bring the API online when you need it, without re-architecting the frontend contract.

Current release lane

01 git clone + pnpm install

02 run token build once

03 boot frontend or full stack

04 ship from one repo

Architecture Map

Design the system before the boilerplate starts multiplying.

Start from the system map: routes, tokens, auth, and infrastructure stay connected from the first pass, so scaling the product feels like extension instead of cleanup.

Inspect the Theme See the structure

Tokens feed the visual language before components get duplicated.
Auth and middleware expectations are visible from the first page.
The backend stays optional, but the integration seams are already planned.

shockstack.system token-aware build plan

Astro routesVue islandscontent collectionsaccessible UI

design tokenstheme manifestshared authdocs

Cloudflare workerDockerAspire lanePostgres

Ship With A Plan

Present the stack like a shipping plan, not a feature pile.

Go from clone to first release on a predictable rhythm. Start with the frontend lane, fold in auth and data when they matter, and keep the path to launch obvious the whole way through.

Explore Use Cases See Pricing

release manifest v1 shipping lane

Window: first useful release in days, not weeks
Surface area: frontend, auth, tokens, backend lanes
Confidence: convention-first defaults reduce rewrites

Hour 0

Bootstrap the repo

Clone once, install once, and the project already knows where routes, content, tokens, and infrastructure live.

Day 1

Shape the product

Swap themes, design components, and define the first real pages before the stack gets in your way.

Day 3

Bring in auth + data

The middleware and backend seam are already in the design, so features land without a second architecture pass.

Launch

Ship from one lane

Deploy the frontend by itself or light up the full platform when the product needs it.

Builder Workspace

Give every moving part its own surface.

Keep docs, routes, auth, tokens, and deployment in arm's reach so the repo feels practical from day one and stays easy to reason about when the product gets busier.

Why ShockStack? Read the journal

Review surface: everything visible at once
Theme fit: token-driven styling only
Interaction: Astro shell with light Vue islands

work queue today

routes and content wired
theme tokens loaded
auth flow documented
deploy targets aligned

token deck midnight

Theme tokens shape the whole interface, so swapping palettes feels like a system-level move instead of a cosmetic repaint.

auth gate healthy

session cookies armed

middleware guards mapped

JWT handoff shared

deploy strip ready

frontend docs api postgres

One repo, one flow. Start with the frontend lane, then light up the rest when the product needs it.

Platform Status

Let the stack feel alive before anyone reads the fine print.

Track the parts that matter: theming, auth, docs, and deployment all stay visible, so the stack feels active and connected instead of frozen in a generic landing page pose.

Preview Themes Read the spec

stack signal stable

89% builder confidence

Theme telemetry

14 live palettes

Swap the entire site tone in one move because the design system starts at tokens, not component overrides.

Auth signal

guards wired in

Session flow, protected routes, and API handoff stay visible from the very first demo.

Deploy signal

frontend or full stack

Ship the Astro surface now, bring up the platform lane when the product asks for it.

Docs signal

spec stays close

The docs, theme showcase, and use-case pages make the stack explain itself instead of hiding behind marketing copy.

Everything you need, nothing you don't

Batteries included where it matters. Every piece is optional, swappable, and documented.

Astro 5 SSR

Island architecture with server-side rendering. Deploy to Cloudflare Workers or Docker.

Vue 3 Islands

Interactive components hydrate on demand. Ship zero JS by default, add reactivity where needed.

Design Tokens

Style Dictionary v5 generates CSS vars, Tailwind config, TS constants, and JSON from a single source.

Better Auth

Email/password and OAuth out of the box. JWT validation shared with the .NET backend.

.NET 10 Backend

Optional clean architecture API with EF Core, Aspire orchestration, and shared auth.

Tailwind 4

Latest Tailwind with Vite plugin integration. Token-powered theme with nineteen built-in palettes.

CI/CD Pipeline

GitHub Actions with semantic-release, commitlint, and automated deployments baked in.

Docker Ready

Multi-stage Dockerfiles, compose configs, and Aspire AppHost for single-command orchestration.

The stack, visualized

A layered architecture where every piece is independently useful.

Frontend

Astro 5 Vue 3 Tailwind 4 reka-ui

Shared

Design Tokens Better Auth Drizzle ORM JWT

Backend

.NET 10 EF Core Aspire Clean Arch

Infra

Docker Turborepo GitHub Actions Postgres

Planning Use Cases

Not sure where to start?

Tell us what you're building and we'll point you at the right setup — no guesswork, no over-building.

Question 1 of 5

What are you building?

Marketing + docs

A site whose job is content, SEO, and first impressions.

SaaS product

A marketing surface plus an authenticated app.

Internal tool

Ops, support, billing — used by your own team.

MVP / prototype

Small surface, shipping today, refactor tomorrow.

Storefront

Products, cart, checkout — conversion matters.

API / dev tool

Your product is an API, CLI, or SDK. The site sells it.

Or jump into the full picker →

Or browse featured builds

See every use case →

B2B SaaS Dashboard

Build an authenticated product UI with fast docs/marketing routes and interactive account features.

public marketing routes stay fast
private dashboard ships only needed JS

Include

Astro SSR Vue Islands Tailwind v4 Design Tokens Better Auth Drizzle ORM

Content + Docs Platform

Run docs, changelog, and blog content with optional light interactivity and theme controls.

SEO-first static content
clean writing workflow via content collections

Include

Astro SSR Tailwind v4 Design Tokens

E-commerce Storefront

Ship a fast, SEO-first storefront with interactive cart/checkout and a persistent product catalog.

category + product pages stay fast and indexable
cart + account flows hydrate only where needed

Include

Astro SSR Vue Islands Tailwind v4 Design Tokens Better Auth Drizzle ORM

Developer experience first

Clean APIs, sensible defaults, and code that reads like documentation.

tokens/dracula.json

{
  "color": {
    "accent": {
      "purple": {
        "$value": "#bd93f9"
      },
      "pink": {
        "$value": "#ff79c6"
      },
      "green": {
        "$value": "#50fa7b"
      }
    }
  }
}

Define once — generate CSS vars, Tailwind config, TS constants

pages/index.astro

---
import BaseLayout from "../layouts/BaseLayout.astro";
import Counter from "../components/Counter.vue";

export const prerender = true;
---

<BaseLayout title="Home">
  <h1 class="text-accent-purple">
    Hello ShockStack
  </h1>
  <Counter client:visible />
</BaseLayout>

Astro components with Vue islands that hydrate on demand

Quick Start

bash

# clone and install

$ git clone https://github.com/codywilliamson/shockstack my-app

$ cd my-app && pnpm install

# build design tokens

$ pnpm tokens:build

# start full stack (postgres, api, frontend, dashboard)

$ dotnet run --project backend/src/ShockStack.AppHost

# frontend-only development

$ pnpm --filter frontend dev

About this project

Why ShockStack?

ShockStack was born from years of building production apps and wanting a single, opinionated starting point that actually works. No starter-kit bloat, no half-baked integrations — just the patterns that have proven themselves in real projects, wired together with sensible defaults.

Built by Spectacle

ShockStack was developed by Spectacle Software for use across client projects and internal tools. It represents the distilled best practices from building modern full-stack applications for businesses of all sizes.

Ready to build something?

ShockStack gives you the architecture so you can focus on the product. Clone, customize, ship.

Read the Docs Star on GitHub

Need someone to build it for you?

Let Spectacle Software handle it

The one man team behind ShockStack builds custom web applications, APIs, and full-stack platforms for businesses. Same stack, same quality — tailored to your needs.

Get in Touch