[V0_FILE]typescriptreact:file="components/recent-links.tsx" isMerged="true" isEdit="true" "use client" import { useEffect, useState } from "react" import { getRecentLinks } from "@/lib/firebase" import { Button } from "@/components/ui/button" import { Copy, ExternalLink } from "lucide-react" import { useToast } from "@/components/ui/use-toast" import { formatDistanceToNow } from "date-fns" interface LinkItem { id: string originalUrl: string createdAt: Date clickCount: number } export default function RecentLinks() { const [links, setLinks] = useState([]) const [loading, setLoading] = useState(true) const { toast } = useToast() useEffect(() => { const fetchLinks = async () => { try { const recentLinks = await getRecentLinks() setLinks(recentLinks) } catch (error) { console.error("Error fetching recent links:", error) } finally { setLoading(false) } } fetchLinks() }, []) const copyToClipboard = (shortUrl: string) => { navigator.clipboard.writeText(shortUrl) toast({ title: "Copied!", description: "URL copied to clipboard", }) } if (loading) { return

Loading recent links...

} if (links.length === 0) { return (

No links created yet. Create your first shortened URL above!

) } return (

{links.map((link) => { const baseUrl = typeof window !== "undefined" ? window.location.origin : "" const shortUrl = `${baseUrl}/${link.id}` return ( ) })}

Short URL	Original URL	Created	Clicks	Actions
/{link.id}	{link.originalUrl}	{formatDistanceToNow(link.createdAt, { addSuffix: true })}	{link.clickCount}

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" isEdit="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } export default config [V0_FILE]typescriptreact:file="lib/utils.ts" isQuickEdit="true" isMerged="true" isEdit="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } export function isValidUrl(url: string): boolean { try { const urlObj = new URL(url) return urlObj.protocol === "http:" || urlObj.protocol === "https:" } catch (e) { return false } } [V0_FILE]typescriptreact:file="package.json" isMerged="true" isEdit="true" { "name": "url-shortener", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-toast": "^1.1.5", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "date-fns": "^2.30.0", "firebase": "^10.5.0", "framer-motion": "^10.16.4", "lucide-react": "^0.288.0", "nanoid": "^5.0.2", "next": "13.5.6", "next-themes": "^0.2.1", "qrcode.react": "^3.1.0", "react": "^18", "react-confetti": "^6.1.0", "react-dom": "^18", "react-use": "^17.4.0", "recharts": "^2.9.0", "tailwind-merge": "^1.14.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10", "eslint": "^8", "eslint-config-next": "13.5.6", "postcss": "^8", "tailwindcss": "^3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="contexts/auth-context.tsx" isMerged="true" isEdit="true" "use client" import { createContext, useContext, useEffect, useState, type ReactNode } from "react" import type { User } from "firebase/auth" import { getCurrentUser, signInWithGoogle, signOut } from "@/lib/firebase" interface AuthContextType { user: User | null loading: boolean signIn: () => Promise signOut: () => Promise } const AuthContext = createContext(undefined) export function AuthProvider({ children }: { children: ReactNode }) { const [user, setUser] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { const checkUser = async () => { try { const currentUser = await getCurrentUser() setUser(currentUser) } catch (error) { console.error("Error checking authentication:", error) } finally { setLoading(false) } } checkUser() }, []) const handleSignIn = async () => { try { const user = await signInWithGoogle() setUser(user) return user } catch (error) { console.error("Error signing in:", error) return null } } const handleSignOut = async () => { try { await signOut() setUser(null) } catch (error) { console.error("Error signing out:", error) } } return ( {children} ) } export function useAuth() { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context } [V0_FILE]typescriptreact:file="components/auth-button.tsx" isMerged="true" isEdit="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { useAuth } from "@/contexts/auth-context" import { LogIn, LogOut, Loader2 } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" export function AuthButton() { const { user, signIn, signOut } = useAuth() const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleSignIn = async () => { setIsLoading(true) try { await signIn() router.push("/dashboard") } catch (error) { console.error("Error signing in:", error) } finally { setIsLoading(false) } } const handleSignOut = async () => { setIsLoading(true) try { await signOut() router.push("/") } catch (error) { console.error("Error signing out:", error) } finally { setIsLoading(false) } } if (user) { return (

{user.displayName}

{user.email}

router.push("/dashboard")}>Dashboard router.push("/account")}>Account {isLoading ? : } Log out ) } return ( ) } [V0_FILE]typescriptreact:file="components/protected-route.tsx" isMerged="true" isEdit="true" "use client" import type React from "react" import { useEffect } from "react" import { useRouter } from "next/navigation" import { useAuth } from "@/contexts/auth-context" import { Loader2 } from "lucide-react" export default function ProtectedRoute({ children }: { children: React.ReactNode }) { const { user, loading } = useAuth() const router = useRouter() useEffect(() => { if (!loading && !user) { router.push("/login") } }, [user, loading, router]) if (loading) { return (

) } if (!user) { return null } return <>{children} } [V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true" isEdit="true" "use client" import { useEffect } from "react" import { useRouter } from "next/navigation" import { useAuth } from "@/contexts/auth-context" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { LogIn, Loader2 } from "lucide-react" export default function LoginPage() { const { user, loading, signIn } = useAuth() const router = useRouter() useEffect(() => { if (user) { router.push("/dashboard") } }, [user, router]) const handleSignIn = async () => { try { await signIn() router.push("/dashboard") } catch (error) { console.error("Error signing in:", error) } } if (loading) { return (

) } return (

By signing in, you agree to our Terms of Service and Privacy Policy.

) } [V0_FILE]typescriptreact:file="app/[shortId]/password/page.tsx" isMerged="true" isEdit="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { verifyLinkPassword } from "@/lib/firebase" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Lock, ArrowRight, Loader2 } from "lucide-react" import { useToast } from "@/components/ui/use-toast" export default function PasswordProtectedPage({ params }: { params: { shortId: string } }) { const { shortId } = params const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const router = useRouter() const { toast } = useToast() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) try { const originalUrl = await verifyLinkPassword(shortId, password) if (originalUrl) { // Password is correct, redirect to the original URL window.location.href = originalUrl } else { // Password is incorrect toast({ title: "Incorrect Password", description: "The password you entered is incorrect. Please try again.", variant: "destructive", }) } } catch (error) { console.error("Error verifying password:", error) toast({ title: "Error", description: "An error occurred while verifying the password. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

