# naman-27072004/promptopia architecture

> Architecture diagram of the GitHub repository naman-27072004/promptopia, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-20). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/naman-27072004/promptopia
- Repository: https://github.com/naman-27072004/promptopia

## Overview

1. **Overall shape**  
   This is a Next.js App Router application for managing and sharing “prompts” with user accounts, authentication, and profile pages. The architecture is split into a UI layer, API route layer, and a small data/model layer.

2. **Application shell**  
   `app/layout.jsx` is the top-level shell for the app. It likely wires global navigation, auth/session context, and shared styling. `app/page.jsx` is the home entry point, which appears to render the main feed.

3. **Page-level routes**  
   The main user-facing routes are:
   - `app/page.jsx` for the feed/home view
   - `app/create-prompt/page.jsx` for creating a prompt
   - `app/update-prompt/page.jsx` for editing a prompt
   - `app/profile/page.jsx` for the signed-in user’s profile  
   These pages are thin route containers that compose shared components and call into the API.

4. **Shared UI components**  
   Most UI logic is factored into `components/`:
   - `Nav.jsx` for top-level navigation
   - `Feed.jsx` for listing prompts
   - `PromptCard.jsx` for individual prompt display/actions
   - `Form.jsx` for create/edit prompt input handling
   - `Profile.jsx` for user profile rendering
   - `Provider.jsx` for app-wide context, likely auth/session state  
   This indicates a componentized frontend with reusable prompt and user views.

5. **API boundary**  
   Server-side behavior lives under `app/api/` using route handlers. This is the backend boundary for all persistent operations, separate from the UI pages. The API is organized by resource rather than by page.

6. **Prompt CRUD endpoints**  
   Prompt management is exposed through:
   - `app/api/prompt/route.js` for collection-level operations
   - `app/api/prompt/new/route.js` for creating a new prompt
   - `app/api/prompt/[id]/route.js` for prompt lookup/update/delete by ID  
   This maps cleanly to a prompt entity lifecycle and is the main data flow behind create/edit views and the feed.

7. **User-related endpoints**  
   User data is handled in:
   - `app/api/users/[id]/posts/route.js` for fetching a specific user’s prompts  
   This supports the profile view, where prompts are filtered by owner/user ID.

8. **Authentication subsystem**  
   `app/api/auth/[...nextauth]/route.js` integrates NextAuth. That makes authentication a dedicated server concern, separate from prompt CRUD. The presence of `components/Provider.jsx` suggests the session is propagated into the client tree so UI components can render conditionally based on login state.

9. **Data model layer**  
   `models/prompt.js` and `models/user.js` define the core domain entities. The repository structure strongly suggests a document database model layer, with prompts linked to users and used across the feed, profile, and edit flows.

10. **Database access and cross-cutting assets**  
   `utils/database.js` centralizes database connection logic so route handlers can reuse the same persistence setup. Static assets live under `public/assets`, and global styling is in `styles/globals.css`. These are supporting concerns, not core architecture, but they shape the shared frontend shell.

11. **Primary data flow**  
   Typical flow is: user interacts with a page component → component submits to an API route → route handler uses the models and database utility → data is returned to the UI. Auth flow runs in parallel through NextAuth, with the session then influencing what actions the UI exposes.

12. **Architectural boundaries to capture in a diagram**  
   The key boundaries are:
   - client pages/components vs. server route handlers
   - auth/session management vs. prompt/user domain logic
   - UI composition vs. persistence/models  
   The repository is essentially a full-stack Next.js app where the API layer is the bridge between the React frontend and the database-backed domain model.

