Skip to content

Latest commit

 

History

History
48 lines (34 loc) · 3.2 KB

File metadata and controls

48 lines (34 loc) · 3.2 KB

UX Audit — Tavola Romagna

Reviewed all route groups under src/app plus shared components under src/components.

Critical

  1. Cart and purchase funnel disconnected/cart used hardcoded demo items and PDP add-to-cart had no working feedback.

    • Files: src/app/cart/page.tsx, src/components/product-purchase.tsx, src/components/cart-bundle-button.tsx, src/app/api/cart/route.ts
    • Fix: replaced demo cart with API-backed state, added empty/auth/error states, quantity updates, removal, and toast feedback.
  2. No route-level loading or recovery UI — page transitions and server failures fell back to generic behavior.

    • Files: src/app/loading.tsx, src/app/error.tsx, src/app/global-error.tsx, src/app/{cart,checkout,products,producers,search,dashboard,orders,subscriptions}/loading.tsx, src/components/page-loading.tsx, src/components/app-error.tsx
    • Fix: added reusable loading skeletons and error boundaries with retry paths.
  3. Checkout could proceed with incomplete data — missing slot/CAP validation and full reload navigation.

    • Files: src/app/checkout/page.tsx, src/app/api/checkout/route.ts
    • Fix: added inline validation, radiogroup semantics, stronger server validation, and router-based success navigation.

High-impact

  1. Mobile navigation accessibility gaps — menu state, focus handling, and active-state semantics were missing.

    • Files: src/components/navbar.tsx, src/components/bottom-nav.tsx, src/app/layout.tsx
    • Fix: added skip link, aria-expanded, aria-current, focus restoration, and close-on-select behavior.
  2. Forms lacked feedback and keyboard affordances — auth, producer onboarding, upload, and consent flows missed key guidance.

    • Files: src/app/auth/{login,register}/page.tsx, src/app/producer/register/page.tsx, src/components/image-upload.tsx, src/components/cookie-consent.tsx
    • Fix: added live error alerts, clearer helper text, keyboard-accessible upload, labeled consent options, and improved account-intent UX.
  3. Search and subscription workflows felt shallow — weak empty states, missing labels, and non-interactive subscription controls.

    • Files: src/app/search/page.tsx, src/app/subscriptions/page.tsx, src/components/subscription-actions.tsx, src/components/empty-state.tsx
    • Fix: added structured filters/labels, skeleton loading, richer empty states, and real pause/resume/cancel actions.

Polish

  1. Visual consistency and feedback system were fragmented.

    • Files: src/app/globals.css, src/components/toast-provider.tsx, src/components/market-image.tsx, src/app/products/page.tsx
    • Fix: added consistent focus styling, toast notifications, image accessibility semantics, better inline-link treatment, and reusable empty-state presentation.
  2. Micro-interactions were missing confirmation cues.

    • Files: purchase/cart/auth/checkout/subscription components above
    • Fix: added success/error/info toasts, disabled/loading states, and clearer action copy across core flows.

Outcome

All audit findings above were implemented in this pass. Validation completed with:

  • npm run lint (passes with pre-existing warnings)
  • npm run build
  • npm run test -- --run