Description
SnipURL is a modern, feature-rich URL shortener built for performance and usability. It enables users to shorten links instantly, analyze engagement, and manage branded URLs. With a sleek ShadCN UI interface and a Supabase-powered backend, it delivers a polished and scalable experience.
Tech Stack
- Frontend: React 18, Tailwind CSS + ShadCN UI, Vite, Lucide Icons
- Backend & Infra: Supabase (Auth, Database, API), Vercel Analytics, UA-Parser-JS
- Developer Tooling: TypeScript, Formik + Yup, ESLint + Types, Recharts
Key Features
- Instant URL Shortening — Generate clean, trackable short links in one click.
- Analytics Dashboard — Track total clicks, device types, and user geolocation.
- User Accounts & History — Registered users can view link history, track analytics, and manage links.
Challenges & Solutions
1. Real-Time Analytics Without Performance Lag
Challenge: Providing live tracking for clicks, devices, and geolocation without slowing down the interface.
Solution: Integrated Supabase for real-time database sync and UA-Parser-JS for efficient device detection, optimizing queries to deliver instant analytics updates without heavy payloads.
2. Consistent & Scalable UI Design
Challenge: Maintaining a cohesive look across multiple pages and components while enabling future scalability.
Solution: Used ShadCN UI with Tailwind CSS to create reusable, theme-consistent components, ensuring visual harmony and rapid development.
3. Reliable Link Management
Challenge: Allowing users to edit, delete, and track links without risking data inconsistency.
Solution: Implemented strong schema validation with Formik + Yup and structured database relationships in Supabase to maintain data integrity.
What I Learned
- Implementing Supabase for authentication, database, and API workflows.
- Building a responsive analytics dashboard with real-time data.
- Creating reusable and consistent UI components with ShadCN UI and Tailwind CSS.
Screenshots
