goodgo-platform/docs/audits/FRONTEND_AUDIT_2026-04-10.md

GoodGo Frontend Audit Report

Date: April 10, 2026 | Framework: Next.js 15.5.14 (App Router)

---

1. App Structure ✅

Status: GOOD - Next.js 15 App Router properly implemented

Pages & Routes (22 pages total):

• Public: Landing (/), Search Results (/search), Listing Detail (/listings/[id])
• Auth ✅: Login, Register, OAuth callbacks (Google, Zalo)
• Dashboard ✅: Main dashboard, Profile, Payments, KYC, Subscription, Valuation, Analytics
• Listings ✅: List, Create (/new), Edit (/[id]/edit)
• Admin Panel ✅: Dashboard, KYC Review, Moderation, Users Management

Route Groups (Organized correctly):

(public) → Landing, Search, Listing Detail
(auth) → Login, Register, OAuth
(dashboard) → All user-facing features
(admin) → Admin-only features

Middleware & i18n:

✅ Locale-aware routing (/[locale]/*) ✅ Authentication middleware with cookie-based auth ✅ Protected routes redirect to login ✅ next-intl v4.9.0 for English/Vietnamese

---

2. Components & UI System ✅

Status: EXCELLENT - shadcn/ui + Tailwind properly implemented

shadcn/ui Components (14 found):

• Button, Badge, Card, Dialog, Input, Label, Select, Table, Tabs, Textarea
• ✅ Using CVA (class-variance-authority) for variants
• ✅ Tailwind dark mode support included

Custom Components:

• Listings: listing-detail-client, image-gallery, image-upload, listing-form-steps
• Maps: listing-map, district-heatmap
• Charts: District bar chart, analytics charts
• Auth: Auth forms (login/register)
• Search: Search filters, results layout

Design Tokens:

✅ CSS custom properties (HSL-based) ✅ Tailwind config extends with proper color system ✅ Dark mode ready (@media (prefers-color-scheme: dark))

---

3. State Management ✅

Status: GOOD - Zustand properly integrated

Stores:

• auth-store.ts (117 lines): User auth, login, logout, token refresh
  • Methods: login(), register(), logout(), fetchProfile(), initialize()
  • Handles OAuth callbacks
  • ✅ Error handling with custom ApiError class

React Query:

✅ TanStack React Query v5.96.2 integrated ✅ Custom hooks:

• use-listings, use-analytics, use-payments, use-subscription, use-valuation, use-saved-searches ✅ Query client configuration:
• Stale time: 60s
• GC time: 5min
• Retry: 3x with exponential backoff
• ✅ Error boundary with fallback UI

---

4. API Integration ✅

Status: GOOD - Well-structured API client

API Client (api-client.ts):

• ✅ Centralized request handler with CSRF token support
• ✅ Cookie-based auth (credentials: 'include')
• ✅ Custom ApiError class with status codes
• ✅ Methods: get(), post(), patch(), delete()

API Modules:

• auth-api.ts: Login, register, OAuth exchange, token refresh
• listings-api.ts (190 lines): CRUD operations
• admin-api.ts (179 lines): Admin features
• analytics-api.ts, payment-api.ts, subscription-api.ts
• saved-search-api.ts

API Base URL:

• Environment-based: NEXT_PUBLIC_API_URL or http://localhost:3001/api/v1

---

5. Maps Integration ✅

Status: GOOD - Mapbox GL properly integrated

Mapbox GL v3.21.0:

✅ Used in 2 components:

• components/map/listing-map.tsx: Property detail view
• components/charts/district-heatmap.tsx: Analytics heatmap

Implementation:

✅ Dynamic imports (no SSR) → prevents build errors ✅ CSS imported: mapbox-gl/dist/mapbox-gl.css ✅ CSP headers configured for Mapbox domains ✅ Supported features: Geo-location (permission: geolocation), Maps rendering

Issues: ⚠️ MINOR

• Mapbox API key not verified in code (likely env variable)
• No error handling visible for map load failures

---

6. Authentication ✅

Status: GOOD - Cookie + OAuth implemented

Flow:

1. Cookie-based auth (goodgo_authenticated=1)
2. Token stored server-side (HTTP-only cookies)
3. OAuth support: Google, Zalo
4. Token refresh mechanism with retry logic

Middleware Protection:

✅ Public paths: /, /login, /register, /search, /auth/callback ✅ Auth-only paths redirect to dashboard if logged in ✅ Protected paths require goodgo_authenticated cookie

Security Headers:

✅ HSTS, X-Frame-Options, X-Content-Type-Options ✅ CSP configured ✅ Referrer-Policy: strict-origin-when-cross-origin

---

7. Testing ⚠️ NEEDS WORK

Status: PARTIAL - Only 4 test files found

Test Coverage:

• auth-store.spec.ts (217 lines)
• auth/__tests__/login.spec.tsx, register.spec.tsx
• search/__tests__/search.spec.tsx
• listings/__tests__/create-listing.spec.tsx
• UI components: __tests__/button.spec.tsx, card.spec.tsx, etc.

Test Setup:

✅ Vitest + React Testing Library ✅ JSDOM environment ✅ MSW v2.13.2 for API mocking

Issues: 🔴

• Only ~7 main page tests (46 tsx files, <10% coverage)
• No e2e tests
• Recommendation: Add integration tests for critical flows (auth, search, listings)

---

8. Performance ⚠️ NEEDS OPTIMIZATION

Status: PARTIAL - Some optimizations in place

Good:

✅ Dynamic imports for map components (next/dynamic) ✅ Suspense boundaries for lazy-loaded content ✅ Image optimization ready (Next.js config allows remote images) ✅ Standalone output mode (better Docker builds) ✅ React Query caching (5min GC time)

Issues: 🔴

• No explicit Image component usage found (using <img> tags likely)
  • Impact: Missing automatic optimization, size reduction
• 30 'use client' directives found (some likely unnecessary)
  • Recommendation: Audit and move data fetching to Server Components
• No font optimization detected
  • Missing: next/font for system fonts or Google Fonts
• No visible route prefetch strategy
• Limited loading states (some pages have loading.tsx, others don't)

Web Vitals:

✅ web-vitals v5.2.0 integrated ✅ Sentry monitoring configured

---

9. Accessibility 🔴 NEEDS WORK

Status: POOR - Minimal a11y attributes detected

Found (28 instances):

• 4 role="alert" on error boundaries
• Some aria-* attributes in forms
• Limited alt text on images

Missing:

❌ No aria-label / aria-describedby strategy ❌ No keyboard navigation testing ❌ Limited contrast testing ❌ No ARIA live regions beyond errors ❌ Form labels disconnected from inputs in some cases

Recommendation:

• Run axe DevTools audit
• Add aria-label to icon-only buttons
• Ensure all inputs have proper labels
• Test with keyboard navigation

---

10. Build Configuration ✅

Status: GOOD - Properly configured

Next.js Config (next.config.js):

✅ Strict mode enabled ✅ Sentry integration ✅ next-intl plugin ✅ Standalone output ✅ CSP headers configured ✅ Image optimization (remote patterns)

Tailwind Config:

✅ Dark mode support ✅ CVA integration ✅ Animation plugin ✅ Proper content paths

TypeScript:

✅ ES2017 target ✅ Bundler module resolution ✅ Path aliases (@/*) ✅ Incremental builds enabled

---

11. Missing Pages vs MVP Blueprint 🔴

MVP Pages (11 planned):

1. ✅ Landing (/)
2. ✅ Search Results (/search)
3. ✅ Listing Detail (/listings/[id])
4. ✅ Login (/login)
5. ✅ Register (/register)
6. ✅ Dashboard (/dashboard)
7. ✅ Admin Panel (/admin)
8. ✅ Analytics (/analytics)
9. ⚠️ Pricing - MISSING
10. ✅ Saved Searches (/dashboard/saved-searches)
11. ✅ Payments (/dashboard/payments)

Additional Pages Found (Not in MVP):

• KYC (user & admin)
• Subscription
• Profile
• Valuation
• Listings CRUD
• Moderation (admin)

Critical Gap: 🔴 NO PRICING PAGE

• Should list subscription tiers, features, pricing

---

12. Overall Summary

Category	Status	Score
App Structure	✅ Excellent	95%
Components & UI	✅ Excellent	95%
State Management	✅ Good	90%
API Integration	✅ Good	90%
Maps Integration	✅ Good	85%
Authentication	✅ Good	85%
Testing	⚠️ Needs Work	40%
Performance	⚠️ Partial	65%
Accessibility	🔴 Poor	30%
Build Config	✅ Good	90%
MVP Coverage	⚠️ Partial	90% (missing pricing)

---

Action Items (Priority Order)

🔴 Critical:

1. Create pricing page (/pricing) - MVP requirement
2. Add a11y attributes - WCAG baseline (2 hours)
3. Increase test coverage - Aim for 60%+ (4-6 hours)

🟡 Important:

4. Audit 'use client' directives - move to Server Components where possible
5. Add next/image optimization
6. Add font optimization (next/font)
7. Add loading/error states to all pages

🟢 Nice-to-Have:

8. E2E tests with Playwright
9. Performance budget setup
10. Pre-rendering strategy for public pages

---

Dependencies Review

Package	Version	Status
next	15.5.14	✅ Latest
react	18.3.0	✅ Latest
zustand	5.0.12	✅ Latest
@tanstack/react-query	5.96.2	✅ Latest
mapbox-gl	3.21.0	✅ Latest
tailwindcss	3.4.0	⚠️ v4 available
typescript	6.0.2	✅ Latest

---

Report Generated: 2026-04-10 | Auditor: Claude Code Audit System