Password Protected Link This link is password protected. Enter the password to continue.

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { AuthProvider } from "@/contexts/auth-context" import { Navbar } from "@/components/navbar" import { Footer } from "@/components/footer" import { Toaster } from "@/components/ui/toaster" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Braj URL Shortener | Modern URL Shortener", description: "Create short, memorable links in seconds with our modern URL shortener", icons: { icon: "/favicon.ico", }, } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { useState, useEffect } from "react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { AuthButton } from "@/components/auth-button" import { Moon, Sun, Menu, X } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" export function Navbar() { const { theme, setTheme } = useTheme() const [mounted, setMounted] = useState(false) const [mobileMenuOpen, setMobileMenuOpen] = useState(false) // After mounting, we can safely show the UI that depends on the theme useEffect(() => { setMounted(true) }, []) if (!mounted) { return null } return (

BR Braj URL

{/* Desktop Navigation */} {/* Mobile Menu Button */}

{/* Mobile Menu */} {mobileMenuOpen && (

setMobileMenuOpen(false)} > Home setMobileMenuOpen(false)} > Dashboard

)}

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" export function HeroSection() { return (

{/* Animated Background */}

{/* Animated Circles */}

Transform Long URLs into{" "} Memorable Links Create short, branded links with Braj URL Shortener. Track clicks, view analytics, and manage all your links in one secure place. Get Started Learn More

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { motion } from "framer-motion" export function Footer() { const currentYear = new Date().getFullYear() return ( ) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { getUserLinks } from "@/lib/firebase" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import ProtectedRoute from "@/components/protected-route" import { useAuth } from "@/contexts/auth-context" import { useToast } from "@/components/ui/use-toast" import UserLinksTable from "@/components/user-links-table" import { UrlShortenerCard } from "@/components/url-shortener-card" import { Link, ExternalLink, Users } from "lucide-react" export default function DashboardPage() { const { user } = useAuth() const [links, setLinks] = useState([]) const [loading, setLoading] = useState(true) const [stats, setStats] = useState({ totalLinks: 0, totalClicks: 0, avgClickRate: 0, }) const { toast } = useToast() useEffect(() => { const fetchLinks = async () => { if (!user) return try { const userLinks = await getUserLinks(user.uid) setLinks(userLinks) // Calculate stats const totalLinks = userLinks.length const totalClicks = userLinks.reduce((sum, link) => sum + link.clickCount, 0) const avgClickRate = totalLinks > 0 ? totalClicks / totalLinks : 0 setStats({ totalLinks, totalClicks, avgClickRate, }) } catch (error) { console.error("Error fetching user links:", error) toast({ title: "Error", description: "Failed to load your links. Please try again.", variant: "destructive", }) } finally { setLoading(false) } } if (user) { fetchLinks() } }, [user, toast]) return (

Your Dashboard {/* URL Shortener Card */} {/* Stats Cards */}

Total Links

{loading ? "..." : stats.totalLinks}

Total Clicks

{loading ? "..." : stats.totalClicks}

Avg. Click Rate

{loading ? "..." : stats.avgClickRate.toFixed(1)}

{/* Your Links Table */} Your Links

) } [V0_FILE]typescriptreact:file="app/analytics/[shortId]/page.tsx" isMerged="true" isEdit="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { motion } from "framer-motion" import { getLinkDetails, getLinkAnalytics } from "@/lib/firebase" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { BarChart, ResponsiveContainer, Bar, XAxis, YAxis, Tooltip, CartesianGrid } from "recharts" import { format, subDays, isToday, isYesterday, parseISO, formatDistanceToNow } from "date-fns" import { useAuth } from "@/contexts/auth-context" import ProtectedRoute from "@/components/protected-route" import { useToast } from "@/components/ui/use-toast" import { ArrowLeft, Link, Clock, ComputerIcon as Device } from "lucide-react" export default function LinkAnalyticsPage({ params }: { params: { shortId: string } }) { const { shortId } = params const { user } = useAuth() const [linkDetails, setLinkDetails] = useState(null) const [clickData, setClickData] = useState([]) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) const router = useRouter() const { toast } = useToast() useEffect(() => { const fetchData = async () => { if (!user) return try { // Get link details const details = await getLinkDetails(shortId, user.uid) setLinkDetails(details) // Get click analytics const analytics = await getLinkAnalytics(shortId, user.uid) setClickData(analytics) } catch (error: any) { console.error("Error fetching analytics:", error) setError(error.message || "Failed to load analytics data") toast({ title: "Error", description: error.message || "Failed to load analytics data", variant: "destructive", }) } finally { setLoading(false) } } if (user) { fetchData() } }, [shortId, user, toast]) // Process click data for charts const processClicksForChart = () => { if (!clickData.length) return [] // Group clicks by day const clicksByDay = clickData.reduce((acc, click) => { const date = format(click.timestamp, "yyyy-MM-dd") if (!acc[date]) { acc[date] = 0 } acc[date]++ return acc }, {}) // Create an array of the last 7 days const last7Days = Array.from({ length: 7 }, (_, i) => { const date = subDays(new Date(), i) return format(date, "yyyy-MM-dd") }).reverse() // Map the data for the chart return last7Days.map((date) => { const formattedDate = format(parseISO(date), "MMM dd") return { date: formattedDate, clicks: clicksByDay[date] || 0, } }) } // Process user agents for device chart const processDeviceData = () => { if (!clickData.length) return [] const deviceCounts = clickData.reduce((acc, click) => { const userAgent = click.userAgent.toLowerCase() let device = "Unknown" if (userAgent.includes("mobile")) { device = "Mobile" } else if (userAgent.includes("tablet")) { device = "Tablet" } else if (userAgent.includes("windows") || userAgent.includes("macintosh") || userAgent.includes("linux")) { device = "Desktop" } if (!acc[device]) { acc[device] = 0 } acc[device]++ return acc }, {}) return Object.entries(deviceCounts).map(([device, count]) => ({ device, count, })) } const chartData = processClicksForChart() const deviceData = processDeviceData() // Format relative time const formatRelativeTime = (date: Date) => { if (isToday(date)) { return `Today, ${format(date, "h:mm a")}` } else if (isYesterday(date)) { return `Yesterday, ${format(date, "h:mm a")}` } else { return formatDistanceToNow(date, { addSuffix: true }) } } if (error) { return (

Error {error}

) } return (

{loading ? (

) : ( <> Link Details Analytics for /{shortId}

Short URL

{typeof window !== "undefined" ? `${window.location.origin}/${shortId}` : `/${shortId}`}

Original URL

{linkDetails?.originalUrl}

Created

{linkDetails?.createdAt ? format(linkDetails.createdAt, "PPP") : "Unknown"}

Total Clicks

{linkDetails?.clickCount || 0}

{/* Click Charts */} Click Performance {chartData.length > 0 ? (

) : (

No click data available yet

)} {/* Device Breakdown */} Device Breakdown {deviceData.length > 0 ? (

) : (

No device data available yet

)} {/* Recent Clicks */} Recent Clicks {clickData.length > 0 ? (

{clickData.slice(0, 10).map((click, index) => { const userAgent = click.userAgent.toLowerCase() let device = "Unknown" if (userAgent.includes("mobile")) { device = "Mobile" } else if (userAgent.includes("tablet")) { device = "Tablet" } else if ( userAgent.includes("windows") || userAgent.includes("macintosh") || userAgent.includes("linux") ) { device = "Desktop" } return ( ) })}

Time	IP Address	Device
{formatRelativeTime(click.timestamp)}	{click.ipAddress}	{device}

) : (

No click data available yet

)} )}

) } [V0_FILE]typescriptreact:file="components/recent-links-section.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { useEffect, useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { getRecentLinks } from "@/lib/firebase" import { Button } from "@/components/ui/button" import { useToast } from "@/components/ui/use-toast" import { formatDistanceToNow } from "date-fns" import { Copy, ExternalLink, QrCode } from "lucide-react" import { QRCodeCanvas } from "qrcode.react" interface LinkItem { id: string originalUrl: string createdAt: Date clickCount: number } export function RecentLinksSection() { const [links, setLinks] = useState([]) const [loading, setLoading] = useState(true) const [expandedQR, setExpandedQR] = useState(null) const { toast } = useToast() useEffect(() => { const fetchLinks = async () => { try { const recentLinks = await getRecentLinks() setLinks(recentLinks) } catch (error) { console.error("Error fetching recent links:", error) } finally { setLoading(false) } } fetchLinks() }, []) const copyToClipboard = (shortUrl: string) => { navigator.clipboard.writeText(shortUrl) toast({ title: "Copied!", description: "URL copied to clipboard", }) } const toggleQRCode = (id: string) => { if (expandedQR === id) { setExpandedQR(null) } else { setExpandedQR(id) } } if (loading) { return (

) } if (links.length === 0) { return (

No links created yet

Create your first shortened URL using the form above to see it appear here.

) } return (

{links.map((link, index) => { const baseUrl = typeof window !== "undefined" ? window.location.origin : "" const shortUrl = `${baseUrl}/${link.id}` return ( ) })}

Short URL	Original URL	Created	Clicks	Actions
/{link.id}	{link.originalUrl}	{formatDistanceToNow(link.createdAt, { addSuffix: true })}	{link.clickCount}

{/* QR Code Expanded View */} {expandedQR && (

QR Code for /{expandedQR}

)}

) } [V0_FILE]typescriptreact:file="components/feature-section.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Link, QrCode, BarChart, Lock, UserCircle, Edit } from "lucide-react" export function FeatureSection() { const features = [ { icon: , title: "User Authentication", description: "Secure your links with Google Sign-In and manage all your shortened URLs in one place.", }, { icon: , title: "Custom Short Links", description: "Create branded, memorable links that reflect your content and enhance recognition.", }, { icon: , title: "Edit & Delete Links", description: "Easily modify your links' destination or remove them entirely when no longer needed.", }, { icon: , title: "Real-time Analytics", description: "Track clicks, geographic data, and devices to understand your audience better.", }, { icon: , title: "Password Protection", description: "Secure your links with password protection for sensitive or private content.", }, { icon: , title: "QR Code Generation", description: "Generate QR codes for your shortened URLs to use in print materials or displays.", }, ] return (

