Mozilla Billionaire Blast-Off

This is a Next.js 15+ TypeScript monorepo for the Mozilla "Billionaire Blast-Off" microsite. It features a HeroUI component library, Tailwind CSS v4 with a customized plugin, Sanity CMS Studio for content management, and the Flags SDK for feature flags.

Table ofContents

• Project Overview
• Documentation
• Features
• Prerequisites
• Getting Started
• Environment Variables
• Project Structure
• Packages Overview
• Available Scripts
• Architecture & Technologies
• Quality Gates
• Contributing
• License

---

Project Overview

Project name: Mozilla Billionaire Blast-Off
Owners: Platform / Project Owner (fill in CODEOWNERS)
Slack/Comms: #platform or project channel
Live URLs: preview via Vercel; production via Vercel/AWS (per project)

Summary: "Billionaire Blast-Off" is an interactive microsite designed to promote Firefox’s “Open What You Want” positioning through a satirical, Gen Z–friendly creative lens. Users can build their own billionaire avatar and learn about data privacy in a playful way. The project is built on a white-label Next.js + Sanity starter that provides a production-ready foundation for quickly shipping client sites. The primary goal is to drive awareness, not data collection, with no PII being stored.

Goals / Success Metrics:

• Volume of avatars generated.
• Engagement with playpen actions.
• Return rate (users revisiting via hash/URL).
• Social sharing (tracked via outbound links, not user IDs).

---

Documentation

For more in-depth information, please see the following documents:

• Product Requirements Document (PRD): Detailed information on campaign goals, user experience flow, success metrics, and constraints.
• Engineering Playbook: A comprehensive guide to the technical architecture, database schema, security measures, and deployment process.
• Frontend Documentation
• CMS Documentation
• Architecture Documentation
• Environments Documentation

---

Features

• Avatar Builder: Users can create a custom billionaire avatar by answering a 7-question quiz or get a randomly generated one. Avatars and bios are generated via an LLM API.
• Unique Avatar URL: Each user receives a unique "all-access pass" link (e.g., /a/{hash}) to their generated avatar, which they can share.
• Interactive Story: The experience guides users through a narrative about data privacy and corporate accountability.
• Avatar Gallery & Playpen: Users can perform actions with their avatar, such as taking a space selfie or doing a TikTok dance.
• Sanity CMS Integration: Content is managed through a Sanity Studio backend.
• Bento Grid Layout: The site uses a modern bento grid layout for its components.

---

Prerequisites

• Node.js >= 18.x
• pnpm >= 7.x
• Git CLI

---

Getting Started

1. Clone the repository:

   git clone [https://github.com/your-org/build-a-b.git](https://github.com/your-org/build-a-b.git)
   cd build-a-b

2. Install dependencies:

   pnpm install

3. Copy environment variables:

   cp .env.example .env.local

4. Update .env.local with your Sanity project ID and dataset from apps/studio/sanity.config.ts.

---

Environment Variables

All environment variables are defined in .env.example. Do not commit secrets; use your hosting provider's secret store for production credentials.

---

Project Structure

build-a-b/
├─ apps/
│  ├─ web/             # Next.js application (frontend)
│  │  └─ .env.example  # Web-level .env is required for build
│  └─ studio/          # Sanity CMS Studio (content backend)
├─ packages/           # shared packages (ui, config, utils)
├─ .env.example
├─ package.json
└─ README.md

---

Packages Overview

apps/web

• Next.js (App Router), TypeScript, Turbopack, Tailwind v4, HeroUI.
• Flags SDK and Sanity for content.

apps/studio

• Sanity Studio configured; schemas live in apps/studio/schemaTypes.

---

Available Scripts

Root scripts:

pnpm dev      # Start web and studio (local)
pnpm build    # Build all packages
pnpm start    # Start web in production
pnpm lint
pnpm format
pnpm test

Web package:

pnpm --filter web dev
pnpm --filter web build
pnpm --filter web start
pnpm --filter web lint

Studio package:

pnpm --filter studio dev
pnpm --filter studio build
pnpm --filter studio deploy

---

Architecture & Technologies

• Monorepo: pnpm workspaces + Turbo
• Frontend: Next.js (App Router), Server Components where applicable
• Styling: Tailwind v4, HeroUI component wrappers
• CMS: Sanity (GROQ, next-sanity)
• Feature flags: Vercel Flags SDK

---

Quality Gates

These commands should run successfully in CI for PRs:

1. Type check: pnpm typecheck (tsc --noEmit)
2. Format: pnpm format
3. Lint: pnpm lint
4. Tests: pnpm test
5. Sanity schema validate: pnpm -F @apps/studio schema:validate
6. Build: pnpm build

---

Contributing

• Follow Conventional Commits. Fork → feature branch → PR.
• Include tests, stories, and docs for new components.
• Use ADRs (/adr) for architectural changes.

---

License

MIT © Mondo Robot