Skip to main content
Skip to case study content
Operation Blackout opening screen — Begin Mission and Mission Archive
OngoingFull Stack2026

Operation Blackout

Tactical story experience with branching missions and an archive

  • TypeScript
  • Vercel
Live experienceBack to Projects

Executive summary

Operation Blackout is a live tactical story. The opening screen starts a mission or opens an archive, and the public repository documents the larger squad-tactics design.

Business problem

A branching story needs a clear start, a way back into earlier missions, and a design record the team can build from.

Project goals

  • Give the story a single entry point
  • Keep completed and hidden missions in an archive
  • Publish the tactics design beside the live experience

Solution

A live story shell at operationblackout.vercel.app, with the public repository holding the vision, architecture, gameplay, AI, UI, audio, and save-system documents.

My role

  • Live mission entry and archive screen
  • Design documents for tactics, AI, UI, audio, and saves

System architecture

  1. 01

    Stage 01

    The live page is a client-rendered story shell on Vercel.

  2. 02

    Stage 02

    The repository describes a TypeScript simulation with PixiJS as the presentation layer and a custom entity-component system.

  3. 03

    Stage 03

    The apps and packages folders in that repository are still placeholders.

Technology stack

  • TypeScript
  • Vercel

Key features

  • 01

    Begin Mission entry

  • 02

    Mission archive with victory, defeat, neutral, and hidden markers

  • 03

    Published vision, architecture, gameplay, AI, UI, audio, and save documents

Engineering challenges

  • Keeping the live story shell and the documented tactics design in one public repository

Results & business impact

Business value

  • 01

    Puts the mission entry online while the tactics design stays in the repository

  • Operation Blackout opening screen — Begin Mission and Mission Archive

Next step

Interested in building a similar solution?

Let's discuss your product, automation, or platform goals.

Let's discuss your project

Related case studies

  • Henry L. Andrews, Jr. homepage — board-ready executive hero with portrait and credentials
    Full StackShipped

    Henry L. Andrews, Jr. Executive Portfolio

    A production executive portfolio for Henry L. Andrews, Jr. — founding Managing Director and CFO of Verus Research and retired U.S. Air Force Colonel. The site organizes command, corporate leadership, board service, and civic work for recruiters, directors, and partners.

    • Next.js
    • React
    • TypeScript
    • Tailwind CSS
    • Radix UI
    Live siteView on GitHub
  • AAOsrc homepage — Resident Evil hero, search, and Trending This Week row
    Full StackIn production

    AAOsrc

    AAOsrc is a movie browsing app. The homepage opens on a featured title, then rows for trending, popular, top rated, upcoming, and genre picks, with search and a signed-in watchlist.

    • TanStack Start
    • React
    • TypeScript
    • Vite
    • Tailwind CSS
    Live productView on GitHub