Skip to main content

drop-make-integration-plan

Plan: Drop Figma Make Frontend Integration

Research Summary

Make Export (source: ~/ALAI/products/Drop/mockups/figma-make-export/)

  • 10 screens, all custom Tailwind styling (NO shadcn imports despite package.json having them)
  • react-router navigation (Link, useLocation, useState)
  • All hardcoded mock data — no API calls
  • 2 shared components: BottomNav (5 items: Hjem, Kontoer, Skann, Historikk, Profil), Logo (gradient square + wordmark)
  • lucide-react icons throughout
  • Norwegian text, DM Sans + Fraunces fonts, #0B6E35 green + #D4A017 gold
  • Total: ~1,200 lines across 12 component files

Existing Drop (source: ~/ALAI/products/Drop/src/drop-app/)

  • 10 routes, all "use client" components with real API integration
  • API calls: auth (login/register), transactions (list/create), recipients, rates, cards, merchants
  • Auth: useAuth hook, JWT httpOnly cookies
  • Feature flags: cards gated behind useFeatureFlag()
  • shadcn/ui components used (Card, Button, Badge, Tabs, ScrollArea, etc.)
  • BottomNav with different icons (Home, Send, QrScan, CreditCard, User)
  • DropLogo components (broken SVG from task #947 — needs replacement)
  • Total: ~2,350 lines across page components

Key Difference

Make export = beautiful UI with mock data. Existing Drop = ugly UI with working backend. Goal: merge both — Make's design + Drop's API integration.

Conversion Needs Per Screen

Make Screen react-router → Next.js Mock Data → API Lines
Login Link → next/link, form → POST /api/auth/login Remove mock, add auth 80
Onboarding Link → next/link, form → POST /api/auth/register Remove mock, add validation 117
Dashboard Link → next/link Mock txns → GET /api/transactions, mock balance → GET /api/bank-accounts 129
SendMoney Link → next/link, useState kept Mock recipients → GET /api/recipients, mock rates → GET /api/rates, submit → POST /api/transactions/remittance 168
BankAccounts Link → next/link Mock accounts → GET /api/bank-accounts 82
TransactionHistory Link → next/link, useState kept Mock txns → GET /api/transactions 181
ScanQR Link → next/link, useState kept Mock merchant → POST /api/transactions/qr-payment 125
Profile Link → next/link Mock user → GET /api/auth/me, logout → POST /api/auth/logout 113
Notifications Link → next/link Mock notifs → static for MVP (no API yet) 96
MerchantDashboard useState kept Mock stats → GET /api/merchants/dashboard, mock txns → GET /api/merchants/transactions 147

Objective

Replace all 10 Drop frontend page components with Figma Make export designs, converting from Vite/react-router to Next.js App Router, and wiring mock data to existing Drop API endpoints. Backend stays 100% untouched.

Team Orchestration

Team Members

ID Name Role Agent Type Model
B1 foundation-builder Setup shared components + theme builder sonnet
V1 foundation-validator Validate shared components validator sonnet
B2 screens-builder-1 Convert Login, Onboarding, Dashboard, Profile builder sonnet
B3 screens-builder-2 Convert SendMoney, BankAccounts, TransactionHistory builder sonnet
B4 screens-builder-3 Convert ScanQR, Notifications, MerchantDashboard builder sonnet
V2 screens-validator Validate all 10 screens build + API wiring validator sonnet
B5 integration-builder Final integration, build test, fix issues builder sonnet
V3 final-validator Full app build + visual check validator sonnet

Step-by-Step Tasks

Phase 1: Foundation (shared components + theme)

Task 1: Replace shared components and merge theme

  • Owner: B1
  • BlockedBy: none
  • Files owned:
    • src/components/bottom-nav.tsx — REPLACE with Make's BottomNav (convert react-router Link/useLocation → next/link + usePathname)
    • src/components/drop-logo.tsx — REPLACE with Make's Logo component
    • src/app/globals.css — MERGE Make's theme.css variables into existing globals.css (keep existing Tailwind @theme inline, add missing CSS vars from Make)
    • src/components/ui/ — keep all existing shadcn components, no changes
  • Read FIRST:
    • Make: mockups/figma-make-export/src/app/components/BottomNav.tsx
    • Make: mockups/figma-make-export/src/app/components/Logo.tsx
    • Make: mockups/figma-make-export/src/styles/theme.css
    • Existing: src/components/bottom-nav.tsx
    • Existing: src/components/drop-logo.tsx
    • Existing: src/app/globals.css
  • Conversion rules:
    • import { Link } from 'react-router' → import Link from 'next/link'
    • import { useLocation } from 'react-router' → import { usePathname } from 'next/navigation'
    • const { pathname } = useLocation() → const pathname = usePathname()
    • to= → href=
    • Add "use client" at top of each file
    • BottomNav: 5 items — Hjem(/dashboard), Kontoer(/accounts), Skann QR(/scan, center green circle), Historikk(/transactions), Profil(/profile)
  • Acceptance:
    • bottom-nav.tsx uses next/link + usePathname, 5 items, center QR button elevated
    • drop-logo.tsx renders green gradient square + gold dot + "drop" wordmark
    • globals.css has all Make theme variables merged (--primary-green, --gold-accent, etc.)
    • No react-router imports remain
    • npx tsc --noEmit passes for changed files

Task 2: Validate foundation

  • Owner: V1
  • BlockedBy: 1
  • Acceptance:
    • bottom-nav.tsx: no react-router, uses next/link + usePathname, "use client" present
    • drop-logo.tsx: renders correctly, no broken SVG paths, "use client" present
    • globals.css: valid CSS, no duplicate custom properties, Tailwind @theme inline still present
    • All existing imports of BottomNav and DropLogo from other files still resolve

Phase 2: Screen Conversion (parallel — 3 builders)

Task 3: Convert Login, Onboarding, Dashboard, Profile

  • Owner: B2
  • BlockedBy: 1
  • Files owned:
    • src/app/login/page.tsx — REPLACE with Make's Login.tsx + add POST /api/auth/login
    • src/app/register/page.tsx — REPLACE with Make's Onboarding.tsx + add POST /api/auth/register (keep age validation, OTP, PIN from existing)
    • src/app/dashboard/page.tsx — REPLACE with Make's Dashboard.tsx + add GET /api/transactions + GET /api/bank-accounts
    • src/app/profile/page.tsx — REPLACE with Make's Profile.tsx + add GET /api/auth/me + POST /api/auth/logout
  • Read FIRST:
    • Make screens: Login.tsx, Onboarding.tsx, Dashboard.tsx, Profile.tsx
    • Existing pages: login/page.tsx, register/page.tsx, dashboard/page.tsx, profile/page.tsx
    • API spec: ~/ALAI/products/Drop/project/architecture/api-specification.md
  • Conversion rules (SAME for all screens):
    • import { Link } from 'react-router' → import Link from 'next/link'
    • to= → href=
    • Add "use client" at top
    • Replace hardcoded mock data with useState + useEffect + fetch('/api/...') from existing pages
    • Import BottomNav from @/components/bottom-nav
    • Import Logo from @/components/drop-logo (use DropLogo/DropLogoFull as appropriate)
    • Keep Make's visual layout/structure, replace data layer
    • Login: add form onSubmit → POST /api/auth/login, router.push('/dashboard') on success
    • Register: keep existing multi-step validation (age 18+, password strength, OTP) but use Make's visual design
    • Dashboard: fetch transactions + bank accounts on mount, show real data in Make's layout
    • Profile: show real user data from /api/auth/me, logout → POST /api/auth/logout + router.push('/login')
  • Acceptance:
    • All 4 pages render with Make's visual design
    • Login form submits to /api/auth/login
    • Register validates age 18+, password, creates account
    • Dashboard shows real API data (transactions, bank accounts)
    • Profile shows real user, logout works
    • No react-router imports, all use next/link
    • npx tsc --noEmit passes

Task 4: Convert SendMoney, BankAccounts, TransactionHistory

  • Owner: B3
  • BlockedBy: 1
  • Files owned:
    • src/app/send/page.tsx — REPLACE with Make's SendMoney.tsx + add GET /api/recipients, GET /api/rates, POST /api/transactions/remittance
    • src/app/accounts/page.tsx — REPLACE with Make's BankAccounts.tsx + add GET /api/bank-accounts
    • src/app/transactions/page.tsx — REPLACE with Make's TransactionHistory.tsx + add GET /api/transactions
  • Read FIRST:
    • Make screens: SendMoney.tsx, BankAccounts.tsx, TransactionHistory.tsx
    • Existing pages: send/page.tsx, accounts/page.tsx, transactions/page.tsx
    • API spec: ~/ALAI/products/Drop/project/architecture/api-specification.md
  • Conversion rules: Same as Task 3 + specific:
    • SendMoney: 4-step flow (recipient → amount → review → success), real recipients from API, real exchange rates, POST remittance on confirm
    • BankAccounts: real bank accounts from GET /api/bank-accounts, no mock data
    • TransactionHistory: real transactions with filters (all/sendt/qr), grouped by date
  • Acceptance:
    • SendMoney fetches real recipients + rates, creates real remittance
    • BankAccounts shows real linked accounts from API
    • TransactionHistory shows real transactions with filter tabs
    • No react-router imports
    • npx tsc --noEmit passes

Task 5: Convert ScanQR, Notifications, MerchantDashboard

  • Owner: B4
  • BlockedBy: 1
  • Files owned:
    • src/app/scan/page.tsx — REPLACE with Make's ScanQR.tsx + add POST /api/transactions/qr-payment
    • src/app/notifications/page.tsx — REPLACE with Make's Notifications.tsx (keep mock data for MVP — no notifications API yet)
    • src/app/(merchant)/merchant/page.tsx or appropriate route — REPLACE with Make's MerchantDashboard.tsx + add GET /api/merchants/dashboard + GET /api/merchants/transactions
  • Read FIRST:
    • Make screens: ScanQR.tsx, Notifications.tsx, MerchantDashboard.tsx
    • Existing pages: scan/page.tsx, notifications/page.tsx
    • API spec sections 7, 9 (QR Payment, Merchants)
  • Conversion rules: Same as Task 3 + specific:
    • ScanQR: keep demo simulation mode, POST /api/transactions/qr-payment on confirm, show bank account info
    • Notifications: keep Make's mock data (no backend API for notifications in MVP)
    • MerchantDashboard: real stats from /api/merchants/dashboard, real transactions from /api/merchants/transactions
  • Acceptance:
    • ScanQR simulates scan, creates real QR payment
    • Notifications renders with demo data
    • MerchantDashboard shows real merchant stats
    • No react-router imports
    • npx tsc --noEmit passes

Task 6: Validate all 10 screens

  • Owner: V2
  • BlockedBy: 3, 4, 5
  • Acceptance:
    • All 10 page.tsx files exist and compile
    • No react-router imports anywhere in src/
    • All pages have "use client" directive
    • All API calls match api-specification.md endpoints
    • BottomNav appears on all pages except Login and Onboarding
    • All text is Norwegian
    • Brand colors (#0B6E35, #D4A017) used consistently
    • npx tsc --noEmit passes for entire project

Phase 3: Integration & Build

Task 7: Build test + fix issues

  • Owner: B5
  • BlockedBy: 6
  • Steps:
    • Run npm run build (or next build)
    • Fix any TypeScript errors
    • Fix any import path issues
    • Fix any missing dependencies
    • Ensure all routes accessible
    • Remove unused old components if any
    • Remove /cards route or keep as feature-flagged placeholder
  • Files owned: Any file that needs fixing from build errors
  • Acceptance:
    • next build succeeds with 0 errors
    • next dev starts without errors
    • All 10 routes load in browser
    • No console errors on any page

Task 8: Final validation

  • Owner: V3
  • BlockedBy: 7
  • Steps:
    • Verify next build passes
    • Check each route renders (curl localhost:3000/login, /dashboard, etc.)
    • Verify API endpoints still work (GET /api/auth/me, GET /api/transactions)
    • Check no old broken SVG logos remain
    • Verify BottomNav navigation works between pages
  • Acceptance:
    • Build passes
    • All 10 routes return 200
    • API health check passes
    • No broken imports or missing components

Validation Commands

# TypeScript check
cd ~/ALAI/products/Drop/src/drop-app && npx tsc --noEmit

# Build
cd ~/ALAI/products/Drop/src/drop-app && npm run build

# Dev server
cd ~/ALAI/products/Drop/src/drop-app && npm run dev

# Check no react-router imports remain
grep -r "from 'react-router" ~/ALAI/products/Drop/src/drop-app/src/ || echo "CLEAN"
grep -r "from \"react-router" ~/ALAI/products/Drop/src/drop-app/src/ || echo "CLEAN"

# Check all pages exist
ls ~/ALAI/products/Drop/src/drop-app/src/app/{login,register,dashboard,send,accounts,transactions,scan,profile,notifications}/page.tsx

Risk Mitigation

  1. Backup first: cp -r src/drop-app/src src/drop-app/src-backup-pre-make before any changes
  2. Register vs Onboarding: Existing register has complex multi-step validation (age 18+, OTP, PIN). Make's Onboarding is simpler. MUST keep existing validation logic, only replace visual layer.
  3. Cards route: Make export has no Cards screen (replaced with BankAccounts per pass-through model). Keep /cards as feature-flagged placeholder or remove.
  4. Merchant route: May need new route directory if doesn't exist. Check first.
  5. Landing page (/): NOT touched. Existing landing page stays as-is.

Estimated Scope

  • Phase 1: 3 files changed (foundation)
  • Phase 2: 10 files replaced (screens) — 3 builders in parallel
  • Phase 3: Bug fixes from build
  • Total: ~13 files modified, 0 new files, backend untouched

No comments to display

Back to top