dannick10/frontend-ykminiurl

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