# shruti202x/celebrityspotlight architecture

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

- Interactive diagram: https://gitdiagram.com/shruti202x/celebrityspotlight
- Repository: https://github.com/shruti202x/celebrityspotlight

## Overview

CelebritySpotlight is a Next.js celebrity-discovery app. Visitors search for celebrities from a description, choose a match, and receive a prefilled signup form; the home page also displays trending news. The main flow uses two Gemini-backed API routes, while news is fetched through a separate NewsAPI route. Navigation exposes profile and dashboard pages, though their implementations are unsampled or minimal. The form currently logs submissions rather than saving them. Relationships reflect the shown calls and links; unsampled pages are represented only as routes.

Main entry points: [`components/Navbar.tsx`](https://github.com/shruti202x/celebrityspotlight/blob/main/components/Navbar.tsx) (Navigation), [`pages/index.tsx`](https://github.com/shruti202x/celebrityspotlight/blob/main/pages/index.tsx) (Home page), [`components/CelebSearch.tsx`](https://github.com/shruti202x/celebrityspotlight/blob/main/components/CelebSearch.tsx) (Celebrity search), [`pages/api/gemini.ts`](https://github.com/shruti202x/celebrityspotlight/blob/main/pages/api/gemini.ts) (Celebrity candidates API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["User interface"]
  node_home["Home page<br/>[index.tsx]"]
  node_navigation["Navigation<br/>[Navbar.tsx]"]
  node_signup["Signup form<br/>[signup.tsx]"]
  node_profile["Profile page<br/>[profile.tsx]"]
  node_dashboard["Dashboard page<br/>[dashboard.tsx]"]
  node_fan_dashboard["Fan dashboard<br/>[fandashboard.tsx]"]
  node_hello_api["Hello API<br/>[hello.ts]"]
end

subgraph group_discovery["Celebrity discovery"]
  node_search["Celebrity search<br/>[CelebSearch.tsx]"]
  node_candidate_api["Celebrity candidates API<br/>[gemini.ts]"]
  node_details_api["Celebrity details API<br/>[gemini2.ts]"]
end

subgraph group_content["News content"]
  node_news_api["News API<br/>[news.ts]"]
end

subgraph group_integrations["External services"]
  node_gemini{{"Google Gemini"}}
  node_newsapi{{"NewsAPI"}}
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_home -->|"renders"| node_navigation
node_home -->|"renders"| node_search
node_home -->|"fetches news"| node_news_api
node_search -->|"requests candidates"| node_candidate_api
node_candidate_api -->|"generates candidates"| node_gemini
node_search -->|"requests details"| node_details_api
node_details_api -->|"generates details"| node_gemini
node_search -->|"routes with details"| node_signup
node_navigation -->|"links to"| node_home
node_navigation -->|"links to"| node_signup
node_navigation -->|"links to"| node_profile
node_navigation -->|"links to"| node_dashboard
node_navigation -->|"links to"| node_fan_dashboard
node_news_api -->|"fetches articles"| node_newsapi
node_visitor -->|"requests endpoint"| node_hello_api

click node_home "https://github.com/shruti202x/celebrityspotlight/blob/main/pages/index.tsx"
click node_navigation "https://github.com/shruti202x/celebrityspotlight/blob/main/components/Navbar.tsx"
click node_search "https://github.com/shruti202x/celebrityspotlight/blob/main/components/CelebSearch.tsx"
click node_signup "https://github.com/shruti202x/celebrityspotlight/blob/main/pages/signup.tsx"
click node_profile "https://github.com/shruti202x/celebrityspotlight/blob/main/pages/profile.tsx"
click node_dashboard "https://github.com/shruti202x/celebrityspotlight/blob/main/pages/dashboard.tsx"
click node_fan_dashboard "https://github.com/shruti202x/celebrityspotlight/blob/main/pages/fandashboard.tsx"
click node_candidate_api "https://github.com/shruti202x/celebrityspotlight/blob/main/pages/api/gemini.ts"
click node_details_api "https://github.com/shruti202x/celebrityspotlight/blob/main/pages/api/gemini2.ts"
click node_news_api "https://github.com/shruti202x/celebrityspotlight/blob/main/pages/api/news.ts"
click node_hello_api "https://github.com/shruti202x/celebrityspotlight/blob/main/pages/api/hello.ts"

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_home,node_navigation,node_signup,node_profile,node_dashboard,node_fan_dashboard,node_hello_api toneBlue
class node_search,node_candidate_api,node_details_api toneAmber
class node_news_api toneMint
class node_gemini,node_newsapi toneRose
class node_visitor toneIndigo
```

## Components

### User interface

- [Home page](https://github.com/shruti202x/celebrityspotlight/blob/main/pages/index.tsx): `pages/index.tsx`
- [Navigation](https://github.com/shruti202x/celebrityspotlight/blob/main/components/Navbar.tsx): `components/Navbar.tsx`
- [Signup form](https://github.com/shruti202x/celebrityspotlight/blob/main/pages/signup.tsx): `pages/signup.tsx`
- [Profile page](https://github.com/shruti202x/celebrityspotlight/blob/main/pages/profile.tsx): `pages/profile.tsx`
- [Dashboard page](https://github.com/shruti202x/celebrityspotlight/blob/main/pages/dashboard.tsx): `pages/dashboard.tsx`
- [Fan dashboard](https://github.com/shruti202x/celebrityspotlight/blob/main/pages/fandashboard.tsx): `pages/fandashboard.tsx`
- [Hello API](https://github.com/shruti202x/celebrityspotlight/blob/main/pages/api/hello.ts): `pages/api/hello.ts`

### Celebrity discovery

- [Celebrity search](https://github.com/shruti202x/celebrityspotlight/blob/main/components/CelebSearch.tsx): `components/CelebSearch.tsx`
- [Celebrity candidates API](https://github.com/shruti202x/celebrityspotlight/blob/main/pages/api/gemini.ts): `pages/api/gemini.ts`
- [Celebrity details API](https://github.com/shruti202x/celebrityspotlight/blob/main/pages/api/gemini2.ts): `pages/api/gemini2.ts`

### News content

- [News API](https://github.com/shruti202x/celebrityspotlight/blob/main/pages/api/news.ts): `pages/api/news.ts`

### External services

- **Google Gemini**
- **NewsAPI**

### Other components

- **Visitor**

## Connections

- Visitor → Home page: opens (evidence: `README.md`)
- Home page → Navigation: renders (evidence: `pages/index.tsx`)
- Home page → Celebrity search: renders (evidence: `pages/index.tsx`)
- Home page → News API: fetches news (evidence: `pages/index.tsx`)
- Celebrity search → Celebrity candidates API: requests candidates (evidence: `components/CelebSearch.tsx`)
- Celebrity candidates API → Google Gemini: generates candidates (evidence: `pages/api/gemini.ts`)
- Celebrity search → Celebrity details API: requests details (evidence: `components/CelebSearch.tsx`)
- Celebrity details API → Google Gemini: generates details (evidence: `pages/api/gemini2.ts`)
- Celebrity search → Signup form: routes with details (evidence: `components/CelebSearch.tsx`)
- Navigation → Home page: links to (evidence: `components/Navbar.tsx`)
- Navigation → Signup form: links to (evidence: `components/Navbar.tsx`)
- Navigation → Profile page: links to (evidence: `components/Navbar.tsx`)
- Navigation → Dashboard page: links to (evidence: `components/Navbar.tsx`)
- Navigation → Fan dashboard: links to (evidence: `components/Navbar.tsx`)
- News API → NewsAPI: fetches articles (evidence: `pages/api/news.ts`)
- Visitor → Hello API: requests endpoint (evidence: `README.md`)