# dannick10/frontend-ykminiurl architecture

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

- Interactive diagram: https://gitdiagram.com/dannick10/frontend-ykminiurl
- Repository: https://github.com/dannick10/frontend-ykminiurl

## Overview

#### Purpose and deployment shape
YKMiniURL is a Next.js/TypeScript frontend for creating, protecting, inspecting, and following shortened URLs. It is deployed separately from its Node/Express backend: the frontend is intended for Vercel, while the API is hosted on Render and documented through Swagger. MongoDB/Mongoose, bcrypt, and redirect/click analytics belong to the external backend repository rather than this codebase.

#### Application entry and route shell
The App Router root establishes the shared document/layout and global styling; page-level loading and missing-route behavior are also centralized here.
- `src/app/layout.tsx`
- `src/app/globals.css`
- `src/app/loading.tsx`
- `src/app/not-found.tsx`

The primary public entry is the homepage, with dedicated routes for information, commercial services, legal pages, developer API views, and redirect handling.
- `src/app/page.tsx`
- `src/app/redirect/page.tsx`
- `src/app/dev/page.tsx`

#### URL-shortening interaction flow
The homepage UI collects a destination URL and likely optional protection settings through reusable inputs, then delegates API work to a shortening hook. The hook/service boundary keeps React state and request orchestration separate from backend endpoint details.
- `src/components/Inputs.tsx`
- `src/hooks/useShortLink.tsx`
- `src/services/apiServices.ts`

URL normalization/transformation is isolated before or around request/display handling, while link response shapes are explicitly typed.
- `src/utils/LinkTratament.ts`
- `src/interfaces/LinkInterfaces.ts`
- `src/services/apiEndpoint.ts`

#### Password-protected redirect flow
The redirect route is a distinct user journey for resolving short URLs. Password-specific state/validation is separated into its own hook, enabling backend-enforced bcrypt protection without exposing cryptographic implementation in the browser.
- `src/app/redirect/page.tsx`
- `src/hooks/usePassword.tsx`
- `src/services/apiServices.ts`

Control crosses from the browser to the remote API for link lookup, password validation, analytics recording, and ultimate destination resolution.

#### Shared presentation and navigation
A shared header/footer frame provides site navigation; responsive navigation and reusable feedback/card components support the public workflows.
- `src/components/Header.tsx`
- `src/components/Footer.tsx`
- `src/components/ButtonHamburguer.tsx`

Result presentation, copied-link interactions, alerts, and counters are componentized rather than embedded solely in pages.
- `src/components/Cards.tsx`
- `src/components/Alert.tsx`
- `src/utils/copyBoard.ts`

#### Informational, service, and developer surfaces
Non-core workflow routes communicate product information, pricing/services, privacy/terms, and API endpoint views. The developer route is driven by endpoint-view data and a tabbed display, making API discoverability a frontend feature alongside the backend Swagger documentation.
- `src/app/services/page.tsx`
- `src/app/info/page.tsx`
- `src/app/dev/components/TabEndpoints.tsx`
- `src/app/dev/data/EndpointsViews.ts`

#### External integrations and monetization
The frontend consumes a remotely hosted Express API; the API owns MongoDB persistence, Mongoose models, bcrypt, short-link creation, redirects, and analytics. Google AdSense is integrated as a client-side advertising concern, with static crawler/advertising metadata served from `public`.
- `src/components/GoogleAdsenseScript.tsx`
- `src/components/adsense.tsx`
- `public/ads.txt`
- `public/robots.txt`
- `public/sitemap.xml`

