✂️ bitSnip — Simplify, Share & Track URLs in Seconds

🚀 Live: https://bitsnip.vercel.app

🔗 GitHub: Anirudhakashid/URL-shortner

📌 Introduction :

In a world dominated by digital sharing, long, messy URLs can feel like a nuisance — especially on social media or when printed on flyers. That’s where bitSnip comes in — a minimal yet powerful URL shortener that transforms long URLs into sleek, trackable links with QR codes and analytics. Whether you're a marketer, student, or someone who just wants to clean up links, bitSnip makes it effortless.

🔧 Tech Stack :

Frontend

• React.js

• Tailwind CSS

• Shadcn UI

Backend

• Supabase (BaaS with authentication and PostgreSQL database)

🖼️ Preview :

Homepage: clean and bold CTA.

Secure authentication via Supabase.

Manage all your links in one place.

Quickly generate short links.

Track clicks, device type, and location.

🔥 Features

• ✅ Instant URL Shortening — Paste a long link, get a short one instantly.

• 📱 Responsive Design — Clean layout across devices using Tailwind.

• 🧩 Shadcn UI Components — For a beautiful and consistent UI experience.

• 📊 Analytics Dashboard — View click count, location, and device info.

• 📷 QR Code Generator — Every link gets a downloadable QR code.

🧠 Challenges Faced

• ⚙️ Supabase Auth Flow: Integrating Supabase authentication and managing session state across pages required thoughtful handling using Context API and route guards.

• 🔐 Private vs Public Routing: To prevent access to analytics and the dashboard without logging in, we built a reusable route protection layer.

• 🔍 Custom URL Conflict Check: One key challenge was ensuring that custom short URLs created by users weren't already taken. This required performing a real-time check against the Supabase database before allowing the link to be created.

🎓 What I Learned

• Deepened my understanding of React state management, async operations, and Supabase services.

• Gained experience with component libraries like Shadcn and how to make them fit a custom brand/style.

• Hands-on exposure to UI/UX design thinking — ensuring the tool is intuitive and fast.

• Learned to handle errors effectively — from API call failures to form validation issues — using toast notifications, custom error messages, and controlled inputs to provide better user feedback and debugging.

• Implemented form validation using Yup for the first time, which helped enforce strong input rules (like valid URLs, non-empty fields, etc.) and made form handling more predictable and scalable.

🛡️ What's Next?

• 🧠 Malicious Link Detection – Planning to integrate an API to scan and warn users if a URL seems unsafe and ensures users safety.

Thanks for reading! 🙌
Feel free to try it out and let me know your thoughts:
👉 https://bitsnip.vercel.app