Url Shorter

Url Shorter is a self-hostable URL shortening and visitor analytics tool built on Next.js, Postgres, and Redis, deployed as serverless functions on Vercel.

What is Url Shorter?

Url Shorter is a full-stack web app that takes a long URL as input and produces a short access code, then records detailed visit analytics whenever that short link is used. It runs on Next.js, stores URL mappings in Redis through Upstash, and persists visitor data in Postgres via the Prisma ORM. The frontend uses Chakra UI with @icon-park/react icons, offers dark mode, and supports both English and Simplified Chinese. A live demo is available at zlz.pw.

Key Features

• Short URL generation — Generates short codes with nanoid and validates input URLs using the is-url library before saving the mapping.
• Visitor tracking — Logs 16 data points per visit: time, IP address, region, country, city, latitude/longitude, user agent string, browser name and version, OS name and version, CPU, device model and vendor, and rendering engine name and version.
• Analytics dashboard — Visualizes visitor data with charts from @ant-design/plots, an interactive globe built with cobe, and a location map rendered by Leaflet and react-leaflet.
• Responsive UI — Layout built with Chakra UI adapts to mobile and desktop screens; dark mode is available.
• i18n — UI text is localized for English and Chinese, and a Simplified Chinese README (README_ZH.md) is included.
• Serverless architecture — Uses Next.js edge middleware to capture visit information and is designed to deploy on Vercel; Redis/Upstash and Postgres keep state.
• Authentication — Includes NextAuth for GitHub OAuth login, protecting the tracking dashboard.

Who is it for?

• Developers who want a production-ready Next.js example that combines serverless edge functions, Redis, Postgres, Prisma, and OAuth.
• Teams needing self-hosted link tracking that want to keep click analytics on their own infrastructure rather than in a commercial product.
• Open-source learners interested in building real-time analytics dashboards with maps and charts using modern React libraries.

What can you do with Url Shorter?

• Track referral sources: Create short links for social posts or campaigns and see the visitor's country, city, and browser/OS breakdowns in the dashboard.
• Monitor device profiles: The recorded device model, vendor, CPU, and rendering engine let you see which hardware and software your audience uses.
• Deploy your own link service: Host a branded URL shortener on Vercel with custom domain and OAuth-protected analytics accessible after GitHub login.

FAQ

What data does Url Shorter collect?

Url Shorter records the visit time, IP address, geographic location (region, country, city, latitude/longitude), user agent, browser name and version, operating system name and version, CPU, device model and vendor, and rendering engine name and version.

Does Url Shorter support multiple languages?

Yes. The UI includes i18n for English and Simplified Chinese, and the project provides a Chinese-language README (README_ZH.md).

Can I deploy Url Shorter on Vercel?

Yes. The project is built on Next.js and uses Vercel's serverless deployment pattern, with NextAuth for GitHub OAuth and Upstash for Redis. It can be deployed as a serverless application on Vercel.

Does Url Shorter have a dark mode?

Yes, the Chakra UI layout includes a dark mode toggle, and the screenshots in the repository show both light and dark index pages.