How ganeshedula/url-shorter-fe works
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: App.jsx Route dispatcher · UrlsPage.jsx URL manager · apiClient.js HTTP client · AuthContext.jsx Auth state
Components 22
Authentication
- Auth pages
src/pages/auth - Auth state
src/context/AuthContext.jsx - Auth service
src/services/authService.js - Token storage
src/utils/tokenStorage.js - Route guard
src/components/common/ProtectedRoute.jsx
Link Management
- URL manager
src/pages/dashboard/UrlsPage.jsx - Short-link form
src/components/url/UrlFormCard.jsx - Link table
src/components/url/UrlTable.jsx - Link summary
src/components/url/StatCard.jsx - URL library hook
src/hooks/useUrlLibrary.js - URL service
src/services/urlService.js
Analytics
- Analytics view
src/pages/dashboard/AnalyticsPage.jsx - Analytics service
src/services/analyticsService.js - Analytics charts
src/components/charts
App Platform
- Route dispatcher
src/App.jsx - Dashboard views
src/pages/dashboard - HTTP client
src/services/apiClient.js - Theme state
src/context/ThemeContext.jsx - Page layouts
src/layouts - Error pages
src/pages
Other components
- Visitor
- Backend API
Connections 27
- 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