Exercises for Programmers AI

Full Programs
URL Shortener
Not implemented as a static page

A URL shortener requires server-side route handling and a persistent shared datastore — two things a static client-rendered Next.js page cannot provide on its own.

How this would work

Users submit a long URL via a form. The server generates a short code (e.g. abc1234) and stores the mapping — short code → long URL, plus a visit counter — in a persistent database such as PostgreSQL or Redis.

When someone visits /abc1234, the server looks up the code, increments the visit counter, and issues an HTTP 301 or 302 redirect to the original long URL. A stats page at /abc1234/stats would query the same record and display the short URL, the long URL, and the total visit count.

Input validation would reject anything that isn't a well-formed URL before a code is generated.

Why it needs a backend

The redirect from /abc1234 to the original URL must be handled by a server that can issue an HTTP redirect response. A browser-only page cannot intercept an arbitrary URL path and redirect the visitor — that requires a running server or a serverless function wired up to every short-code route. Additionally, the datastore must be shared across all visitors, so localStorage (which is per-browser) is not a viable substitute.