Powerful Features Everything you need to create, manage, and track your shortened URLs

{features.map((feature, index) => (

{feature.icon}

{feature.title}

{feature.description}

))}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 271.3 81.3% 55.9%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 271.3 81.3% 55.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 271.3 81.3% 55.9%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 271.3 81.3% 55.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom animations */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } .animate-float { animation: float 6s ease-in-out infinite; } @keyframes pulse-glow { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } .animate-pulse-glow { animation: pulse-glow 4s ease-in-out infinite; } /* Gradient text animation */ @keyframes gradient-text { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .animate-gradient-text { background-size: 200% auto; animation: gradient-text 4s linear infinite; } /* Smooth transitions */ .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { @apply bg-slate-100 dark:bg-slate-800; } ::-webkit-scrollbar-thumb { @apply bg-slate-300 dark:bg-slate-600 rounded-full; } ::-webkit-scrollbar-thumb:hover { @apply bg-slate-400 dark:bg-slate-500; } /* Focus styles */ :focus-visible { @apply outline-none ring-2 ring-offset-2 ring-purple-500 dark:ring-purple-400; } /* Page transitions */ .page-enter { opacity: 0; transform: translateY(10px); } .page-enter-active { opacity: 1; transform: translateY(0); transition: opacity 300ms, transform 300ms; } .page-exit { opacity: 1; transform: translateY(0); } .page-exit-active { opacity: 0; transform: translateY(-10px); transition: opacity 300ms, transform 300ms; } [V0_FILE]typescriptreact:file="components/stats-section.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { BarChart, PieChart, ResponsiveContainer, Bar, XAxis, YAxis, Tooltip, Pie, Cell } from "recharts" export function StatsSection() { // Sample data for charts const clickData = [ { name: "Mon", clicks: 120 }, { name: "Tue", clicks: 180 }, { name: "Wed", clicks: 150 }, { name: "Thu", clicks: 210 }, { name: "Fri", clicks: 290 }, { name: "Sat", clicks: 190 }, { name: "Sun", clicks: 140 }, ] const deviceData = [ { name: "Desktop", value: 45 }, { name: "Mobile", value: 40 }, { name: "Tablet", value: 15 }, ] const COLORS = ["#a855f7", "#ec4899", "#f43f5e"] const countryData = [ { name: "USA", clicks: 420 }, { name: "UK", clicks: 240 }, { name: "Canada", clicks: 180 }, { name: "Germany", clicks: 150 }, { name: "France", clicks: 120 }, ] return (

Powerful Analytics Track and analyze your link performance with detailed statistics

Click Performance

Device Breakdown

`${name} ${(percent * 100).toFixed(0)}%`} > {deviceData.map((entry, index) => ( ))}

