Technology Policy Design Toolkit (TPDT)

Quick Start

• Requirements: Node 18+ and npm.
• Install: npm install
• Run dev server: npm run dev (Vite; shows a local URL and a network URL).
• Production build: npm run build (outputs to dist/).
• Preview a build: npm run preview.

Project Scripts

• npm run dev — Start the Vite dev server.
• npm run build — Build for production.
• npm run preview — Serve the production build locally.
• npm run deploy — Build and publish dist/ to the gh-pages branch via gh-pages (used for GitHub Pages hosting).

Temporarily hiding the live toolkit link

The nav label always reads “Try the Toolkit,” but the destination is controlled by toolkitEnabled in src/components/SiteHeader.jsx.

• Set toolkitEnabled = false to route the link to the “Coming Soon” screen (/coming-soon) with the logo and message (current state).
• Set toolkitEnabled = true to route to the live experience at /home (existing game flow).

App Flow (high level)

1. About page introduces the toolkit and research context.
2. Home lets facilitators pick a deck (CSV-backed set of cards).
3. Consent collects optional demographic info and seeds a Firestore session.
4. Game walks through sorting, compromise, and ranking phases via drag-and-drop.
5. Download shares printable decks and slide links.

Data & Decks

• Deck CSVs live in public/data/. Example: public/data/genAITutor.csv.
• Required CSV columns: round (integer grouping cards into rounds), text (card content). Optional: name (stable ID; otherwise derived from text) and icon (filename in public/images/icons/).
• Round numbers control the sequence shown in the Game; cards with the same round value appear together.
• To add a new deck:
  1. Add a CSV to public/data/ with the columns above.
  2. Drop any referenced icon files into public/images/icons/.
  3. Add an entry to the decks array in src/pages/Home.jsx with a name and url (e.g., /data/myDeck.csv). The deck ID used for Firestore is derived from the CSV filename.

Firestore

• Firestore is initialized in src/firebase.js / src/firebase.ts (project prg-tpdt). Data is written under decks/{deckId}/sessions/{sessionId}.
• Ensure your Firestore rules allow the writes expected by workshop facilitators (see src/services/dataCapture.js for the fields saved per phase).
• If you fork this project with a different Firebase project, update the config in the Firebase files and verify rules before deploying.

Deployment Notes

• vite.config.js sets base to /tpdt/ for production so GitHub Pages serves assets correctly. If you deploy under a different repo or path, update base accordingly.
• npm run deploy assumes GitHub Pages is enabled for the gh-pages branch. Make sure you have push access and the branch is configured in repository settings.

Repo Layout

• src/pages — Top-level routes (About, Home, Consent, Game, Download).
• src/components — Shared UI pieces (header, logo, game UI).
• src/services — Data capture helpers for Firestore.
• public/data — CSV decks.
• public/images — Static images and card icons.
• vite.config.js — Build and GitHub Pages base path settings.