================================================================================ GOODGO PLATFORM FRONTEND EXPLORATION - EXECUTIVE SUMMARY ================================================================================ Date: April 9, 2026 Status: Complete ✅ Scope: Very Thorough OVERVIEW -------- GoodGo is a Vietnamese real estate platform built with Next.js 14 (App Router). The frontend is well-structured with clear component organization, but has NO existing internationalization (i18n) setup. All UI text is hardcoded in Vietnamese. KEY FINDINGS ============ ✅ STRENGTHS • Next.js 14 with App Router (modern, well-organized routing) • React 18 + TypeScript (type-safe development) • Tailwind CSS with HSL-based theming (easy customization) • Good component library (~35 components) using CVA patterns • Existing accessibility basics (semantic HTML, ARIA labels, skip link) • Zod validation schemas for data validation • Zustand for state management • React Query for data fetching • Comprehensive middleware for auth routing • Security headers configured (CSP, X-Frame-Options, etc.) ❌ GAPS TO ADDRESS • NO i18n setup (everything hardcoded Vietnamese) • NO locale routing (/en/*, /vi/*) • NO message files or translation system • Accessibility issues: Focus management, color contrast, form error linking • Some ARIA labels missing from icon-only buttons • No focus trapping in dialogs/modals • Loading states lack aria-busy DIRECTORY STRUCTURE =================== apps/web/ (90+ TypeScript/TSX files) app/ (Next.js App Router) ├── (public) - Public routes (home, search, listings) ├── (auth) - Auth routes (login, register) ├── (dashboard) - Protected routes (listings, analytics, profile) ├── (admin) - Admin routes (users, KYC, moderation) ├── auth/callback - OAuth callbacks (Google, Zalo) ├── api/ - API routes └── [System files] - layout.tsx, middleware.ts, error boundaries components/ (35+ reusable components) ├── ui/ - Base UI components (button, input, card, dialog, etc.) ├── auth/ - Auth components (OAuth buttons) ├── search/ - Search components (filter bar, property card, results) ├── listings/ - Listing components (form, image gallery, upload) ├── map/ - Mapbox integration ├── valuation/ - AI valuation components ├── charts/ - Chart components (recharts) └── providers/ - Context providers (auth, query, theme) lib/ (20+ utilities) ├── hooks/ - Custom React hooks ├── validations/ - Zod schemas (auth, listings, valuation) ├── *-api.ts - API client modules └── stores/ - Zustand stores TECHNOLOGY STACK ================ Framework: Next.js 14.2.0 Runtime: React 18.3.0 Language: TypeScript Styling: Tailwind CSS 3.4.0 (dark mode support) State: Zustand 5.0.12 Data Fetching: @tanstack/react-query 5.96.2 Forms: react-hook-form 7.72.1 Validation: Zod 4.3.6 UI Components: CVA-based variants Maps: Mapbox GL 3.21.0 Charts: Recharts 3.8.1 Icons: Lucide React 1.7.0 Error Tracking: Sentry 10.47.0 Testing: Vitest 4.1.3 + React Testing Library CONTENT INVENTORY ================= Text Content Requiring Translation: ~200+ items Navigation & Layout: • Public header (4 nav items) • Dashboard navigation (8 items) • Footer (4 sections) • Theme toggle labels Forms & Validation: • Login form (8 fields/labels) • Register form (10 fields/labels) • Multi-step listing form (25+ labels) • Search filters (30+ options) • Zod validation error messages (20+) • OAuth error messages (5 types) Enums & Constants: • Transaction types (2 values) • Property types (6 values) • Listing statuses (8 values) • Directions (8 values) • Cities (13 locations) • Price ranges (6 ranges) Page Content: • Landing page (hero, stats, CTA) • Search results (headings, empty states) • Dashboard (section titles, empty states) CRITICAL FILES FOR i18n ======================= Must Update First: 1. middleware.ts - Add locale routing 2. app/layout.tsx - Add i18n provider 3. lib/validations/*.ts - Extract error messages 4. app/(public)/page.tsx - Landing page 5. components/listings/listing-form-steps.tsx - Multi-step form High Priority: 6. app/(public)/layout.tsx - Navigation 7. app/(auth)/login/page.tsx - Auth forms 8. app/(auth)/register/page.tsx 9. components/search/filter-bar.tsx - Search filters 10. components/search/property-card.tsx - Display translations Medium Priority: • All other page components • All UI components with text • Error boundary components Total Files to Update: ~50-60 files ACCESSIBILITY AUDIT FINDINGS ============================= Already Implemented ✅: • Skip-to-main-content link • Semantic HTML (
,