# ganeshedula/url-shorter-fe architecture

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

- Interactive diagram: https://gitdiagram.com/ganeshedula/url-shorter-fe
- Repository: https://github.com/ganeshedula/url-shorter-fe

## Overview

LinkCraft is a URL-shortener frontend: visitors authenticate, create and manage short links, then inspect link and account analytics in a protected dashboard. The graph separates authentication, link management, analytics and shared application infrastructure. Sampled source confirms routing, auth state, token refresh and URL-list fetching; some page-to-service wiring and other documented features are represented only where their module paths and product role are clear.

Main entry points: [`src/App.jsx`](https://github.com/ganeshedula/url-shorter-fe/blob/main/src/App.jsx) (Route dispatcher), [`src/pages/dashboard/UrlsPage.jsx`](https://github.com/ganeshedula/url-shorter-fe/blob/main/src/pages/dashboard/UrlsPage.jsx) (URL manager), [`src/services/apiClient.js`](https://github.com/ganeshedula/url-shorter-fe/blob/main/src/services/apiClient.js) (HTTP client), [`src/context/AuthContext.jsx`](https://github.com/ganeshedula/url-shorter-fe/blob/main/src/context/AuthContext.jsx) (Auth state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_auth["Authentication"]
  node_authpages["Auth pages"]
  node_authstate["Auth state<br/>[AuthContext.jsx]"]
  node_authservice["Auth service<br/>[authService.js]"]
  node_tokens[("Token storage<br/>[tokenStorage.js]")]
  node_protected["Route guard<br/>[ProtectedRoute.jsx]"]
end

subgraph group_links["Link Management"]
  node_urlpage["URL manager<br/>[UrlsPage.jsx]"]
  node_urlform["Short-link form<br/>[UrlFormCard.jsx]"]
  node_urltable["Link table<br/>[UrlTable.jsx]"]
  node_urlstats["Link summary<br/>[StatCard.jsx]"]
  node_urlhook["URL library hook<br/>[useUrlLibrary.js]"]
  node_urlservice["URL service<br/>[urlService.js]"]
end

subgraph group_analytics["Analytics"]
  node_analyticspage["Analytics view<br/>[AnalyticsPage.jsx]"]
  node_analyticservice["Analytics service"]
  node_charts["Analytics charts"]
end

subgraph group_platform["App Platform"]
  node_app["Route dispatcher<br/>[App.jsx]"]
  node_dashboard["Dashboard views"]
  node_apiclient["HTTP client<br/>[apiClient.js]"]
  node_theme["Theme state<br/>[ThemeContext.jsx]"]
  node_layouts["Page layouts"]
  node_errors["Error pages"]
end

node_visitor(("Visitor"))
node_backend{{"Backend API"}}

node_visitor -->|"opens app"| node_app
node_app -->|"routes to"| node_authpages
node_app -->|"guards dashboard"| node_protected
node_protected -->|"checks session"| node_authstate
node_app -->|"routes to"| node_dashboard
node_app -->|"wraps routes"| node_layouts
node_app -->|"routes failures"| node_errors
node_authpages -->|"submits auth"| node_authstate
node_authstate -->|"requests auth"| node_authservice
node_authstate -->|"stores tokens"| node_tokens
node_authservice -->|"sends requests"| node_apiclient
node_dashboard -->|"routes to"| node_urlpage
node_dashboard -->|"routes to"| node_analyticspage
node_urlpage -->|"presents form"| node_urlform
node_urlpage -->|"presents links"| node_urltable
node_urlpage -->|"shows summary"| node_urlstats
node_urlpage -->|"loads links"| node_urlhook
node_urlhook -->|"lists links"| node_urlservice
node_urlform -->|"creates links"| node_urlservice
node_urltable -->|"manages links"| node_urlservice
node_urlservice -->|"sends requests"| node_apiclient
node_analyticspage -->|"loads analytics"| node_analyticservice
node_analyticspage -->|"renders charts"| node_charts
node_analyticservice -->|"sends requests"| node_apiclient
node_apiclient -->|"reads tokens"| node_tokens
node_apiclient -->|"calls API"| node_backend
node_theme -->|"sets appearance"| node_visitor

click node_app "https://github.com/ganeshedula/url-shorter-fe/blob/main/src/App.jsx"
click node_authpages "https://github.com/ganeshedula/url-shorter-fe/tree/main/src/pages/auth"
click node_authstate "https://github.com/ganeshedula/url-shorter-fe/blob/main/src/context/AuthContext.jsx"
click node_authservice "https://github.com/ganeshedula/url-shorter-fe/blob/main/src/services/authService.js"
click node_tokens "https://github.com/ganeshedula/url-shorter-fe/blob/main/src/utils/tokenStorage.js"
click node_protected "https://github.com/ganeshedula/url-shorter-fe/blob/main/src/components/common/ProtectedRoute.jsx"
click node_dashboard "https://github.com/ganeshedula/url-shorter-fe/tree/main/src/pages/dashboard"
click node_urlpage "https://github.com/ganeshedula/url-shorter-fe/blob/main/src/pages/dashboard/UrlsPage.jsx"
click node_urlform "https://github.com/ganeshedula/url-shorter-fe/blob/main/src/components/url/UrlFormCard.jsx"
click node_urltable "https://github.com/ganeshedula/url-shorter-fe/blob/main/src/components/url/UrlTable.jsx"
click node_urlstats "https://github.com/ganeshedula/url-shorter-fe/blob/main/src/components/url/StatCard.jsx"
click node_urlhook "https://github.com/ganeshedula/url-shorter-fe/blob/main/src/hooks/useUrlLibrary.js"
click node_urlservice "https://github.com/ganeshedula/url-shorter-fe/blob/main/src/services/urlService.js"
click node_analyticspage "https://github.com/ganeshedula/url-shorter-fe/blob/main/src/pages/dashboard/AnalyticsPage.jsx"
click node_analyticservice "https://github.com/ganeshedula/url-shorter-fe/blob/main/src/services/analyticsService.js"
click node_charts "https://github.com/ganeshedula/url-shorter-fe/tree/main/src/components/charts"
click node_apiclient "https://github.com/ganeshedula/url-shorter-fe/blob/main/src/services/apiClient.js"
click node_theme "https://github.com/ganeshedula/url-shorter-fe/blob/main/src/context/ThemeContext.jsx"
click node_layouts "https://github.com/ganeshedula/url-shorter-fe/tree/main/src/layouts"
click node_errors "https://github.com/ganeshedula/url-shorter-fe/tree/main/src/pages"

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_authpages,node_authstate,node_authservice,node_tokens,node_protected toneBlue
class node_urlpage,node_urlform,node_urltable,node_urlstats,node_urlhook,node_urlservice toneAmber
class node_analyticspage,node_analyticservice,node_charts,node_backend toneMint
class node_app,node_dashboard,node_apiclient,node_theme,node_layouts,node_errors toneRose
class node_visitor toneIndigo
```

## Components

### Authentication

- [Auth pages](https://github.com/ganeshedula/url-shorter-fe/tree/main/src/pages/auth): `src/pages/auth`
- [Auth state](https://github.com/ganeshedula/url-shorter-fe/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`
- [Auth service](https://github.com/ganeshedula/url-shorter-fe/blob/main/src/services/authService.js): `src/services/authService.js`
- [Token storage](https://github.com/ganeshedula/url-shorter-fe/blob/main/src/utils/tokenStorage.js): `src/utils/tokenStorage.js`
- [Route guard](https://github.com/ganeshedula/url-shorter-fe/blob/main/src/components/common/ProtectedRoute.jsx): `src/components/common/ProtectedRoute.jsx`

### Link Management

- [URL manager](https://github.com/ganeshedula/url-shorter-fe/blob/main/src/pages/dashboard/UrlsPage.jsx): `src/pages/dashboard/UrlsPage.jsx`
- [Short-link form](https://github.com/ganeshedula/url-shorter-fe/blob/main/src/components/url/UrlFormCard.jsx): `src/components/url/UrlFormCard.jsx`
- [Link table](https://github.com/ganeshedula/url-shorter-fe/blob/main/src/components/url/UrlTable.jsx): `src/components/url/UrlTable.jsx`
- [Link summary](https://github.com/ganeshedula/url-shorter-fe/blob/main/src/components/url/StatCard.jsx): `src/components/url/StatCard.jsx`
- [URL library hook](https://github.com/ganeshedula/url-shorter-fe/blob/main/src/hooks/useUrlLibrary.js): `src/hooks/useUrlLibrary.js`
- [URL service](https://github.com/ganeshedula/url-shorter-fe/blob/main/src/services/urlService.js): `src/services/urlService.js`

### Analytics

- [Analytics view](https://github.com/ganeshedula/url-shorter-fe/blob/main/src/pages/dashboard/AnalyticsPage.jsx): `src/pages/dashboard/AnalyticsPage.jsx`
- [Analytics service](https://github.com/ganeshedula/url-shorter-fe/blob/main/src/services/analyticsService.js): `src/services/analyticsService.js`
- [Analytics charts](https://github.com/ganeshedula/url-shorter-fe/tree/main/src/components/charts): `src/components/charts`

### App Platform

- [Route dispatcher](https://github.com/ganeshedula/url-shorter-fe/blob/main/src/App.jsx): `src/App.jsx`
- [Dashboard views](https://github.com/ganeshedula/url-shorter-fe/tree/main/src/pages/dashboard): `src/pages/dashboard`
- [HTTP client](https://github.com/ganeshedula/url-shorter-fe/blob/main/src/services/apiClient.js): `src/services/apiClient.js`
- [Theme state](https://github.com/ganeshedula/url-shorter-fe/blob/main/src/context/ThemeContext.jsx): `src/context/ThemeContext.jsx`
- [Page layouts](https://github.com/ganeshedula/url-shorter-fe/tree/main/src/layouts): `src/layouts`
- [Error pages](https://github.com/ganeshedula/url-shorter-fe/tree/main/src/pages): `src/pages`

### Other components

- **Visitor**
- **Backend API**

## Connections

- Visitor → Route dispatcher: opens app
- Route dispatcher → Auth pages: routes to
- Route dispatcher → Route guard: guards dashboard
- Route guard → Auth state: checks session
- Route dispatcher → Dashboard views: routes to
- Route dispatcher → Page layouts: wraps routes
- Route dispatcher → Error pages: routes failures
- Auth pages → Auth state: submits auth
- Auth state → Auth service: requests auth
- Auth state → Token storage: stores tokens
- Auth service → HTTP client: sends requests
- Dashboard views → URL manager: routes to
- Dashboard views → Analytics view: routes to
- URL manager → Short-link form: presents form
- URL manager → Link table: presents links
- URL manager → Link summary: shows summary
- URL manager → URL library hook: loads links
- URL library hook → URL service: lists links
- Short-link form → URL service: creates links
- Link table → URL service: manages links
- URL service → HTTP client: sends requests
- Analytics view → Analytics service: loads analytics
- Analytics view → Analytics charts: renders charts
- Analytics service → HTTP client: sends requests
- HTTP client → Token storage: reads tokens
- HTTP client → Backend API: calls API
- Theme state → Visitor: sets appearance