Dynalink Frontend

This repository contains the frontend for the Dynalink URL shortener application. It is a Vite + React (TypeScript) app that communicates with the Dynalink backend API.

What this project is

• A single-page app (SPA) built with Vite and React.
• Provides UI to sign up / sign in, create short links, edit links, see link history and manage short codes.
• Communicates with the backend API through an Axios client. The base API URL is configured via environment variables.

Prerequisites

• Node.js 18+ (recommended) and a package manager such as npm or pnpm.
• The Dynalink backend running and reachable (default http://localhost:3000).

Environment

This project uses Vite environment variables.

Example .env

VITE_API_BASE_URL=http://localhost:3000
VITE_APP_HOST=dynalink.app

Notes:

• The frontend expects the backend API to expose the routes documented in the backend project (/auth/*, /links, etc.).
• Vite exposes variables that begin with VITE_ through import.meta.env.

Install dependencies

Open terminal and run:

npm install

Development

Run the dev server (Vite):

npm run dev

This will start the frontend dev server (Hot Module Replacement). By default Vite prints the local and network URL where the app is served.

Before using the UI, ensure your backend is running. Example (from the backend folder):

npm run dev

Notes about authentication and tokens

• The frontend stores the JWT token in localStorage under the key dynalink_token.
• The Axios instance in src/utils/api.ts attaches the Authorization: Bearer <token> header automatically using an interceptor.

Troubleshooting

• If API requests fail, check:
  • The backend is running and listening on the expected port.
  • .env VITE_API_BASE_URL is set to the correct backend URL (include protocol, e.g. http://localhost:3000).
  • Browser console and network tab for the exact request and response.