How renjithpec/prompt-veno works
1. Overall shape
Prompt Veno is a Next.js 15 App Router application with a strong split between public marketplace pages, authenticated user flows, and an admin dashboard. The app is designed as a Supabase-backed product: PostgreSQL stores the core data, Supabase Auth handles sign-in, and Supabase Storage supports uploaded images.
2. Primary runtime boundary
The frontend is built with server-rendered route segments in app/, while interactive pieces are isolated into client components under components/ and a few page-local client files. This gives the app a server-first architecture for data fetching and SEO, with client-side islands for actions like search, chat, dialogs, buttons, and settings edits.
3. Public marketplace
The public surface includes the homepage, /prompts, category/tag browsing, prompt detail pages, creator/user pages, saved items, rewards, ranks, and static content like about/privacy. These pages are the main read path of the product and are optimized for discovery, ranking, and copy/share conversion.
4. Prompt data flow
Prompt browsing and detail pages are driven by data coming from Supabase through shared helpers in lib/data.ts and the typed models in lib/types.ts. User-facing actions such as copy, like, dislike, save, share, and follow are handled through action modules in app/actions/ and some API routes, then reflected back into ranking, analytics, and notification data.
5. Authentication and route protection
Auth is centered on Supabase login, including a callback route at /auth/callback. Route protection is enforced through middleware.ts and the admin/layout structure, so admin pages only render for authorized users when Supabase is configured. The auth flow is intentionally lightweight and server-managed rather than using a separate backend.
6. Admin subsystem
The /admin area is a distinct operational console with its own layout and pages for prompts, categories, tags, users, analytics, and settings. This is where content moderation, prompt management, and site-level configuration live. The README also indicates admin promotion is done by setting a profile role in the database.
7. Settings and content configuration
Admin settings control site identity and creator-facing branding such as Instagram URL, username, creator name, avatar, site title, and description. These settings feed the marketing UI and prompt pages, which include the creator growth block and social prompts designed for Instagram traffic.
8. Social and engagement features
The app includes social primitives beyond simple browsing: notifications, messaging/chat, user follow relationships, and reward mechanics. The presence of chat sidebar/window components and notification dropdowns suggests a real-time-ish engagement layer layered on top of the marketplace, with Supabase tables and RLS policies protecting access.
9. Content contribution and media
Users can contribute and edit prompts through dedicated routes, with image upload and cropper components supporting prompt or profile media. Supabase Storage buckets are part of the architecture, so media is stored outside the database while metadata stays in Postgres.
10. SEO and distribution
The app has built-in SEO artifacts like sitemap, robots, OpenGraph/Twitter metadata, and JSON-LD support. That matters architecturally because the public pages are intended to be indexed and shared, not just used behind login.
11. Shared UI and design system
The component layer is a reusable product UI kit: prompt cards, buttons, dialogs, dropdowns, header/footer, global search, theme provider/toggle, and various marketplace widgets. The app uses Tailwind CSS and Shadcn-style primitives, with Framer Motion for motion feedback in interaction-heavy parts like copy, shells, and modal flows.
12. Database and security model
The supabase/migrations/ folder shows the backend schema evolving through prompt categories, public profiles, likes, saves, shares, rewards, notifications, messaging, and image support. RLS is a core boundary: the database is not just storage, it is the enforcement layer for who can read or mutate each domain object.
13. Operational helpers
Supporting utilities include rate limiting, safe action wrappers, and Supabase client/server adapters under lib/. These form the glue between route handlers, server actions, and the database, while keeping secrets like the service role key server-only.
14. What to draw in an architecture diagram
The main diagram should show: browser/client UI → Next.js App Router pages/components → server actions/API routes/middleware → Supabase Auth + PostgreSQL + Storage. Around that core, show the marketplace read paths, authenticated user actions, admin console, and the social/notification/chat/rewards subsystems as separate bounded domains sharing the same Supabase backend.
Main entry points: social.ts Server Actions · server.ts Supabase Clients · data.ts Data Layer · 001_promptvault_schema.sql Supabase Backend
Components 21
App Router
Next.js route segments for public, authenticated, and API surfaces.
- App Shell · Root layout and global styling for the app router.
app/layout.tsx - Auth Flow · Login, callback, password reset, and account update routes.
app/login/page.tsx - Settings · Authenticated user settings and profile edits.
app/settings/page.tsx - Prompt API · Prompt-related API route used for copy and other server-side interactions.
app/api/prompts/[slug]/copy/route.ts - UI Islands · Interactive components such as search, buttons, dialogs, chat, notifications, and media tools.
components/global-search.tsx
Admin Console
Operational pages for moderation, analytics, and site settings.
- Admin Area · Protected operational console for moderation and configuration.
app/admin/layout.tsx - Admin Tools · Admin sections for prompts, categories, tags, users, analytics, and settings.
app/admin/prompts/page.tsx
Marketplace
Public discovery and prompt browsing flows.
- Home · Landing page and top-level entry into the marketplace.
app/page.tsx - Prompts · Main discovery listing for prompts.
app/prompts/page.tsx - Prompt Detail · Individual prompt view with copy, save, like, share, and related metadata.
app/prompt/[slug]/page.tsx - Categories · Category and tag browsing for discovery and filtering.
app/categories/page.tsx - Creator Pages · Public user pages and follow-focused creator views.
app/user/[id]/page.tsx - Contribute/Edit · Prompt creation and editing routes for user contributions.
app/contribute/page.tsx
Social Layer
Engagement, messaging, rewards, and notifications.
- Saved & Ranks · Saved prompts, rewards, and leaderboard-style ranking views.
app/saved/page.tsx - Messages · Messaging and chat entry point.
app/messages/page.tsx
Shared Infra
Client/server helpers, auth, and database integration.
- Server Actions · Mutation layer for admin, auth, search, social, rewards, and user flows.
app/actions/social.ts - Data Layer · Shared read helpers, typed models, rate limiting, and safe action wrappers.
lib/data.ts - Supabase Clients · Server and browser adapters for Supabase access.
lib/supabase/server.ts - Middleware · Edge protection and session-aware routing control.
middleware.ts - Supabase Backend · Supabase Auth, PostgreSQL, Storage, and RLS-protected application data.
supabase/migrations/001_promptvault_schema.sql
Other components
- Browser UI · Users interact through public pages and client-side islands.
Connections 25
- Browser UI → App Shell: loads · The browser enters the Next.js app through the root shell.
- App Shell → Home: renders · Root app routes render public pages and shared UI.
- App Shell → UI Islands: hosts · Shared interactive components are mounted inside the app shell.
- Home → Prompts: links to · Home promotes browsing into the marketplace.
- Prompts → Prompt Detail: opens · Listings lead into individual prompt detail views.
- Prompts → Categories: filters by · Discovery flows branch into category and tag browsing.
- Prompt Detail → Server Actions: mutates via · Prompt actions like like, save, share, follow, and reward updates use server actions.
- Prompt Detail → Prompt API: copies via · Copy-related interactions use a dedicated API route.
- Creator Pages → Server Actions: follows via · Follow/unfollow and profile interactions are handled through server actions.
- Saved & Ranks → Data Layer: reads · Saved items, rewards, and ranks are assembled from shared data helpers.
- Contribute/Edit → Server Actions: submits via · Prompt creation and edits are persisted through server actions.
- Auth Flow → Supabase Clients: authenticates with · Sign-in and callback flows use Supabase auth clients.
- Settings → Server Actions: updates via · Profile and account edits go through server mutations.
- Messages → UI Islands: uses · Chat UI is primarily delivered through interactive client components.
- Admin Area → Admin Tools: contains · Admin layout wraps all operational console pages.
- Admin Tools → Server Actions: manages via · Admin moderation and configuration rely on server actions.
- Middleware → Admin Area: protects · Route protection gates admin access.
- UI Islands → Data Layer: queries · Search, cards, and widgets consume shared read helpers and types.
- Server Actions → Supabase Clients: calls · Server actions use Supabase adapters for authenticated reads and writes.
- Data Layer → Supabase Clients: reads through · Shared helpers fetch data through the Supabase client/server wrappers.
- Supabase Clients → Supabase Backend: connects to · Adapters talk to Supabase Auth, Postgres, and Storage.
- Server Actions → Supabase Backend: writes · Mutations persist content, social state, notifications, and rewards.
- Data Layer → Supabase Backend: reads · Public pages and dashboards load data from the Supabase-backed store.
- Prompt API → Supabase Backend: touches · API routes participate in server-side prompt operations.
- Middleware → Supabase Clients: verifies session · Middleware cooperates with Supabase session state for protected routes.