UX revamp: JS SPAs (fastapi-todo, redis-counter, task-queue)#1683
Closed
IEvangelist wants to merge 3 commits into
Closed
UX revamp: JS SPAs (fastapi-todo, redis-counter, task-queue)#1683IEvangelist wants to merge 3 commits into
IEvangelist wants to merge 3 commits into
Conversation
Replace the shared purple-gradient todo UI with a distinct soft, puffy claymorphism identity built on Open Props design tokens and Heroicons. - Layered clay shadows, large radii, pastel palette; light + dark themes via prefers-color-scheme. - Semantic landmarks, skip link, labelled controls, aria-live status, visible focus, keyboard-operable toggle/add/delete. - Motion gated behind prefers-reduced-motion; View Transitions for add/toggle/delete. - Guards against duplicate in-flight requests; inline SVG favicon (no /favicon.ico 404). - Validated: todo CRUD via Playwright, zero console errors, axe WCAG 2.2 AA + AAA color-contrast-enhanced clean in light and dark. - Latest deps (react 19.2.7, vite 8.0.16). New light/dark screenshots with GitHub theme-switch README markup. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Give the Express + Redis visit counter a bold, distinct `Memphis-pop` identity to replace the shared purple-gradient look, while preserving the Redis-backed visit-counter flows. - Rebuild the React/TS frontend with CSS Modules (App.module.css) plus a global token layer (style.css); no runtime CSS framework. - Tabler icons per page; neo-brutalist cards with thick ink borders, hard offset shadows, primary-color fills, and a dotted Memphis grid background. - Add a hero `total visits` panel summing all pages, a live-status pill, and decorative geometric SVG confetti. - Accessibility: skip link, semantic header/main landmarks, each card a labelled button announcing its current count, a single role=status live region for user actions only (not the 5s poll), visible focus, and prefers-reduced-motion + prefers-color-scheme support. WCAG 2.2 AA clean and AAA color-contrast-enhanced clean in light and dark (validated with axe-core 4.11.3 via Playwright). - Guard against duplicate in-flight requests; preserve GET /api/stats, POST /api/visit/:page, and DELETE /api/stats. - Inline SVG favicon + color-scheme metas to avoid a favicon 404 and zero console errors. - Bump deps to latest (React 19.2, Vite 8, TypeScript 6, @tabler/icons-react 3.44). - Capture deterministic light + dark screenshots and switch the README image to GitHub light/dark markup. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Give the polyglot-task-queue frontend a distinct "neon HUD control room" identity to replace the generic shared gradient, while preserving every flow and API call. - Tailwind v4 (@tailwindcss/vite) + Lucide icons; monospace HUD accents on fully opaque surfaces so neon never carries readable text. - Semantic landmarks, skip link, labelled controls, aria-describedby help, single aria-live status region, visible focus, prefers-reduced-motion and prefers-color-scheme honored; inline SVG favicon (no /favicon.ico 404). - Live /health status dot, per-status count HUD, glowing status chips for queued/processing/completed/skipped/error, worker + type chips. - Light and dark themes, both validated WCAG 2.2 AA and AAA (color-contrast-enhanced) with zero console errors; new light/dark screenshots with GitHub theme-aware README markup. - Preserves GET/POST/DELETE /tasks and the live 2s task-board poll; latest pinned deps (react 19.2, vite 8). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
17 tasks
Member
Author
|
Consolidated into the single umbrella UX-revamp PR #1682. The vite-react-fastapi (Claymorphism), node-express-redis (Memphis-pop) and polyglot-task-queue (Cyberpunk) commits are merged into ievangelist/samples-ux-revamp (merge 30d1d27); all fleet work lands in one branch/PR. Closing in favor of #1682 — branch ievangelist/js-spa-ux-revamps preserved, no history rewrite. |
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.
Summary
Part of the coordinated effort to give every Aspire sample frontend a distinct, accessible, secure identity (replacing the boring shared purple gradient). This PR covers 3 JS SPA samples, each with its own visual language, CSS approach, and icon pack — no two look alike.
vite-react-fastapinode-express-redispolyglot-task-queueQuality bar (met for all three)
aria-liveregions, honorsprefers-reduced-motion+prefers-color-scheme. Inline SVG favicons (no/favicon.ico404). Zero console errors.#gh-light-mode-only/#gh-dark-mode-only).Validation protocol (per app)
Each app was run via
aspire run(resources confirmed Healthy through the Aspire MCP), then driven end-to-end with a standalone Playwright harness:{wcag2a, wcag2aa, wcag21a, wcag21aa, wcag22aa}and{color-contrast-enhanced}— 0 violations in both light and dark.dist/, temp logs, or stray artifacts).polyglot-task-queue note
Both workers (Python/C#) consume the shared
tasksqueue round-robin and skip the other's type — existing behavior, left unchanged. The screenshot seeder submits serially and waits for terminal states so the board reliably shows completed cards (with live pandas/report results) alongside a skipped chip, exercising the full HUD status palette. Live task IDs/timestamps are inherent to the demo.Opening as draft for review. Each app is a separate commit with a
Co-authored-by: Copilottrailer.