Overview
URL Shortener is a modern web application designed to shorten long URLs using custom or randomly generated slugs. It supports generating QR codes for each shortened link and includes a minimal, responsive interface built with Tailwind CSS and Next.js.
The Tech Stack
This application was built using:
- Next.js for full-stack capabilities and server-side rendering
- TypeScript for type safety and maintainability
- Prisma for interacting with the database using an elegant ORM
- Tailwind CSS for fast and responsive styling
- QRCode for generating QR code images from shortened URLs
Features
- 🔗 Shorten long URLs with custom or randomly generated slugs
- 🔐 Validates URLs and prevents shortening of internal links
- 📱 Responsive interface built with Tailwind CSS
- 📸 Generates QR code for each shortened link
- 🔁 Automatically redirects short links to their full URL destination
Implementation Highlights
- API route handles slug validation, uniqueness check, and link creation
- Uses Zod for input validation and clean error handling
- Each link redirects through
/l/[slug], with success confirmation in/s/[slug] - QR code is generated using
qrcode.toDataURL()for client download - Slug collision is avoided by checking database before saving
Future Enhancements
- 📊 Click analytics and visit tracking
- 📆 Expiration dates for temporary links
- 🔐 Link password protection and admin dashboard
Conclusion
URL Shortener is a simple yet powerful utility that combines performance and usability. It leverages modern web tools and follows best practices in validation, security, and performance.
🔗 Try it here: Live App
🛠️ View the code on GitHub
Thanks for checking out the project!
