# sibiraj-003/linkme architecture

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

- Interactive diagram: https://gitdiagram.com/sibiraj-003/linkme
- Repository: https://github.com/sibiraj-003/linkme

## Overview

#### Purpose and entry points
LinkMe/Cardfy is a Vite React application for creating and publishing profile/link-card experiences, with authenticated dashboards, editors, card design, and public profiles. Browser startup is `index.html` → `src/main.tsx` → `src/App.tsx`; local/server-side integration is exposed through `server.ts`.

#### Application shell and navigation
`src/App.tsx` is the application composition boundary, coordinating page-level experiences and shared auth state. The main user-facing routes/views are:
- `src/pages/Home.tsx`
- `src/pages/Login.tsx`
- `src/pages/Dashboard.tsx`
- `src/pages/PublicProfile.tsx`

This separates private account management from publicly consumable profile rendering.

#### Authenticated user boundary
`src/context/AuthContext.tsx` centralizes authentication state for the React tree. It is backed by Firebase initialization/client access in `src/lib/firebase.ts`; Firestore authorization policy is defined separately in `firestore.rules`. Components and private pages should consume this context rather than independently managing session identity.

#### Creation and editing workflow
Content creation is organized into distinct authoring surfaces:
- `src/pages/Editor.tsx` for profile/link content editing
- `src/pages/CardDesigner.tsx` for visual card customization
- `src/pages/Dashboard.tsx` for managing the user’s authored/published assets

The expected flow is authenticated user → dashboard → editor/designer → persisted profile/card data → `PublicProfile.tsx` rendering for visitors.

#### Persistence and media services
The repository contains multiple external-service adapters:
- Firebase client: `src/lib/firebase.ts`
- Supabase client: `src/lib/supabase.ts`
- Cloudinary media integration: `src/lib/cloudinary.ts`

`supabase_schema.sql` defines the relational/storage-side database contract, while Firebase/Firestore appears to provide authentication and/or document authorization. Media upload and delivery should remain behind the Cloudinary adapter so page components do not depend on provider-specific URL or upload mechanics.

#### Server and AI integration
`server.ts` is the server/runtime boundary distinct from the Vite client. The README requires `GEMINI_API_KEY`, indicating server-mediated Gemini usage rather than embedding that secret in browser code. Client code should call server endpoints for Gemini-backed operations; environment configuration is represented by `.env.example`.

#### Deployment and runtime
The frontend is a TypeScript React/Vite app (`src/main.tsx`, `vite.config.ts`) deployed with Vercel configuration in `vercel.json`. Shared UI primitives are locally composed under `src/components/ui`, while global styling begins at `src/index.css`. Firebase app metadata/configuration is also present in `firebase-applet-config.json` and `firebase-blueprint.json`.

