URL

Monorepo for a URL-shortening app with a TypeScript backend and a Vite + React frontend.

Overview

Backend: TypeScript + tRPC + Prisma (Postgres). Located in backend/. Frontend: Vite + React + TypeScript. Located in frontend/.

Repo structure

• src/ — server source (index.ts, routers/urlRouter.ts, context.ts).
• prisma/ — schema.prisma and migration history.

Prerequisites

Backend — local setup

1. Copy or create a .env in backend/ with:

   DATABASE_URL="mysql://USER:PASSWORD@HOST:PORT/DATABASE"
   PORT=BACKEND_PORT
   
   DB_HOST=localhost
   DB_PORT=3306
   DB_USER=_YOUR_DB_USER
   DB_PASSWORD=YOUR_DB_PASSWORD
   DB_NAME=YOUR_DB_NAME
   

2. Install dependencies and prepare Prisma:

   cd backend npm install npx prisma generate npx prisma migrate dev --name init

3. Run the dev server:

   npm run dev

(If dev script differs, check backend/package.json.)

Frontend — local setup

1. Install dependencies and run dev server:

   cd frontend npm install npm run dev

2. Open the URL printed by Vite (usually http://localhost:5173).

How it works

• User creates a short link in the frontend which calls the backend (tRPC) API.
• Backend generates a unique short code and stores a record { code, originalUrl, createdAt, clicks } in Postgres via Prisma.
• Frontend receives the shortened URL and displays it to the user.
• When someone visits https://your-domain/{code}, the backend route looks up the code, increments clicks, and responds with a 302 redirect to the original URL.
• The backend exposes procedures (create, fetch, stats) in the tRPC router so the frontend can create links and fetch analytics.

API & routing

• tRPC router: backend/src/routers/urlRouter.ts — procedures for creating short links, resolving codes, and retrieving stats.
• Redirect route: e.g. GET /:code handled by the server entry (backend/src/index.ts) which performs the lookup and redirect.