Feat/app react client#6
Merged
Merged
Conversation
Socket.io already had cors: { origin: '*' } for WebSocket upgrades but
Express had no CORS headers, blocking browser fetch() from localhost:5173.
Added the cors package so all REST responses include Access-Control-Allow-Origin.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
pnpm -r --parallel dev runs apps/server (nodemon) and apps/client (vite) simultaneously from the repo root with a single command. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Plain JS React (no TypeScript). Adds socket.io-client and canvas-confetti as runtime deps; vitest v4, @testing-library/react, jsdom as dev deps. Includes eslint flat config with react-hooks and react-refresh plugins. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
tokens.css — Clown Fish palette as CSS custom properties (colors, spacing, typography, border radius). components.css — all component classes ported from the reference design: buttons, cards, inputs, answer options, result bars, live badge, waiting card, confirm modal, responsive breakpoints. No hardcoded colors in JSX — all values reference CSS variables. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
socket.js — single io() instance with autoConnect: false, shared across all components to avoid duplicate WebSocket connections on re-renders. utils.js — calcPct() and BAR_COLORS extracted once, used by Host and Participant, eliminating duplication. useSession.js — custom hook encapsulating the shared socket subscription logic (session_joined, vote_update, session_closed) with named handler refs so socket.off() cleanup is reliable. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Layout — page shell (NavBar + children), single navAction prop drives both the clickable logo and the right-side button so each page controls its own exit behaviour. NavBar — logo becomes an accessible button (aria-label) when navAction is provided. BadgeLive — pulsing orange live indicator. ResultBar — animated fill bar driven by pct prop; only dynamic value in inline style is the width number, all colors stay in CSS variables. ConfirmModal — accessible dialog (role=dialog, aria-modal, Escape/backdrop dismiss) used by Host before closing a session. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
App.jsx — state-based router (home/host/participant), no React Router needed for three views with no URL sharing requirement. Home.jsx — validates session code via REST before socket.connect(), hosts create via POST /sessions. Host.jsx — useSession hook for socket subscriptions, confirm modal guards the close action to prevent accidental session teardown. Participant.jsx — two-phase state machine (voting/waiting), canvas-confetti orange burst on submit, live results update in both phases. main.jsx — mounts React tree into #root, imports global CSS. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
react-icons installed (tree-shaken — only imported symbols in the bundle). Icons added throughout: LuLogIn/LuRadio on Home buttons, LuPower on Host close action, LuShare2 on the hint label, LuSend/LuRefreshCw on Participant submit/change, LuClock replaces the hand-coded SVG in the waiting card. NavBar gains a CopyCode button (LuCopy → LuCheck feedback) so hosts can copy the session code with one tap. Footer links s3bc40.com (LuGlobe) and the GitHub repo (SiGithub) — icon uses currentColor so it inherits the muted/hover CSS colour. btn-icon modifier class added for icon+label flex alignment. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replaced conditional rendering of the error <p> with always-rendered + visibility toggle. The 20px min-height keeps the card size stable whether or not an error message is visible, so buttons don't shift on validation. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds 26 tests across three test files covering loading states, socket event flows, vote submission, phase transitions, and cleanup. Shared fixtures (getSocketHandler, mockQuestion) live in helpers.js to avoid duplication across test files. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.