Polyatomics

A focused practice app for memorizing common polyatomic ion formulas and charges.

Features

Practice 32 common polyatomic ions.
Choose a time limit or practice without a timer.
Practice by category or select individual ions.
Loop mode continuously cycles through the selected pool.
Immediate feedback shows the correct formula and charge.
Session results include accuracy, correct answers, average answer time, and missed ions.
Installable as a PWA with update notifications.

Architecture

Rendering mermaid diagram...

File structure

index.ts
frontend/
  root.tsx                 # HTML shell and immutable asset URLs
  index.tsx                # React entrypoint and service-worker registration
  manifest.webmanifest     # PWA metadata
  favicon.svg              # App icon
  favicon-green.svg        # App icon used by the shell
  icon-192.svg
  icon-512.svg
  components/
    App.tsx                # Composition/root component
    StartScreen.tsx        # Session configuration
    QuizScreen.tsx         # Question and answer UI
    EndScreen.tsx          # Session results
    InstallNudge.tsx       # Install/update UI
  hooks/
    useQuizSession.ts      # Quiz state and transitions
  lib/
    polyatomics.ts         # Ion data, types, and defaults
    quiz.ts                # Pure quiz rules and formatting helpers

Design principles

The UI components are intentionally thin. Quiz behavior lives in useQuizSession, while pure domain rules live in lib/quiz.ts. The ion dataset and shared types live in lib/polyatomics.ts, so other practice modes can reuse them without depending on the UI.

The app does not require application cookies or a login to practice. Browser persistence for the install prompt is treated as optional: if web storage is unavailable or blocked, the prompt simply falls back to its default behavior and the quiz remains usable.

Development

The HTTP entrypoint is index.ts. React components live under frontend/components/, with reusable state and domain logic under frontend/hooks/ and frontend/lib/.

The app uses React 18, Hono, Twind, and immutable Val Town asset URLs.