Seven Star Collective — Zion Boggan

Private repository. Source is not public. No API keys, connection strings, or Supabase project identifiers appear in this writeup.

What it is

Seven Star Collective is the full digital presence for a personal-training brand: a merch store with variant support and a cart, a session booking system with a weekly availability calendar, a structured multi-level workout challenge with progress tracking, a blog, and virtual coaching packages, all as a single-page React app deployed to Cloudflare Pages.

The stack is React + TypeScript + Vite with shadcn/ui components and Tailwind for styling. The backend is Supabase: PostgreSQL for data, Auth for user sessions, and Edge Functions for the two server-side operations that can't run client-side (Stripe Checkout session creation and appointment writes). GitHub Actions builds and deploys on every push to main.

Store and cart

The merch section sells physical and digital products (apparel, coaching packages, workout PDFs). Each ProductCard component handles hover image swap via CSS transitions and delegates add-to-cart to a shared CartContext. The cart slides in as a Sheet overlay and hands off to a Supabase Edge Function that creates a Stripe Checkout session. The client never sees the Stripe secret key.

Product variant selection (size, color) is handled at the detail page level. Physical vs digital is a flag on the line item; the Edge Function uses it to skip shipping-address collection for digital-only carts.

src/components/CartSheet.tsx: Stripe Checkout handoff via Edge Function
const handleCheckout = async () => {
  if (items.length === 0) {
    toast.error('Your cart is empty');
    return;
  }
  setIsCheckingOut(true);
  try {
    const { data, error } = await supabase.functions.invoke('create-checkout', {
      body: {
        items: items.map(item => ({
          name: item.name,
          price: item.price,
          quantity: item.quantity,
          variant: item.variant,
          slug: item.slug,
          isPhysical: item.isPhysical,
        }))
      },
    });
    if (error) throw error;
    if (data?.url) {
      window.location.href = data.url;
    }
  } catch (error) {
    toast.error('Failed to start checkout. Please try again.');
  } finally {
    setIsCheckingOut(false);
  }
};

Booking calendar and challenge system

The booking flow is a three-step wizard: pick a date from the calendar, pick a time slot from the available windows for that day, then submit contact info validated with Zod before the appointment record goes to Supabase. An admin panel (route-guarded) lets the trainer add custom appointment blocks and manage packages.

The workout challenge system tracks a user through multiple levels with downloadable PDF workout plans, a weekly schedule view, and a countdown to the active week. A ChallengeAnnouncementBanner surfaces active challenge windows; LevelSelector gates access based on which packages the user has purchased.