URL Shortener Platform
April 2026
A full-stack URL shortener with authentication, custom aliases, expiry support, QR generation, click analytics, and user-owned URL management.
Overview
The URL Shortener Platform is a completed full-stack web application for creating and managing shortened links. It includes user authentication, custom aliases, expiry dates, QR generation, click analytics, and a user dashboard.
I built it as a practical project because a URL shortener looks simple but quickly becomes a real application once ownership, redirects, analytics, and deployment are included.
The project connects a .NET 8 backend, PostgreSQL database, Redis cache, and React frontend deployed across Render and Vercel, with real production concerns such as CORS, environment variables, and API configuration.
Problem
A useful URL shortener has to do more than store a long URL and return a short one. It must generate unique short codes, support custom aliases, enforce authenticated ownership, handle redirects quickly, check expiry rules, track analytics, and stay reliable after deployment. Small mistakes in these flows can lead to broken redirects, duplicate aliases, or users seeing data they do not own.
My Role / Contribution
I built the backend APIs, JWT authentication, PostgreSQL schema, redirect logic, analytics tracking, frontend dashboard, and deployment flow. I also handled the integration details between the React frontend and .NET API, including CORS, environment variables, and production endpoint configuration.
Key Features
- Authenticated URL management with user-owned links.
- Custom aliases and generated short codes.
- Expiry support for temporary links.
- QR code generation for sharing shortened URLs.
- Click analytics and redirect tracking.
- Dashboard for managing a user's own links.
- PostgreSQL-backed constraints for aliases and URL ownership.
- Rate limiting and structured logging for safer API behavior.
Challenges
- Balancing short-code uniqueness with simple, maintainable generation logic.
- Keeping redirects fast while still recording analytics reliably.
- Handling ownership, custom aliases, and expiry checks without creating scattered validation paths.
- Making frontend and backend deployments communicate correctly across different hosting platforms.
- Managing production configuration for API URLs, CORS origins, JWT settings, and database connections.
Learnings
- Small products still need careful domain modeling once authentication and analytics are added.
- Redirect flows benefit from narrow, predictable API paths and strong database constraints.
- Deployment details are part of the product when the app has separate frontend and backend surfaces.
- CORS and environment variables are easier to handle when deployment configuration is planned early.
Architecture / Flow
- The React frontend handles login, URL creation, URL management, and analytics screens.
- Requests go to the ASP.NET Core Web API, where validation and authentication are applied.
- The service layer handles short-code generation, custom alias checks, expiry rules, and user ownership.
- PostgreSQL stores users, URLs, aliases, expiry metadata, and click events.
- Public redirect requests use Redis cache-aside lookup for short-code resolution, fall back to PostgreSQL when needed, check expiry, record click analytics, and return the destination URL.
- Serilog captures structured logs, rate limiting protects API endpoints, and Docker keeps backend setup reproducible.
- The backend is deployed on Render and the frontend is deployed on Vercel, which required careful CORS and environment variable setup.
Tech Stack
Backend
Data
Frontend
Deployment
Next Improvements
- Add more analytics views such as referrers, devices, and time-based charts.
- Improve Redis caching strategy for high-traffic redirect lookups.
- Add more automated tests around alias uniqueness, expiry, and ownership rules.
- Improve error states and empty states in the frontend dashboard.
Links