Frontend/Mobile: asset optimization, bundle budget CI, reduced-motion, mobile ADR (#472 #473 #474 #475) - #511
Merged
Conversation
…, mobile ADR (bridgelet-org#472 bridgelet-org#473 bridgelet-org#474 bridgelet-org#475) Issue bridgelet-org#472 — Image and static asset optimization audit - Update frontend/next.config.js: - Enables AVIF/WebP format negotiation (next/image default pipeline) - deviceSizes tuned for low-end mobile breakpoints (360px–1920px) - minimumCacheTTL set to 1 year for versioned assets - webpack performance hints set to 'error' in production - Add frontend/components/OptimizedImage.tsx: - Thin wrapper enforcing next/image usage project-wide - priority prop for above-the-fold images (disables lazy loading + preloads) - Below-the-fold images default to loading=lazy - Required alt prop at TypeScript level (no alt omission possible) - Sensible default sizes attribute for responsive layout hints Issue bridgelet-org#473 — Bundle size budget enforcement - Add frontend/scripts/bundle-budget-check.ts: - Reads Next.js build manifest (pages + app router) - Budgets: /send and /claim/[token] -> 200 kB, / -> 250 kB, others -> 300 kB - Human-readable table output; --json flag for CI machine consumption - Exits non-zero on any budget violation - Add .github/workflows/bundle-size.yml: - Triggers on PRs touching frontend/ - Builds, runs budget check, posts/updates PR comment with route table - Fails CI on budget breach; includes fix guidance in collapsible section - Updates existing bot comment rather than spamming new ones Issue bridgelet-org#474 — Reduced-motion preference support - Add frontend/lib/useReducedMotion.ts: - Reads prefers-reduced-motion media query with SSR-safe default - Live-updates when OS preference changes (MediaQueryList listener) - Add frontend/components/HowItWorks.tsx: - How It Works section with staggered step-in animation (default) - prefersReducedMotion=true: all steps visible immediately, no animation - Content fully readable in both states (not just visually simplified) - sr-only live region announces reduced-motion state to screen readers - Add animation CSS to frontend/app/globals.css: - .animate-step-in with CSS custom property stagger (--step-delay) - @media (prefers-reduced-motion: reduce) disables animation at CSS level as a second layer alongside the React hook Issue bridgelet-org#475 — Mobile app technical scaffold decision record - Add mobile/docs/ADR-001-scaffold.md: - Decision: React Native + Expo (SDK 52+) with Expo Router - Rationale: TypeScript/React code-sharing with frontend/, LOBSTR/SEP-7 deep link support, Expo managed workflow removes native toolchain burden, Expo Router mirrors Next.js App Router convention - Evaluated alternatives: Flutter (no code-sharing, limited Stellar ecosystem), Native Swift/Kotlin (double maintenance burden) - Add mobile/README.md: - Prerequisites table (Node, npm, Expo CLI, simulators) - Quick start, env vars, project structure - Unit test + Detox E2E run commands - EAS Build instructions for iOS/Android distribution - Deep link testing commands for both platforms Closes bridgelet-org#472, Closes bridgelet-org#473, Closes bridgelet-org#474, Closes bridgelet-org#475
|
@BigBen-7 is attempting to deploy a commit to the aminubabafatima8-gmailcom's projects Team on Vercel. A member of the Team first needs to authorize it. |
3 tasks
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
3 participants
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
Resolves four issues assigned to @monique-7arch in a single PR.
Closes #472
Closes #473
Closes #474
Closes #475
#472 — Image and static asset optimization
Files:
frontend/next.config.js,frontend/components/OptimizedImage.tsxnext.config.jsupdated with AVIF/WebP format negotiation, mobile-firstdeviceSizes(360px–1920px), 1-year cache TTL, and webpack performance hints set to'error'in production.OptimizedImagewrapper enforcesnext/imageusage across the project:priorityprop for above-the-fold images — disables lazy loading and triggers preload.loading="lazy".altis required at the TypeScript level — no silent omissions.sizesattribute for responsive layout hints.#473 — Bundle size budget enforcement
Files:
frontend/scripts/bundle-budget-check.ts,.github/workflows/bundle-size.ymlbundle-budget-check.tsreads the Next.js build manifest, measures first-load JS per route, and enforces budgets:/sendand/claim/[token]→ 200 kB (critical user paths)/→ 250 kB--jsonflag for CI machine consumption.bundle-size.ymlworkflow triggers on PRs touchingfrontend/, builds, runs the check, posts/updates a PR comment with a formatted route table and fix guidance, then fails CI on any breach.#474 — Reduced-motion preference support
Files:
frontend/lib/useReducedMotion.ts,frontend/components/HowItWorks.tsx,frontend/app/globals.cssuseReducedMotionhook readsprefers-reduced-motionviamatchMedia, SSR-safe, live-updates on OS change.HowItWorkscomponent:step-inanimation with--step-delaycustom property.sr-onlylive region announces the reduced-motion state to screen readers.globals.css:@keyframes step-in+.animate-step-in+@media (prefers-reduced-motion: reduce)block as a CSS-level second line of defence.#475 — Mobile app technical scaffold decision record
Files:
mobile/docs/ADR-001-scaffold.md,mobile/README.mdfrontend/mobile/README.md: prerequisites, quick start, env vars, project structure, unit + Detox E2E commands, EAS Build instructions, and deep link testing commands.