How harsh16bhardwaj/nameframe works
1. Overall shape
- This is a Next.js App Router monolith that combines the marketing site, authenticated dashboard, and backend APIs in one repository.
- The system centers on event-based certificate generation and distribution: create an event, attach a certificate template, import participants, render personalized certificates, and send/verify them.
2. Frontend boundaries
- src/app/page.tsx and the src/components/landing/* subtree implement the public landing experience.
- src/app/(dashboard)/* contains the authenticated product UI: dashboard overview, events list, event detail pages, participants, and templates.
- src/app/create, src/app/contact, src/app/pricing, and src/app/verify are additional public-facing pages, while src/app/download/[eventID] is a dedicated certificate download experience.
3. Dashboard as the main operational surface
- The dashboard area is split into:
- a summary/home view with KPI, activity, and recent-event widgets,
- an events listing page,
- a per-event detail workspace.
- The event detail page is the core operator workflow: it combines template preview/editing, participant management, and export/send actions.
4. Certificate template workflow
- Certificate templates are handled as first-class assets.
- The CertificateSection components, TemplateUploadModal, PreviewModal, and CertificatePreview suggest an in-browser editing flow where organizers upload a background image and adjust text placement/style before issuing certificates.
- The implementation is likely canvas-driven on the client, matching the README’s HTML5 Canvas emphasis.
5. Participant management workflow
- Participants are imported, searched, filtered, paginated, and exported from the event detail area.
- The ParticipantImport component and the API under src/app/api/events/[eventId]/import-participants indicate Excel/CSV-style bulk ingestion.
- src/app/api/participants/export supports downstream reporting or offline processing.
6. Backend API structure
- The app uses route handlers under src/app/api/* as the service boundary.
- Major API domains are:
- events for CRUD and event-specific operations,
- certificate-templates for template storage/listing and “used template” discovery,
- participants for participant records and export,
- send-email for single and bulk delivery plus retries,
- upload for asset ingestion,
- verify/[code] for certificate verification,
- dashboard/stats for aggregate metrics,
- contact and feedback for inbound form submissions.
7. Persistence layer
- Prisma is the database abstraction layer, with schema and migrations under prisma/.
- The migration history shows the data model evolving around:
- users,
- events,
- certificates,
- participants,
- certificate templates,
- font settings,
- verification data,
- email retry fields.
- This implies the database is the source of truth for event state, participant records, issuance/verification metadata, and email delivery status.
8. Certificate generation and delivery flow
- Typical flow:
1. create or select an event,
2. upload/select a template,
3. import participants,
4. render individualized certificate images,
5. download or send them by email.
- The download route src/app/download/[eventID] likely packages certificates for an event, while send-email/single and send-email/bulk handle distribution.
- bulk-retry plus the retry fields in the schema indicate delivery resiliency is part of the backend design.
9. Verification subsystem
- src/lib/verification.ts and src/app/api/verify/[code] form a certificate verification path.
- The presence of an admin route api/admin/add-verification suggests verification codes or verification records can be created/seeded after issuance, supporting authenticity checks for generated certificates.
10. User/session and protection boundary
- src/middleware.ts, src/components/protectedPage.tsx, and src/components/userSync.tsx imply route protection and some kind of user synchronization/onboarding layer.
- The app likely distinguishes public marketing pages from authenticated dashboard operations, with middleware enforcing access control at the edge.
11. Shared UI and presentation system
- src/components/ui/*, src/components/layout/Sidebar.tsx, and various landing components show a shared component library layered on top of Tailwind/shadcn-style primitives.
- src/config/theme.ts, src/app/globals.css, and src/components/ui/CustomStyles.tsx control global styling and theme behavior across public and dashboard surfaces.
12. External services and operational concerns
- The README references Cloudinary for image management, and the file tree includes upload-related APIs consistent with asset storage integration.
- Email delivery is a distinct backend concern, with bulk retry handling indicating operational robustness.
- Although the README mentions Kafka and AI/RAG reporting, the tree here mainly shows the certificate, participant, verification, and email workflow; any AI/reporting capability is not clearly represented in the present source layout.
13. What to draw in an architecture diagram
- A good diagram would show:
- public marketing pages and authenticated dashboard as two UI entry zones,
- Next.js route handlers as the application backend,
- Prisma/database as the persistence core,
- upload/email/verification as externalized service paths,
- certificate generation as the central business workflow connecting templates, participants, and delivery.
Main entry points: schema.prisma Prisma Schema · events Events API · page.tsx Event Workspace · layout.tsx App Shell
Components 20
Public UI
Marketing and public product entry points
- Landing · Public marketing homepage
src/app/page.tsx - Landing UI · Hero, features, FAQ, pricing, testimonials
src/components/landing - Public Pages · Create, contact, pricing, verify, and download entry points
src/app/create
Dashboard UI
Authenticated operational surface
- Dashboard · KPI overview and recent activity
src/app/(dashboard)/dashboard/page.tsx - Events List · Events browsing and management
src/app/(dashboard)/events/page.tsx - Event Workspace · Per-event operator workspace
src/app/(dashboard)/events/[eventId]/page.tsx - Template Editor · Upload, preview, and text placement controls
src/app/(dashboard)/events/[eventId]/components/CertificateSection - Participants · Search, filter, paginate, and import participants
src/app/(dashboard)/events/[eventId]/components/ParticipantsTable - App Shell · Dashboard layout, sidebar, protected page, and user sync
src/app/(dashboard)/layout.tsx
Route Handlers
Next.js backend endpoints
- Events API · Event CRUD and template association
src/app/api/events - Templates API · Template storage and used-template lookup
src/app/api/certificate-templates - Participants API · Participant records and export
src/app/api/participants - Import API · Bulk participant ingestion for an event
src/app/api/events/[eventId]/import-participants/route.ts - Email API · Single, bulk, and retry delivery
src/app/api/send-email - Verify API · Certificate verification by code
src/app/api/verify/[code]/route.ts - Upload API · Asset ingestion for templates and images
src/app/api/upload/route.ts - Stats API · Dashboard aggregates and KPIs
src/app/api/dashboard/stats/route.ts - Verification Logic · Shared verification helpers
src/lib/verification.ts
Persistence
Prisma schema and migrations
- Prisma Schema · Users, events, certificates, participants, templates, verification, retries
prisma/schema.prisma - Migrations · Evolving database structure
prisma/migrations
Connections 26
- Landing → Landing UI: renders · Homepage composes the landing sections
- Landing → Public Pages: links · Public navigation reaches create, pricing, contact, verify, and download
- Public Pages → Verify API: verify · Public verification page calls the verification endpoint
- Public Pages → Events API: create/manage · Create flow and event-related public actions use the event backend
- App Shell → Dashboard: wraps · Authenticated shell hosts the dashboard overview
- App Shell → Events List: wraps · Authenticated shell hosts the events list
- App Shell → Event Workspace: wraps · Authenticated shell hosts the event workspace
- Dashboard → Stats API: loads stats · KPI cards and activity widgets consume dashboard aggregates
- Events List → Events API: loads events · Events listing reads from the event API
- Event Workspace → Events API: updates event · Workspace edits event metadata and template links
- Event Workspace → Template Editor: contains · Event detail embeds certificate template editing
- Event Workspace → Participants: contains · Event detail embeds participant management
- Template Editor → Upload API: uploads · Template assets are uploaded through the upload endpoint
- Template Editor → Templates API: saves template · Template selection and persistence use template routes
- Participants → Import API: imports · Bulk participant upload uses the event import endpoint
- Participants → Participants API: reads/exports · Participant table loads and exports participant data
- Email API → Events API: delivers for events · Bulk and single sends are coordinated around event records
- Verify API → Verification Logic: uses · Route delegates verification checks to shared logic
- Verify API → Prisma Schema: reads · Verification codes and issuance metadata come from the database
- Events API → Prisma Schema: persists · Events, certificates, and related state are stored via Prisma
- Templates API → Prisma Schema: persists · Template records and usage tracking live in the database
- Participants API → Prisma Schema: persists · Participant records and exports are backed by Prisma models
- Import API → Prisma Schema: writes · Imported participants are stored in the database
- Email API → Prisma Schema: updates status · Retry fields and delivery state are persisted
- Stats API → Prisma Schema: aggregates · Dashboard metrics are computed from persisted data
- Migrations → Prisma Schema: evolves · Migration history defines the schema over time