How vietductran16092003/fpt-avatar-frame-platform- works
FPT Avatar Frame Platform lets employees browse active campaigns, personalize a frame with a photo and overlay values, then generate and download an avatar; optional sign-in exposes download history. Admins manage campaigns and templates, review notifications, and inspect analytics. The graph reflects the documented product capabilities and sampled API ownership; several UI, auth, and analytics implementations were not sampled, so uncertain wiring is omitted.
Main entry points: route.ts Avatar generation API · prisma.ts PostgreSQL data · avatar-creator.tsx Avatar creator · page.tsx Campaign admin
Components 29
Public experience
- Campaign browsing
src/app/(public)/page.tsx - Campaign cards
src/app/(public)/campaign-cards.tsx - Avatar creator
src/app/(public)/c/[slug]/avatar-creator.tsx - Canvas preview
src/app/(public)/c/[slug]/use-avatar-canvas.ts - Download history
src/app/(public)/tai-khoan/account-history.tsx - Account history page
src/app/(public)/tai-khoan/page.tsx
Avatar generation
- Public campaign APIs
src/app/api/campaigns/route.ts - Campaign detail API
src/app/api/campaigns/[slug]/route.ts - Avatar generation API
src/app/api/campaigns/[slug]/generate/route.ts - Overlay validation
src/lib/server/compositing/validate-overlay-values.ts - Server compositor
src/lib/server/compositing/server-compositor.ts - Photo placement
src/lib/compositing/photo-placement.ts
Admin operations
- Campaign admin
src/app/admin/campaigns/page.tsx - Campaign admin APIs
src/app/api/admin/campaigns/route.ts - Template admin API
src/app/api/admin/campaigns/[slug]/templates/route.ts - Notification APIs
src/app/api/admin/notifications/route.ts - Analytics dashboard
src/app/admin/analytics/page.tsx - Analytics API
src/app/api/admin/analytics/route.ts
Identity
- Authentication API
src/app/api/auth/[...nextauth]/route.ts - Session access
src/lib/server/session.ts
Data and integrations
- Notification service
src/lib/server/notifications.ts - GA4 reporting
src/lib/server/analytics/ga4-report.ts - GA4 event client
src/lib/analytics/ga4-client.ts - PostgreSQL data
src/lib/server/prisma.ts - Image storage adapter
src/lib/server/storage/index.ts
Other components
- Employee
- Administrator
- MinIO object storage
- Google Analytics 4
Connections 38
- Employee → Campaign browsing: browses
- Campaign browsing → Campaign cards: shows
- Campaign cards → Public campaign APIs: requests campaigns
- Employee → Avatar creator: personalizes
- Avatar creator → Campaign detail API: loads campaign
- Avatar creator → Canvas preview: previews photo
- Canvas preview → Photo placement: uses transform
- Avatar creator → Avatar generation API: submits avatar
- Avatar generation API → Session access: gets user
- Avatar generation API → PostgreSQL data: reads campaign and template
- Avatar generation API → Overlay validation: validates values
- Avatar generation API → Photo placement: clamps transform
- Avatar generation API → Image storage adapter: loads frame, saves result
- Avatar generation API → Server compositor: renders avatar
- Avatar generation API → PostgreSQL data: records generation
- Avatar generation API → Notification service: creates notice
- Image storage adapter → MinIO object storage: stores images
- Employee → Authentication API: signs in
- Authentication API → PostgreSQL data: persists user
- Employee → Account history page: views history
- Account history page → Download history: renders
- Administrator → Campaign admin: manages campaigns
- Campaign admin → Campaign admin APIs: requests campaign changes
- Campaign admin → Template admin API: manages templates
- Campaign admin APIs → PostgreSQL data: reads and writes campaigns
- Template admin API → Image storage adapter: uploads frame
- Template admin API → PostgreSQL data: writes template
- Campaign admin APIs → Notification service: creates notices
- Administrator → Notification APIs: reviews notices
- Notification APIs → PostgreSQL data: reads and deletes notices
- Notification service → PostgreSQL data: writes notice
- Administrator → Analytics dashboard: views metrics
- Analytics dashboard → Analytics API: requests report
- Analytics API → PostgreSQL data: queries generation data
- Analytics API → GA4 reporting: fetches field report
- GA4 reporting → Google Analytics 4: queries reports
- Avatar creator → GA4 event client: tracks activity
- GA4 event client → Google Analytics 4: sends events