Main entry points: [`src/app/layout.tsx`](https://github.com/dannick10/frontend-ykminiurl/blob/main/src/app/layout.tsx) (App shell), [`src/hooks/useShortLink.tsx`](https://github.com/dannick10/frontend-ykminiurl/blob/main/src/hooks/useShortLink.tsx) (Short-link hook), [`src/services/apiServices.ts`](https://github.com/dannick10/frontend-ykminiurl/blob/main/src/services/apiServices.ts) (API client), [`src/app/redirect/page.tsx`](https://github.com/dannick10/frontend-ykminiurl/blob/main/src/app/redirect/page.tsx) (Redirect flow)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Next.js frontend"]
  node_app_shell["App shell<br/>App Router shell<br/>[layout.tsx]"]
  node_home["Homepage<br/>public route<br/>[page.tsx]"]
  node_inputs["URL inputs<br/>form components<br/>[Inputs.tsx]"]
  node_short_link_hook["Short-link hook<br/>React hook<br/>[useShortLink.tsx]"]
  node_link_contracts["Link contracts<br/>types and utilities<br/>[LinkInterfaces.ts]"]
  node_api_client{{"API client<br/>service layer<br/>[apiServices.ts]"}}
  node_results_feedback["Results and feedback<br/>presentation components<br/>[Cards.tsx]"]
  node_redirect["Redirect flow<br/>public route<br/>[page.tsx]"]
  node_password_hook["Password hook<br/>React hook<br/>[usePassword.tsx]"]
  node_site_frame["Site navigation<br/>shared components<br/>[Header.tsx]"]
  node_content_routes["Content routes<br/>public routes<br/>[page.tsx]"]
  node_developer_views["Developer API views<br/>developer route<br/>[TabEndpoints.tsx]"]
  node_ads["Advertising<br/>client integration"]
  node_public_metadata["Crawler metadata<br/>static public files<br/>[ads.txt]"]
end

subgraph group_backend["External backend"]
  node_express_api{{"Express API<br/>remote service"}}
  node_swagger["Swagger docs<br/>API documentation"]
  node_data_security[("Link data and protection<br/>backend infrastructure")]
  node_redirect_analytics["Resolution analytics<br/>backend workflow"]
end

node_app_shell -->|"hosts"| node_home
node_app_shell -->|"hosts"| node_redirect
node_app_shell -->|"hosts"| node_content_routes
node_app_shell -->|"hosts"| node_developer_views
node_app_shell -->|"uses"| node_site_frame
node_app_shell -->|"loads"| node_ads
node_home -->|"collects URL"| node_inputs
node_inputs -->|"submits"| node_short_link_hook
node_short_link_hook -->|"uses"| node_link_contracts
node_short_link_hook -->|"calls"| node_api_client
node_short_link_hook -->|"updates"| node_results_feedback
node_redirect -->|"uses when protected"| node_password_hook
node_redirect -->|"resolves link"| node_api_client
node_password_hook -->|"validates password"| node_api_client
node_api_client -->|"HTTPS requests"| node_express_api
node_express_api -->|"stores and verifies"| node_data_security
node_express_api -->|"records and resolves"| node_redirect_analytics
node_developer_views -.->|"complements"| node_swagger
node_swagger -->|"documents"| node_express_api
node_public_metadata -.->|"supports crawler policy"| node_ads

click node_app_shell "https://github.com/dannick10/frontend-ykminiurl/blob/main/src/app/layout.tsx"
click node_home "https://github.com/dannick10/frontend-ykminiurl/blob/main/src/app/page.tsx"
click node_inputs "https://github.com/dannick10/frontend-ykminiurl/blob/main/src/components/Inputs.tsx"
click node_short_link_hook "https://github.com/dannick10/frontend-ykminiurl/blob/main/src/hooks/useShortLink.tsx"
click node_link_contracts "https://github.com/dannick10/frontend-ykminiurl/blob/main/src/interfaces/LinkInterfaces.ts"
click node_api_client "https://github.com/dannick10/frontend-ykminiurl/blob/main/src/services/apiServices.ts"
click node_results_feedback "https://github.com/dannick10/frontend-ykminiurl/blob/main/src/components/Cards.tsx"
click node_redirect "https://github.com/dannick10/frontend-ykminiurl/blob/main/src/app/redirect/page.tsx"
click node_password_hook "https://github.com/dannick10/frontend-ykminiurl/blob/main/src/hooks/usePassword.tsx"
click node_site_frame "https://github.com/dannick10/frontend-ykminiurl/blob/main/src/components/Header.tsx"
click node_content_routes "https://github.com/dannick10/frontend-ykminiurl/blob/main/src/app/info/page.tsx"
click node_developer_views "https://github.com/dannick10/frontend-ykminiurl/blob/main/src/app/dev/components/TabEndpoints.tsx"
click node_ads "https://github.com/dannick10/frontend-ykminiurl/blob/main/src/components/GoogleAdsenseScript.tsx"
click node_public_metadata "https://github.com/dannick10/frontend-ykminiurl/blob/main/public/ads.txt"

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_shell,node_home,node_inputs,node_short_link_hook,node_link_contracts,node_api_client,node_results_feedback,node_redirect,node_password_hook,node_site_frame,node_content_routes,node_developer_views,node_ads,node_public_metadata toneBlue
class node_express_api,node_swagger,node_data_security,node_redirect_analytics toneAmber
```

## Components

### Next.js frontend

Vercel-deployed App Router application.

- [App shell](https://github.com/dannick10/frontend-ykminiurl/blob/main/src/app/layout.tsx): App Router shell · Shared layout, global styles, loading, and not-found behavior. · `src/app/layout.tsx`
- [Homepage](https://github.com/dannick10/frontend-ykminiurl/blob/main/src/app/page.tsx): public route · Primary URL-shortening entry. · `src/app/page.tsx`
- [URL inputs](https://github.com/dannick10/frontend-ykminiurl/blob/main/src/components/Inputs.tsx): form components · Collects destination and optional protection settings. · `src/components/Inputs.tsx`
- [Short-link hook](https://github.com/dannick10/frontend-ykminiurl/blob/main/src/hooks/useShortLink.tsx): React hook · Owns shortening state and request orchestration. · `src/hooks/useShortLink.tsx`
- [Link contracts](https://github.com/dannick10/frontend-ykminiurl/blob/main/src/interfaces/LinkInterfaces.ts): types and utilities · Defines link shapes and URL normalization. · `src/interfaces/LinkInterfaces.ts`
- [API client](https://github.com/dannick10/frontend-ykminiurl/blob/main/src/services/apiServices.ts): service layer · Encapsulates remote endpoint calls and endpoint definitions. · `src/services/apiServices.ts`
- [Results and feedback](https://github.com/dannick10/frontend-ykminiurl/blob/main/src/components/Cards.tsx): presentation components · Displays generated links, alerts, counters, and copy actions. · `src/components/Cards.tsx`
- [Redirect flow](https://github.com/dannick10/frontend-ykminiurl/blob/main/src/app/redirect/page.tsx): public route · Resolves short URLs and handles protected-link journeys. · `src/app/redirect/page.tsx`
- [Password hook](https://github.com/dannick10/frontend-ykminiurl/blob/main/src/hooks/usePassword.tsx): React hook · Manages password-specific state and validation. · `src/hooks/usePassword.tsx`
- [Site navigation](https://github.com/dannick10/frontend-ykminiurl/blob/main/src/components/Header.tsx): shared components · Header, footer, and responsive navigation. · `src/components/Header.tsx`
- [Content routes](https://github.com/dannick10/frontend-ykminiurl/blob/main/src/app/info/page.tsx): public routes · Information, services, and legal surfaces. · `src/app/info/page.tsx`
- [Developer API views](https://github.com/dannick10/frontend-ykminiurl/blob/main/src/app/dev/components/TabEndpoints.tsx): developer route · Tabbed frontend endpoint discoverability views. · `src/app/dev/components/TabEndpoints.tsx`
- [Advertising](https://github.com/dannick10/frontend-ykminiurl/blob/main/src/components/GoogleAdsenseScript.tsx): client integration · Google AdSense scripts and ad components. · `src/components/GoogleAdsenseScript.tsx`
- [Crawler metadata](https://github.com/dannick10/frontend-ykminiurl/blob/main/public/ads.txt): static public files · Advertising and search crawler metadata. · `public/ads.txt`

### External backend

Separately deployed Render API and its owned infrastructure.

- **Express API**: remote service · Render-hosted API for links, protection, redirects, and analytics.
- **Swagger docs**: API documentation · Backend API documentation surface.
- **Link data and protection**: backend infrastructure · MongoDB/Mongoose persistence and bcrypt enforcement.
- **Resolution analytics**: backend workflow · Resolves destinations and records redirect clicks.

## Connections

- App shell → Homepage: hosts
- App shell → Redirect flow: hosts
- App shell → Content routes: hosts
- App shell → Developer API views: hosts
- App shell → Site navigation: uses
- App shell → Advertising: loads
- Homepage → URL inputs: collects URL
- URL inputs → Short-link hook: submits
- Short-link hook → Link contracts: uses
- Short-link hook → API client: calls
- Short-link hook → Results and feedback: updates
- Redirect flow → Password hook: uses when protected
- Redirect flow → API client: resolves link
- Password hook → API client: validates password
- API client → Express API: HTTPS requests
- Express API → Link data and protection: stores and verifies
- Express API → Resolution analytics: records and resolves
- Developer API views → Swagger docs: complements
- Swagger docs → Express API: documents
- Crawler metadata → Advertising: supports crawler policy