Top Countries

{countryData.map((country, index) => (

{country.name}

c.clicks))) * 100}%`, }} viewport={{ once: true }} transition={{ duration: 1, delay: index * 0.1 }} className="h-full bg-gradient-to-r from-purple-500 to-pink-500 rounded-full" />

{country.clicks}

))}

) } [V0_FILE]typescriptreact:file="lib/firebase.ts" isEdit="true" import { initializeApp } from "firebase/app" import { getFirestore, collection, doc, getDoc, setDoc, updateDoc, deleteDoc, increment, query, where, orderBy, limit, getDocs, Timestamp, serverTimestamp, addDoc, } from "firebase/firestore" import { getAuth, GoogleAuthProvider, signInWithPopup, signOut as firebaseSignOut, onAuthStateChanged, type User, } from "firebase/auth" import { nanoid } from "nanoid" // Firebase configuration const firebaseConfig = { apiKey: "AIzaSyB0tMIhNPJ-nqbvXUT99uUovR_oT1EiROQ", authDomain: "chatopsy-3c29a.firebaseapp.com", projectId: "chatopsy-3c29a", storageBucket: "chatopsy-3c29a.firebasestorage.app", messagingSenderId: "778803769451", appId: "1:778803769451:web:b888442c5ac0a5c01f012e", } // Initialize Firebase const app = initializeApp(firebaseConfig) const db = getFirestore(app) const auth = getAuth(app) // Collection references const linksCollection = collection(db, "links") const clicksCollection = collection(db, "clicks") // Authentication functions export const signInWithGoogle = async () => { const provider = new GoogleAuthProvider() try { const result = await signInWithPopup(auth, provider) return result.user } catch (error) { console.error("Error signing in with Google:", error) throw error } } export const signOut = async () => { try { await firebaseSignOut(auth) } catch (error) { console.error("Error signing out:", error) throw error } } export const getCurrentUser = (): Promise => { return new Promise((resolve) => { const unsubscribe = onAuthStateChanged(auth, (user) => { unsubscribe() resolve(user) }) }) } // Create a short URL export async function createShortUrl( originalUrl: string, userId: string, customId?: string, password?: string | null, expiryDate?: Date | null, ): Promise { try { // Generate a short ID or use the custom one const shortId = customId && customId.trim() !== "" ? customId.trim() : nanoid(6) // Check if custom ID already exists if (customId && customId.trim() !== "") { const docRef = doc(db, "links", shortId) const docSnap = await getDoc(docRef) if (docSnap.exists()) { throw new Error("This custom URL is already taken. Please try another one.") } } // Convert expiryDate to Timestamp if provided const expiryTimestamp = expiryDate ? Timestamp.fromDate(expiryDate) : null // Create document in Firestore await setDoc(doc(linksCollection, shortId), { originalUrl, userId, createdAt: serverTimestamp(), clickCount: 0, password: password || null, expiryDate: expiryTimestamp, }) return shortId } catch (error) { console.error("Error creating short URL:", error) throw error } } // Update a short URL export async function updateShortUrl( shortId: string, userId: string, updates: { originalUrl?: string; password?: string | null; expiryDate?: Date | null }, ): Promise { try { const docRef = doc(db, "links", shortId) const docSnap = await getDoc(docRef) if (!docSnap.exists()) { throw new Error("Link not found") } const linkData = docSnap.data() if (linkData.userId !== userId) { throw new Error("You don't have permission to edit this link") } // Convert expiryDate to Timestamp if provided const updatedData: any = { ...updates } if (updates.expiryDate !== undefined) { updatedData.expiryDate = updates.expiryDate ? Timestamp.fromDate(updates.expiryDate) : null } await updateDoc(docRef, updatedData) } catch (error) { console.error("Error updating short URL:", error) throw error } } // Delete a short URL export async function deleteShortUrl(shortId: string, userId: string): Promise { try { const docRef = doc(db, "links", shortId) const docSnap = await getDoc(docRef) if (!docSnap.exists()) { throw new Error("Link not found") } const linkData = docSnap.data() if (linkData.userId !== userId) { throw new Error("You don't have permission to delete this link") } await deleteDoc(docRef) } catch (error) { console.error("Error deleting short URL:", error) throw error } } // Get the original URL from a short ID export async function getOriginalUrl( shortId: string, ): Promise<{ url: string | null; isPasswordProtected: boolean; isExpired: boolean }> { try { const docRef = doc(db, "links", shortId) const docSnap = await getDoc(docRef) if (docSnap.exists()) { const data = docSnap.data() // Check if the link has expired const expiryDate = data.expiryDate const isExpired = expiryDate ? new Date() > expiryDate.toDate() : false if (isExpired) { return { url: null, isPasswordProtected: false, isExpired: true } } // Check if the link is password protected const isPasswordProtected = !!data.password // If it's password protected, don't return the URL yet if (isPasswordProtected) { return { url: null, isPasswordProtected: true, isExpired: false } } // Ensure the URL has a protocol let url = data.originalUrl if (url && typeof url === "string") { // If URL doesn't start with http:// or https://, add https:// if (!url.startsWith("http://") && !url.startsWith("https://")) { url = "https://" + url } return { url, isPasswordProtected: false, isExpired: false } } return { url: null, isPasswordProtected: false, isExpired: false } } else { console.log(`No document found with ID: ${shortId}`) return { url: null, isPasswordProtected: false, isExpired: false } } } catch (error) { console.error("Error getting original URL:", error) throw error } } // Verify password for a protected link export async function verifyLinkPassword(shortId: string, password: string): Promise { try { const docRef = doc(db, "links", shortId) const docSnap = await getDoc(docRef) if (docSnap.exists()) { const data = docSnap.data() // Check if the link has expired const expiryDate = data.expiryDate const isExpired = expiryDate ? new Date() > expiryDate.toDate() : false if (isExpired) { return null } // Check if the password matches if (data.password === password) { // Ensure the URL has a protocol let url = data.originalUrl if (url && typeof url === "string") { // If URL doesn't start with http:// or https://, add https:// if (!url.startsWith("http://") && !url.startsWith("https://")) { url = "https://" + url } return url } } } return null } catch (error) { console.error("Error verifying password:", error) throw error } } // Record click analytics export async function recordClickAnalytics(shortId: string, ipAddress: string, userAgent: string): Promise { try { // Check if the link exists and is not expired const docRef = doc(db, "links", shortId) const docSnap = await getDoc(docRef) if (!docSnap.exists()) { return } const data = docSnap.data() // Check if the link has expired const expiryDate = data.expiryDate const isExpired = expiryDate ? new Date() > expiryDate.toDate() : false if (isExpired) { return } // Add click record to the clicks collection await addDoc(clicksCollection, { shortId, timestamp: serverTimestamp(), ipAddress, userAgent, }) // Increment click count on the link document await updateDoc(docRef, { clickCount: increment(1), }) } catch (error) { console.error("Error recording click analytics:", error) throw error } } // Increment click count export async function incrementClickCount(shortId: string): Promise { try { const docRef = doc(db, "links", shortId) await updateDoc(docRef, { clickCount: increment(1), }) } catch (error) { console.error("Error incrementing click count:", error) throw error } } // Get recent links for a specific user export async function getUserLinks(userId: string, limitCount = 50) { try { const q = query(linksCollection, where("userId", "==", userId), orderBy("createdAt", "desc"), limit(limitCount)) const querySnapshot = await getDocs(q) const links = querySnapshot.docs.map((doc) => { const data = doc.data() return { id: doc.id, originalUrl: data.originalUrl, createdAt: data.createdAt instanceof Timestamp ? data.createdAt.toDate() : new Date(), clickCount: data.clickCount || 0, password: data.password || null, expiryDate: data.expiryDate instanceof Timestamp ? data.expiryDate.toDate() : null, } }) return links } catch (error) { console.error("Error getting user links:", error) throw error } } // Get recent links (for public display, limited info) export async function getRecentLinks(limitCount = 10) { try { const q = query(linksCollection, orderBy("createdAt", "desc"), limit(limitCount)) const querySnapshot = await getDocs(q) const links = querySnapshot.docs.map((doc) => { const data = doc.data() return { id: doc.id, originalUrl: data.originalUrl, createdAt: data.createdAt instanceof Timestamp ? data.createdAt.toDate() : new Date(), clickCount: data.clickCount || 0, } }) return links } catch (error) { console.error("Error getting recent links:", error) throw error } } // Get link details export async function getLinkDetails(shortId: string, userId: string) { try { const docRef = doc(db, "links", shortId) const docSnap = await getDoc(docRef) if (!docSnap.exists()) { throw new Error("Link not found") } const linkData = docSnap.data() // Check if the user owns this link if (linkData.userId !== userId) { throw new Error("You don't have permission to view this link's details") } return { id: docSnap.id, originalUrl: linkData.originalUrl, createdAt: linkData.createdAt instanceof Timestamp ? linkData.createdAt.toDate() : new Date(), clickCount: linkData.clickCount || 0, password: linkData.password || null, expiryDate: linkData.expiryDate instanceof Timestamp ? linkData.expiryDate.toDate() : null, } } catch (error) { console.error("Error getting link details:", error) throw error } } // Get link analytics export async function getLinkAnalytics(shortId: string, userId: string) { try { // First verify the user owns this link const linkRef = doc(db, "links", shortId) const linkSnap = await getDoc(linkRef) if (!linkSnap.exists()) { throw new Error("Link not found") } const linkData = linkSnap.data() if (linkData.userId !== userId) { throw new Error("You don't have permission to view this link's analytics") } // Query the clicks collection for this shortId const q = query(clicksCollection, where("shortId", "==", shortId), orderBy("timestamp", "desc")) const querySnapshot = await getDocs(q) const clicks = querySnapshot.docs.map((doc) => { const data = doc.data() return { id: doc.id, timestamp: data.timestamp instanceof Timestamp ? data.timestamp.toDate() : new Date(), ipAddress: data.ipAddress, userAgent: data.userAgent, } }) return clicks } catch (error) { console.error("Error getting link analytics:", error) throw error } } [V0_FILE]typescriptreact:file="components/url-shortener-form.tsx" isEdit="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { useToast } from "@/components/ui/use-toast" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { createShortUrl } from "@/lib/firebase" import { isValidUrl } from "@/lib/utils" import { Copy, Wand2, Lock, Calendar } from "lucide-react" import { useAuth } from "@/contexts/auth-context" import { format } from "date-fns" export default function UrlShortenerForm() { const { user } = useAuth() const router = useRouter() const [longUrl, setLongUrl] = useState("") const [customId, setCustomId] = useState("") const [shortUrl, setShortUrl] = useState("") const [isLoading, setIsLoading] = useState(false) const [passwordEnabled, setPasswordEnabled] = useState(false) const [password, setPassword] = useState("") const [expiryEnabled, setExpiryEnabled] = useState(false) const [expiryDate, setExpiryDate] = useState("") const { toast } = useToast() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!user) { toast({ title: "Authentication Required", description: "Please sign in to create shortened URLs", variant: "destructive", }) router.push("/login") return } let urlToShorten = longUrl.trim() if (!urlToShorten) { toast({ title: "URL Required", description: "Please enter a URL to shorten", variant: "destructive", }) return } // Add https:// if no protocol is specified if (!urlToShorten.startsWith("http://") && !urlToShorten.startsWith("https://")) { urlToShorten = "https://" + urlToShorten setLongUrl(urlToShorten) } if (!isValidUrl(urlToShorten)) { toast({ title: "Invalid URL", description: "Please enter a valid URL", variant: "destructive", }) return } setIsLoading(true) try { // Parse expiry date if enabled const parsedExpiryDate = expiryEnabled && expiryDate ? new Date(expiryDate) : null const shortId = await createShortUrl( urlToShorten, user.uid, customId, passwordEnabled ? password : null, parsedExpiryDate, ) const baseUrl = window.location.origin const newShortUrl = `${baseUrl}/${shortId}` setShortUrl(newShortUrl) toast({ title: "URL Shortened!", description: "Your shortened URL has been created successfully", }) } catch (error: any) { toast({ title: "Error", description: error.message || "Failed to create short URL", variant: "destructive", }) } finally { setIsLoading(false) } } const copyToClipboard = () => { navigator.clipboard.writeText(shortUrl) toast({ title: "Copied!", description: "URL copied to clipboard", }) } const generateRandomId = () => { const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789" let result = "" for (let i = 0; i < 6; i++) { result += characters.charAt(Math.floor(Math.random() * characters.length)) } setCustomId(result) } // If user is not signed in, show sign-in prompt if (!user) { return (

Sign in to create shortened URLs

You need to sign in to create and manage your shortened URLs.

) } return (

Enter your long URL

setLongUrl(e.target.value)} className="pr-10" required />

Custom short link (optional)

{typeof window !== "undefined" ? window.location.origin : ""}/ setCustomId(e.target.value)} className="flex-1" />

Leave empty to generate a random short link

{/* Password Protection */}

Password protect this link

{passwordEnabled && (

setPassword(e.target.value)} required={passwordEnabled} />

Users will need to enter this password to access the link

)}

{/* Expiry Date */}

Set expiration date

{expiryEnabled && (

setExpiryDate(e.target.value)} min={format(new Date(), "yyyy-MM-dd")} required={expiryEnabled} />

The link will expire at midnight on this date

)}

{shortUrl && (

Your shortened URL

{shortUrl}

)}

) } [V0_FILE]typescriptreact:file="components/url-shortener-card.tsx" isEdit="true" "use client" import type React from "react" import { useState, useRef } from "react" import { useRouter } from "next/navigation" import { motion, AnimatePresence } from "framer-motion" import { useToast } from "@/components/ui/use-toast" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Switch } from "@/components/ui/switch" import { QRCodeCanvas } from "qrcode.react" import { createShortUrl } from "@/lib/firebase" import { isValidUrl } from "@/lib/utils" import { Copy, Link, QrCode, Lock, Wand2, Calendar } from "lucide-react" import useWindowSize from "react-use/lib/useWindowSize" import Confetti from "react-confetti" import { useAuth } from "@/contexts/auth-context" import { format } from "date-fns" export function UrlShortenerCard() { const { user } = useAuth() const router = useRouter() const [longUrl, setLongUrl] = useState("") const [customId, setCustomId] = useState("") const [shortUrl, setShortUrl] = useState("") const [isLoading, setIsLoading] = useState(false) const [showConfetti, setShowConfetti] = useState(false) const [showQrCode, setShowQrCode] = useState(false) const [passwordEnabled, setPasswordEnabled] = useState(false) const [password, setPassword] = useState("") const [expiryEnabled, setExpiryEnabled] = useState(false) const [expiryDate, setExpiryDate] = useState("") const { width, height } = useWindowSize() const { toast } = useToast() const formRef = useRef(null) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!user) { toast({ title: "Authentication Required", description: "Please sign in to create shortened URLs", variant: "destructive", }) router.push("/login") return } let urlToShorten = longUrl.trim() if (!urlToShorten) { toast({ title: "URL Required", description: "Please enter a URL to shorten", variant: "destructive", }) return } // Add https:// if no protocol is specified if (!urlToShorten.startsWith("http://") && !urlToShorten.startsWith("https://")) { urlToShorten = "https://" + urlToShorten setLongUrl(urlToShorten) } if (!isValidUrl(urlToShorten)) { toast({ title: "Invalid URL", description: "Please enter a valid URL", variant: "destructive", }) return } setIsLoading(true) try { // Parse expiry date if enabled const parsedExpiryDate = expiryEnabled && expiryDate ? new Date(expiryDate) : null // Pass the user ID to the createShortUrl function const shortId = await createShortUrl( urlToShorten, user.uid, customId, passwordEnabled ? password : null, parsedExpiryDate, ) const baseUrl = window.location.origin const newShortUrl = `${baseUrl}/${shortId}` setShortUrl(newShortUrl) // Show success animation setShowConfetti(true) setTimeout(() => setShowConfetti(false), 5000) toast({ title: "URL Shortened!", description: "Your shortened URL has been created successfully", }) } catch (error: any) { toast({ title: "Error", description: error.message || "Failed to create short URL", variant: "destructive", }) } finally { setIsLoading(false) } } const copyToClipboard = () => { navigator.clipboard.writeText(shortUrl) toast({ title: "Copied!", description: "URL copied to clipboard", }) } const generateRandomId = () => { const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789" let result = "" for (let i = 0; i < 6; i++) { result += characters.charAt(Math.floor(Math.random() * characters.length)) } setCustomId(result) } // If user is not signed in, show sign-in prompt if (!user) { return (

Sign In to Shorten URLs

Create short, memorable links with Braj URL Shortener. Sign in to get started.

) } return (

{showConfetti && }

Shorten Your URL

Basic Advanced

Enter your long URL

setLongUrl(e.target.value)} className="pl-10" required />

Custom short link (optional)

{typeof window !== "undefined" ? window.location.origin : ""}/ setCustomId(e.target.value)} className="flex-1" />

Leave empty to generate a random short link

Enter your long URL

setLongUrl(e.target.value)} className="pl-10" required />

Custom short link (optional)

{typeof window !== "undefined" ? window.location.origin : ""}/ setCustomId(e.target.value)} className="flex-1" />

{/* Password Protection */}

Password protect

{passwordEnabled && (

setPassword(e.target.value)} required={passwordEnabled} />

Users will need to enter this password to access the link

)} {/* Expiry Date */}

Set expiration date

{expiryEnabled && (

setExpiryDate(e.target.value)} min={format(new Date(), "yyyy-MM-dd")} required={expiryEnabled} />

The link will expire at midnight on this date

)}

{shortUrl && (

Your shortened URL

{shortUrl}

{showQrCode && (

)}

) } [V0_FILE]typescriptreact:file="components/edit-link-dialog.tsx" isEdit="true" "use client" import type React from "react" import { useState } from "react" import { useAuth } from "@/contexts/auth-context" import { updateShortUrl } from "@/lib/firebase" import { useToast } from "@/components/ui/use-toast" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { Lock, Calendar } from "lucide-react" import { isValidUrl } from "@/lib/utils" import { format } from "date-fns" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" interface LinkItem { id: string originalUrl: string createdAt: Date clickCount: number password: string | null expiryDate: Date | null } interface EditLinkDialogProps { link: LinkItem | null isOpen: boolean onClose: () => void onLinkUpdated: (link: LinkItem) => void } export function EditLinkDialog({ link, isOpen, onClose, onLinkUpdated }: EditLinkDialogProps) { const { user } = useAuth() const { toast } = useToast() const [originalUrl, setOriginalUrl] = useState(link?.originalUrl || "") const [passwordEnabled, setPasswordEnabled] = useState(!!link?.password) const [password, setPassword] = useState(link?.password || "") const [expiryEnabled, setExpiryEnabled] = useState(!!link?.expiryDate) const [expiryDate, setExpiryDate] = useState(link?.expiryDate ? format(link.expiryDate, "yyyy-MM-dd") : "") const [isLoading, setIsLoading] = useState(false) // Update state when link changes if (link && link.originalUrl !== originalUrl) { setOriginalUrl(link.originalUrl) setPasswordEnabled(!!link.password) setPassword(link.password || "") setExpiryEnabled(!!link.expiryDate) setExpiryDate(link.expiryDate ? format(link.expiryDate, "yyyy-MM-dd") : "") } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!user || !link) return let urlToUpdate = originalUrl.trim() if (!urlToUpdate) { toast({ title: "URL Required", description: "Please enter a URL", variant: "destructive", }) return } // Add https:// if no protocol is specified if (!urlToUpdate.startsWith("http://") && !urlToUpdate.startsWith("https://")) { urlToUpdate = "https://" + urlToUpdate setOriginalUrl(urlToUpdate) } if (!isValidUrl(urlToUpdate)) { toast({ title: "Invalid URL", description: "Please enter a valid URL", variant: "destructive", }) return } setIsLoading(true) try { // Parse expiry date if enabled const parsedExpiryDate = expiryEnabled && expiryDate ? new Date(expiryDate) : null await updateShortUrl(link.id, user.uid, { originalUrl: urlToUpdate, password: passwordEnabled ? password : null, expiryDate: parsedExpiryDate, }) // Update the link in the parent component onLinkUpdated({ ...link, originalUrl: urlToUpdate, password: passwordEnabled ? password : null, expiryDate: parsedExpiryDate, }) toast({ title: "Link Updated", description: "Your shortened URL has been updated successfully", }) onClose() } catch (error: any) { toast({ title: "Error", description: error.message || "Failed to update the link", variant: "destructive", }) } finally { setIsLoading(false) } } return ( ) } [V0_FILE]typescriptreact:file="components/user-links-table.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { getUserLinks, deleteShortUrl } from "@/lib/firebase" import { Button } from "@/components/ui/button" import { useToast } from "@/components/ui/use-toast" import { formatDistanceToNow, format, isPast } from "date-fns" import { Copy, ExternalLink, BarChart, Trash, Edit, Lock, Calendar } from "lucide-react" import { useAuth } from "@/contexts/auth-context" import { EditLinkDialog } from "@/components/edit-link-dialog" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog" interface LinkItem { id: string originalUrl: string createdAt: Date clickCount: number password: string | null expiryDate: Date | null } export default function UserLinksTable() { const { user } = useAuth() const [links, setLinks] = useState([]) const [loading, setLoading] = useState(true) const [editingLink, setEditingLink] = useState(null) const [isEditDialogOpen, setIsEditDialogOpen] = useState(false) const [deletingLinkId, setDeletingLinkId] = useState(null) const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false) const { toast } = useToast() const router = useRouter() useEffect(() => { const fetchLinks = async () => { if (!user) return try { const userLinks = await getUserLinks(user.uid) setLinks(userLinks) } catch (error) { console.error("Error fetching user links:", error) toast({ title: "Error", description: "Failed to load your links. Please try again.", variant: "destructive", }) } finally { setLoading(false) } } fetchLinks() }, [user, toast]) const copyToClipboard = (shortUrl: string) => { navigator.clipboard.writeText(shortUrl) toast({ title: "Copied!", description: "URL copied to clipboard", }) } const handleEditLink = (link: LinkItem) => { setEditingLink(link) setIsEditDialogOpen(true) } const handleDeleteLink = (linkId: string) => { setDeletingLinkId(linkId) setIsDeleteDialogOpen(true) } const confirmDeleteLink = async () => { if (!user || !deletingLinkId) return try { await deleteShortUrl(deletingLinkId, user.uid) // Update the links list setLinks(links.filter((link) => link.id !== deletingLinkId)) toast({ title: "Link Deleted", description: "Your shortened URL has been deleted successfully", }) } catch (error: any) { toast({ title: "Error", description: error.message || "Failed to delete the link", variant: "destructive", }) } finally { setIsDeleteDialogOpen(false) setDeletingLinkId(null) } } const onLinkUpdated = (updatedLink: LinkItem) => { // Update the links list with the edited link setLinks(links.map((link) => (link.id === updatedLink.id ? updatedLink : link))) } if (loading) { return

Loading your links...

} if (links.length === 0) { return (

You haven't created any links yet. Create your first shortened URL above!

) } return (

{links.map((link) => { const baseUrl = typeof window !== "undefined" ? window.location.origin : "" const shortUrl = `${baseUrl}/${link.id}` const isExpired = link.expiryDate ? isPast(link.expiryDate) : false return ( ) })}

Short URL	Original URL	Created	Expires	Clicks	Actions
/{link.id} {link.password && } {isExpired && ( Expired )}	{link.originalUrl}	{formatDistanceToNow(link.createdAt, { addSuffix: true })}	{link.expiryDate ? ( {format(link.expiryDate, "MMM d, yyyy")} ) : ( Never )}	{link.clickCount}

{/* Edit Link Dialog */} { setIsEditDialogOpen(false) setEditingLink(null) }} onLinkUpdated={onLinkUpdated} /> {/* Delete Confirmation Dialog */} Are you sure? This will permanently delete this shortened URL. This action cannot be undone. Cancel Delete

) } [V0_FILE]typescriptreact:file="app/[shortId]/page.tsx" isEdit="true" import { redirect } from "next/navigation" import { headers } from "next/headers" import { getOriginalUrl, recordClickAnalytics } from "@/lib/firebase" interface RedirectPageProps { params: { shortId: string } } export default async function RedirectPage({ params }: RedirectPageProps) { const { shortId } = params const headersList = headers() // Get IP address and user agent for analytics const ipAddress = headersList.get("x-forwarded-for") || "unknown" const userAgent = headersList.get("user-agent") || "unknown" try { // Get the original URL from Firestore const { url, isPasswordProtected, isExpired } = await getOriginalUrl(shortId) // If the link is expired, redirect to expired page if (isExpired) { redirect(`/expired?id=${shortId}`) } // If the link is password protected, redirect to the password page if (isPasswordProtected) { redirect(`/${shortId}/password`) } // If the short URL doesn't exist, redirect to home if (!url) { redirect("/") } // Record click analytics (don't await to avoid delaying redirect) // We use a try/catch here to prevent any errors from blocking the redirect try { recordClickAnalytics(shortId, ipAddress, userAgent).catch(console.error) } catch (error) { console.error("Error recording click analytics:", error) // Continue with redirect even if analytics fails } // Return a specialized response with HTTP redirect return new Response(null, { status: 302, headers: { Location: url, "Cache-Control": "no-store, max-age=0", }, }) } catch (error) { console.error("Error during redirect:", error) redirect("/") } } [V0_FILE]typescriptreact:file="app/expired/page.tsx" isEdit="true" "use client" import { useSearchParams } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Calendar, ArrowLeft } from "lucide-react" import Link from "next/link" export default function ExpiredLinkPage() { const searchParams = useSearchParams() const shortId = searchParams.get("id") return (

Link Expired The link you're trying to access has expired.

The shortened URL /{shortId} is no longer available because it has reached its expiration date.

) } [V0_FILE]typescriptreact:file="app/expired/loading.tsx" isFixed="true" isEdit="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/api/redirect/[shortId]/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { getOriginalUrl, recordClickAnalytics } from "@/lib/firebase" export async function GET(request: NextRequest, { params }: { params: { shortId: string } }) { const shortId = params.shortId // Get IP address and user agent for analytics const ipAddress = request.headers.get("x-forwarded-for") || "unknown" const userAgent = request.headers.get("user-agent") || "unknown" try { // Get the original URL from Firestore const { url, isPasswordProtected, isExpired } = await getOriginalUrl(shortId) // If the link is expired, redirect to expired page if (isExpired) { return NextResponse.redirect(new URL(`/expired?id=${shortId}`, request.url)) } // If the link is password protected, redirect to the password page if (isPasswordProtected) { return NextResponse.redirect(new URL(`/${shortId}/password`, request.url)) } // If the short URL doesn't exist, redirect to home if (!url) { return NextResponse.redirect(new URL("/", request.url)) } // Record click analytics (don't await to avoid delaying redirect) recordClickAnalytics(shortId, ipAddress, userAgent).catch(console.error) // Redirect to the original URL return NextResponse.redirect(url, { status: 302 }) } catch (error) { console.error("Error during redirect:", error) return NextResponse.redirect(new URL("/", request.url)) } } [V0_FILE]typescriptreact:file="middleware.ts" isEdit="true" import { NextResponse } from "next/server" import type { NextRequest } from "next/server" export async function middleware(request: NextRequest) { const { pathname } = request.nextUrl // Skip middleware for specific paths if ( pathname.startsWith("/_next") || pathname.startsWith("/api") || pathname === "/" || pathname.startsWith("/login") || pathname.startsWith("/dashboard") || pathname.startsWith("/analytics") || pathname.startsWith("/account") || pathname.startsWith("/expired") || pathname.includes(".") // Skip files like favicon.ico ) { return NextResponse.next() } // If the path includes /password, let the page handle it if (pathname.includes("/password")) { return NextResponse.next() } // Extract the shortId from the path const shortId = pathname.slice(1) // Redirect to the API route that handles the redirection const url = new URL(`/api/redirect/${shortId}`, request.url) return NextResponse.rewrite(url) } export const config = { matcher: [ /* * Match all paths except: * 1. /api routes * 2. /_next (Next.js internals) * 3. /static (inside /public) * 4. all root files inside /public (e.g. /favicon.ico) */ "/((?!api|_next|static|[\\w-]+\\.\\w+).*)", ], } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import { Suspense } from "react" import { HeroSection } from "@/components/hero-section" import { FeatureSection } from "@/components/feature-section" import { StatsSection } from "@/components/stats-section" import { UrlShortenerCard } from "@/components/url-shortener-card" import { RecentLinksSection } from "@/components/recent-links-section" export default function Home() { return (

{/* Hero Section with Animated Background */} {/* URL Shortener Card */}

{/* Recent Links Section */}

Recently Shortened Links

Loading recent links...

{/* Features Section */} {/* Stats Section */} ) }

About

Tags

Share

More from brajeshcodes-6810

More Templates Like This

About

Tags

Share

About

Tags

Share

More from brajeshcodes-6810

More Templates Like This