Main entry points: [`src/App.tsx`](https://github.com/sibiraj-003/linkme/blob/main/src/App.tsx) (Application shell), [`src/pages/Dashboard.tsx`](https://github.com/sibiraj-003/linkme/blob/main/src/pages/Dashboard.tsx) (Dashboard), [`src/lib/supabase.ts`](https://github.com/sibiraj-003/linkme/blob/main/src/lib/supabase.ts) (Supabase client), [`src/pages/Editor.tsx`](https://github.com/sibiraj-003/linkme/blob/main/src/pages/Editor.tsx) (Profile editor)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["React/Vite Client"]
  node_html["Browser entry<br/>HTML entry<br/>[index.html]"]
  node_main["React bootstrap<br/>Vite entry<br/>[main.tsx]"]
  node_app["Application shell<br/>React composition<br/>[App.tsx]"]
  node_auth["Auth context<br/>React context<br/>[AuthContext.tsx]"]
  node_home["Home<br/>public page<br/>[Home.tsx]"]
  node_login["Login<br/>auth page<br/>[Login.tsx]"]
  node_public_profile["Public profile<br/>public page<br/>[PublicProfile.tsx]"]
  node_ui["UI primitives<br/>component library"]
end

subgraph group_authoring["Authoring"]
  node_dashboard["Dashboard<br/>private page<br/>[Dashboard.tsx]"]
  node_editor["Profile editor<br/>authoring page<br/>[Editor.tsx]"]
  node_designer["Card designer<br/>authoring page<br/>[CardDesigner.tsx]"]
end

subgraph group_services["Service Boundaries"]
  node_firebase["Firebase client<br/>auth/document adapter<br/>[firebase.ts]"]
  node_firestore_rules["Firestore policy<br/>authorization rules<br/>[firestore.rules]"]
  node_supabase["Supabase client<br/>data adapter<br/>[supabase.ts]"]
  node_schema[("Supabase schema<br/>database contract")]
  node_cloudinary["Cloudinary adapter<br/>media adapter<br/>[cloudinary.ts]"]
  node_server["Server runtime<br/>server boundary<br/>[server.ts]"]
  node_env["Environment contract<br/>environment template<br/>[.env.example]"]
  node_vercel["Vercel deployment<br/>deployment config<br/>[vercel.json]"]
end

node_html -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_app -->|"provides"| node_auth
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_public_profile
node_app -->|"composes"| node_ui
node_auth -->|"uses identity"| node_firebase
node_firebase -.->|"governed by"| node_firestore_rules
node_dashboard -->|"requires"| node_auth
node_dashboard -->|"opens"| node_editor
node_dashboard -->|"opens"| node_designer
node_editor -->|"persists content"| node_supabase
node_designer -->|"persists design"| node_supabase
node_editor -->|"uploads media"| node_cloudinary
node_supabase -->|"implements"| node_schema
node_public_profile -->|"reads published data"| node_supabase
node_app -->|"calls AI endpoints"| node_server
node_server -.->|"reads Gemini key"| node_env
node_vercel -.->|"deploys client"| node_app

click node_html "https://github.com/sibiraj-003/linkme/blob/main/index.html"
click node_main "https://github.com/sibiraj-003/linkme/blob/main/src/main.tsx"
click node_app "https://github.com/sibiraj-003/linkme/blob/main/src/App.tsx"
click node_auth "https://github.com/sibiraj-003/linkme/blob/main/src/context/AuthContext.tsx"
click node_home "https://github.com/sibiraj-003/linkme/blob/main/src/pages/Home.tsx"
click node_login "https://github.com/sibiraj-003/linkme/blob/main/src/pages/Login.tsx"
click node_dashboard "https://github.com/sibiraj-003/linkme/blob/main/src/pages/Dashboard.tsx"
click node_editor "https://github.com/sibiraj-003/linkme/blob/main/src/pages/Editor.tsx"
click node_designer "https://github.com/sibiraj-003/linkme/blob/main/src/pages/CardDesigner.tsx"
click node_public_profile "https://github.com/sibiraj-003/linkme/blob/main/src/pages/PublicProfile.tsx"
click node_ui "https://github.com/sibiraj-003/linkme/tree/main/src/components/ui"
click node_firebase "https://github.com/sibiraj-003/linkme/blob/main/src/lib/firebase.ts"
click node_firestore_rules "https://github.com/sibiraj-003/linkme/blob/main/firestore.rules"
click node_supabase "https://github.com/sibiraj-003/linkme/blob/main/src/lib/supabase.ts"
click node_schema "https://github.com/sibiraj-003/linkme/blob/main/supabase_schema.sql"
click node_cloudinary "https://github.com/sibiraj-003/linkme/blob/main/src/lib/cloudinary.ts"
click node_server "https://github.com/sibiraj-003/linkme/blob/main/server.ts"
click node_env "https://github.com/sibiraj-003/linkme/blob/main/.env.example"
click node_vercel "https://github.com/sibiraj-003/linkme/blob/main/vercel.json"

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_html,node_main,node_app,node_auth,node_home,node_login,node_public_profile,node_ui toneBlue
class node_dashboard,node_editor,node_designer toneAmber
class node_firebase,node_firestore_rules,node_supabase,node_schema,node_cloudinary,node_server,node_env,node_vercel toneMint
```

## Components

### React/Vite Client

- [Browser entry](https://github.com/sibiraj-003/linkme/blob/main/index.html): HTML entry · `index.html`
- [React bootstrap](https://github.com/sibiraj-003/linkme/blob/main/src/main.tsx): Vite entry · `src/main.tsx`
- [Application shell](https://github.com/sibiraj-003/linkme/blob/main/src/App.tsx): React composition · Coordinates routes and shared application state. · `src/App.tsx`
- [Auth context](https://github.com/sibiraj-003/linkme/blob/main/src/context/AuthContext.tsx): React context · Centralized session identity for private views. · `src/context/AuthContext.tsx`
- [Home](https://github.com/sibiraj-003/linkme/blob/main/src/pages/Home.tsx): public page · `src/pages/Home.tsx`
- [Login](https://github.com/sibiraj-003/linkme/blob/main/src/pages/Login.tsx): auth page · `src/pages/Login.tsx`
- [Public profile](https://github.com/sibiraj-003/linkme/blob/main/src/pages/PublicProfile.tsx): public page · Renders published profile/card data for visitors. · `src/pages/PublicProfile.tsx`
- [UI primitives](https://github.com/sibiraj-003/linkme/tree/main/src/components/ui): component library · `src/components/ui`

### Authoring

- [Dashboard](https://github.com/sibiraj-003/linkme/blob/main/src/pages/Dashboard.tsx): private page · Manages authored and published assets. · `src/pages/Dashboard.tsx`
- [Profile editor](https://github.com/sibiraj-003/linkme/blob/main/src/pages/Editor.tsx): authoring page · Edits profile and link content. · `src/pages/Editor.tsx`
- [Card designer](https://github.com/sibiraj-003/linkme/blob/main/src/pages/CardDesigner.tsx): authoring page · Customizes visual card design. · `src/pages/CardDesigner.tsx`

### Service Boundaries

- [Firebase client](https://github.com/sibiraj-003/linkme/blob/main/src/lib/firebase.ts): auth/document adapter · `src/lib/firebase.ts`
- [Firestore policy](https://github.com/sibiraj-003/linkme/blob/main/firestore.rules): authorization rules · `firestore.rules`
- [Supabase client](https://github.com/sibiraj-003/linkme/blob/main/src/lib/supabase.ts): data adapter · `src/lib/supabase.ts`
- [Supabase schema](https://github.com/sibiraj-003/linkme/blob/main/supabase_schema.sql): database contract · `supabase_schema.sql`
- [Cloudinary adapter](https://github.com/sibiraj-003/linkme/blob/main/src/lib/cloudinary.ts): media adapter · Encapsulates media upload and delivery. · `src/lib/cloudinary.ts`
- [Server runtime](https://github.com/sibiraj-003/linkme/blob/main/server.ts): server boundary · Mediates Gemini operations outside the browser. · `server.ts`
- [Environment contract](https://github.com/sibiraj-003/linkme/blob/main/.env.example): environment template · Includes server-side Gemini API configuration. · `.env.example`
- [Vercel deployment](https://github.com/sibiraj-003/linkme/blob/main/vercel.json): deployment config · `vercel.json`

## Connections

- Browser entry → React bootstrap: loads
- React bootstrap → Application shell: mounts
- Application shell → Auth context: provides
- Application shell → Home: routes to
- Application shell → Login: routes to
- Application shell → Dashboard: routes to
- Application shell → Public profile: routes to
- Application shell → UI primitives: composes
- Auth context → Firebase client: uses identity
- Firebase client → Firestore policy: governed by
- Dashboard → Auth context: requires
- Dashboard → Profile editor: opens
- Dashboard → Card designer: opens
- Profile editor → Supabase client: persists content
- Card designer → Supabase client: persists design
- Profile editor → Cloudinary adapter: uploads media
- Supabase client → Supabase schema: implements
- Public profile → Supabase client: reads published data
- Application shell → Server runtime: calls AI endpoints
- Server runtime → Environment contract: reads Gemini key
- Vercel deployment → Application shell: deploys client