startup
beginner
Webomage.com Stack
Solution Components
astro
react
tailwind
supabase
vercel
Architecture Visual
flowchart TD
User("<div class='tech-node'><img src='/icons/inframap/user.png' /><span>User</span></div>")
Edge("<div class='tech-node'><img src='/icons/tech/cloudflare.svg' /><span>Cloudflare Edge</span></div>")
Astro("<div class='tech-node'><img src='/icons/tech/astro.svg' /><span>Astro SSR</span></div>")
Island("<div class='tech-node'><img src='/icons/tech/svelte.svg' /><span>Svelte Island</span></div>")
Supabase("<div class='tech-node'><img src='/icons/tech/supabase.svg' /><span>Supabase</span></div>")
User -->|HTTPS| Edge
Edge -->|Server Render| Astro
Astro -->|Hydrate| Island
Island -->|RPC/Fetch| Supabase
Webomage.com Architecture
You are looking at it. This portal was built to demonstrate that you can have a "Premium" feel without a premium price tag. The entire site is deployed for free on Vercel, with dynamic features handled by Supabase Edge Functions.
Architecture
- Astro: The meta-framework. It generates static HTML for 95% of the site (Documentation, Landing Pages) for maximum SEO/Performance.
- React Islands: Used only for the interactive bits (Cost Estimator, Filters, Comparison Tool).
- Supabase:
- Edge Functions: Generates OG Images on the fly.
- Storage: Hosts the diagram images.
- Mermaid.js: All diagrams are code. This allows us to "Compile" diagrams into SVG/PNGs.
Use Cases
- Documentation Sites: Fast, searchable, and SEO-friendly.
- Portfolios: Showcase work with high-performance visuals.
- Content Marketing: Blogs that load instantly.
Implementation Guide
How we implemented the "Interactive Cost Estimator".
Prerequisites
- Astro 4.0
- Supabase
Step 1: The Astro Page
We pass static data (the blueprint details) into a React component.
/* src/pages/blueprints/[...slug].astro */
---
import CostEstimator from '../../components/CostEstimator';
const { entry } = Astro.props;
---
<Layout>
<h1>{entry.data.title}</h1>
<!-- Hydrate this island immediately -->
<CostEstimator
client:load
baseCost={entry.data.estimatedCost}
/>
</Layout>
Step 2: The React Component
This runs in the browser.
/* src/components/CostEstimator.jsx */
import { useState } from 'react';
export default function CostEstimator({ baseCost }) {
const [scale, setScale] = useState(1); // 1x, 10x, 100x traffic
return (
<div className="p-4 border rounded-xl glass-panel">
<h3>Cloud Cost Calculator</h3>
<input
type="range"
min="1" max="100"
onChange={(e) => setScale(e.target.value)}
/>
<div className="text-4xl font-bold text-emerald-400">
${(baseCost * scale).toLocaleString()} / month
</div>
</div>
);
}
Step 3: View Transitions
Astro 4.0 makes the site feel like a SPA (Single Page App) even though it's Multi-Page.
/* src/layouts/Layout.astro */
---
import { ViewTransitions } from 'astro:transitions';
---
<head>
<ViewTransitions />
</head>
Now, clicking a link doesn't do a full page refresh. The browser swaps the DOM content and animates the difference.
Production Readiness Checklist
- OG Images: Don't let social cards be an afterthought. We use a custom Edge Function to generate them dynamically based on the blueprint title.
- Semantic HTML: Use
<article>,<aside>, and<nav>so Screen Readers can navigate the complex layout. - Tailwind Config: Use a custom
tailwind.config.mjsto enforce consistent colors (e.g.,emerald-400for primary actions) across all components. - Analytics: Use privacy-friendly analytics (Vercel Analytics or Plausible) to track which blueprints are most popular without cookies.
Cloud Cost Estimator
Dynamic Pricing Calculator
$0 / month
MVP (1x) Startup (5x) Growth (20x) Scale (100x)
MVP Level
Compute Resources
$ 15
Database Storage
$ 25
Load Balancer
$ 10
CDN / Bandwidth
$ 5
* Estimates vary by provider & region