Main entry points: [`utils/database.js`](https://github.com/naman-27072004/promptopia/blob/main/utils/database.js) (Database), [`app/profile/page.jsx`](https://github.com/naman-27072004/promptopia/blob/main/app/profile/page.jsx) (Profile page), [`app/api/auth/[...nextauth]/route.js`](https://github.com/naman-27072004/promptopia/blob/main/app/api/auth/[...nextauth]/route.js) (Auth route), [`app/api/prompt/route.js`](https://github.com/naman-27072004/promptopia/blob/main/app/api/prompt/route.js) (Prompt API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["UI layer"]
  node_app_layout["App shell<br/>Next.js layout<br/>[layout.jsx]"]
  node_home_page["Home feed<br/>route page<br/>[page.jsx]"]
  node_create_page["Create prompt<br/>route page<br/>[page.jsx]"]
  node_update_page["Edit prompt<br/>route page<br/>[page.jsx]"]
  node_profile_page["Profile page<br/>route page<br/>[page.jsx]"]
  node_nav_comp["Navigation<br/>shared component<br/>[Nav.jsx]"]
  node_feed_comp["Feed list<br/>shared component<br/>[Feed.jsx]"]
  node_card_comp["Prompt card<br/>shared component<br/>[PromptCard.jsx]"]
  node_form_comp["Prompt form<br/>shared component<br/>[Form.jsx]"]
  node_profile_comp["Profile view<br/>shared component<br/>[Profile.jsx]"]
  node_provider_comp["Provider<br/>shared component<br/>[Provider.jsx]"]
end

subgraph group_api["API layer"]
  node_auth_route["Auth route<br/>NextAuth handler<br/>[route.js]"]
  node_prompt_route["Prompt API<br/>route handler<br/>[route.js]"]
  node_prompt_new_route["Create API<br/>route handler<br/>[route.js]"]
  node_prompt_id_route["Prompt by ID<br/>route handler<br/>[route.js]"]
  node_user_posts_route["User posts<br/>route handler<br/>[route.js]"]
end

subgraph group_data["Data layer"]
  node_prompt_model[("Prompt model<br/>domain model<br/>[prompt.js]")]
  node_user_model[("User model<br/>domain model<br/>[user.js]")]
  node_db_utils[("Database<br/>connection util<br/>[database.js]")]
end

node_app_layout -->|"wraps"| node_provider_comp
node_app_layout -->|"includes"| node_nav_comp
node_home_page -->|"renders"| node_feed_comp
node_feed_comp -->|"lists"| node_card_comp
node_create_page -->|"uses"| node_form_comp
node_update_page -->|"uses"| node_form_comp
node_profile_page -->|"renders"| node_profile_comp
node_profile_page -->|"shows posts"| node_feed_comp
node_provider_comp -->|"session"| node_auth_route
node_home_page -->|"loads"| node_prompt_route
node_create_page -->|"submits"| node_prompt_new_route
node_update_page -->|"submits"| node_prompt_id_route
node_profile_page -->|"loads"| node_user_posts_route
node_prompt_route -->|"reads"| node_prompt_model
node_prompt_new_route -->|"creates"| node_prompt_model
node_prompt_id_route -->|"updates"| node_prompt_model
node_user_posts_route -->|"reads"| node_user_model
node_prompt_route -->|"connects"| node_db_utils
node_prompt_new_route -->|"connects"| node_db_utils
node_prompt_id_route -->|"connects"| node_db_utils
node_user_posts_route -->|"connects"| node_db_utils
node_auth_route -->|"connects"| node_db_utils
node_auth_route -->|"authenticates"| node_user_model

click node_app_layout "https://github.com/naman-27072004/promptopia/blob/main/app/layout.jsx"
click node_home_page "https://github.com/naman-27072004/promptopia/blob/main/app/page.jsx"
click node_create_page "https://github.com/naman-27072004/promptopia/blob/main/app/create-prompt/page.jsx"
click node_update_page "https://github.com/naman-27072004/promptopia/blob/main/app/update-prompt/page.jsx"
click node_profile_page "https://github.com/naman-27072004/promptopia/blob/main/app/profile/page.jsx"
click node_nav_comp "https://github.com/naman-27072004/promptopia/blob/main/components/Nav.jsx"
click node_feed_comp "https://github.com/naman-27072004/promptopia/blob/main/components/Feed.jsx"
click node_card_comp "https://github.com/naman-27072004/promptopia/blob/main/components/PromptCard.jsx"
click node_form_comp "https://github.com/naman-27072004/promptopia/blob/main/components/Form.jsx"
click node_profile_comp "https://github.com/naman-27072004/promptopia/blob/main/components/Profile.jsx"
click node_provider_comp "https://github.com/naman-27072004/promptopia/blob/main/components/Provider.jsx"
click node_auth_route "https://github.com/naman-27072004/promptopia/blob/main/app/api/auth/[...nextauth]/route.js"
click node_prompt_route "https://github.com/naman-27072004/promptopia/blob/main/app/api/prompt/route.js"
click node_prompt_new_route "https://github.com/naman-27072004/promptopia/blob/main/app/api/prompt/new/route.js"
click node_prompt_id_route "https://github.com/naman-27072004/promptopia/blob/main/app/api/prompt/[id]/route.js"
click node_user_posts_route "https://github.com/naman-27072004/promptopia/blob/main/app/api/users/[id]/posts/route.js"
click node_prompt_model "https://github.com/naman-27072004/promptopia/blob/main/models/prompt.js"
click node_user_model "https://github.com/naman-27072004/promptopia/blob/main/models/user.js"
click node_db_utils "https://github.com/naman-27072004/promptopia/blob/main/utils/database.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app_layout,node_home_page,node_create_page,node_update_page,node_profile_page,node_nav_comp,node_feed_comp,node_card_comp,node_form_comp,node_profile_comp,node_provider_comp toneBlue
class node_auth_route,node_prompt_route,node_prompt_new_route,node_prompt_id_route,node_user_posts_route toneAmber
class node_prompt_model,node_user_model,node_db_utils toneMint
```

## Components

### UI layer

Next.js App Router pages and shared React components

- [App shell](https://github.com/naman-27072004/promptopia/blob/main/app/layout.jsx): Next.js layout · Global shell and shared providers · `app/layout.jsx`
- [Home feed](https://github.com/naman-27072004/promptopia/blob/main/app/page.jsx): route page · Main prompt feed entry point · `app/page.jsx`
- [Create prompt](https://github.com/naman-27072004/promptopia/blob/main/app/create-prompt/page.jsx): route page · Prompt creation screen · `app/create-prompt/page.jsx`
- [Edit prompt](https://github.com/naman-27072004/promptopia/blob/main/app/update-prompt/page.jsx): route page · Prompt update screen · `app/update-prompt/page.jsx`
- [Profile page](https://github.com/naman-27072004/promptopia/blob/main/app/profile/page.jsx): route page · Signed-in user profile and posts · `app/profile/page.jsx`
- [Navigation](https://github.com/naman-27072004/promptopia/blob/main/components/Nav.jsx): shared component · Top-level navigation · `components/Nav.jsx`
- [Feed list](https://github.com/naman-27072004/promptopia/blob/main/components/Feed.jsx): shared component · Prompt listing view · `components/Feed.jsx`
- [Prompt card](https://github.com/naman-27072004/promptopia/blob/main/components/PromptCard.jsx): shared component · Single prompt display and actions · `components/PromptCard.jsx`
- [Prompt form](https://github.com/naman-27072004/promptopia/blob/main/components/Form.jsx): shared component · Create and edit prompt form · `components/Form.jsx`
- [Profile view](https://github.com/naman-27072004/promptopia/blob/main/components/Profile.jsx): shared component · User profile presentation · `components/Profile.jsx`
- [Provider](https://github.com/naman-27072004/promptopia/blob/main/components/Provider.jsx): shared component · App-wide session/context provider · `components/Provider.jsx`

### API layer

Route handlers for auth, prompts, and user-linked data

- [Auth route](https://github.com/naman-27072004/promptopia/blob/main/app/api/auth/[...nextauth]/route.js): NextAuth handler · Authentication and session endpoint · `app/api/auth/[...nextauth]/route.js`
- [Prompt API](https://github.com/naman-27072004/promptopia/blob/main/app/api/prompt/route.js): route handler · Prompt collection operations · `app/api/prompt/route.js`
- [Create API](https://github.com/naman-27072004/promptopia/blob/main/app/api/prompt/new/route.js): route handler · Create new prompt endpoint · `app/api/prompt/new/route.js`
- [Prompt by ID](https://github.com/naman-27072004/promptopia/blob/main/app/api/prompt/[id]/route.js): route handler · Lookup, update, delete prompt by id · `app/api/prompt/[id]/route.js`
- [User posts](https://github.com/naman-27072004/promptopia/blob/main/app/api/users/[id]/posts/route.js): route handler · Prompts for a specific user · `app/api/users/[id]/posts/route.js`

### Data layer

Domain models and database connection

- [Prompt model](https://github.com/naman-27072004/promptopia/blob/main/models/prompt.js): domain model · Prompt document schema · `models/prompt.js`
- [User model](https://github.com/naman-27072004/promptopia/blob/main/models/user.js): domain model · User document schema · `models/user.js`
- [Database](https://github.com/naman-27072004/promptopia/blob/main/utils/database.js): connection util · Shared database connection setup · `utils/database.js`

## Connections

- App shell → Provider: wraps · Provides app-wide context to the UI
- App shell → Navigation: includes · Shared shell navigation
- Home feed → Feed list: renders · Home page composes the prompt feed
- Feed list → Prompt card: lists · Feed is built from prompt cards
- Create prompt → Prompt form: uses · Create screen reuses the prompt form
- Edit prompt → Prompt form: uses · Edit screen reuses the prompt form
- Profile page → Profile view: renders · Profile route composes profile view
- Profile page → Feed list: shows posts · Profile view can include authored prompts
- Provider → Auth route: session · Client context is driven by auth state
- Home feed → Prompt API: loads · Feed reads prompt data from API
- Create prompt → Create API: submits · Creation form posts new prompts
- Edit prompt → Prompt by ID: submits · Update form writes prompt changes
- Profile page → User posts: loads · Profile requests user-specific prompts
- Prompt API → Prompt model: reads · Prompt API queries prompt records
- Create API → Prompt model: creates · New prompt endpoint persists prompt documents
- Prompt by ID → Prompt model: updates · ID route manipulates a prompt document
- User posts → User model: reads · User posts endpoint resolves user records
- Prompt API → Database: connects · API routes share the database connection
- Create API → Database: connects · Create endpoint uses shared database setup
- Prompt by ID → Database: connects · Prompt-by-id endpoint uses shared database setup
- User posts → Database: connects · User posts endpoint uses shared database setup
- Auth route → Database: connects · Auth flow depends on database access
- Auth route → User model: authenticates · NextAuth works with user data