From f80bc3ba5fada0bf5444ddef3d511e2bea4484d7 Mon Sep 17 00:00:00 2001
From: Sujal Agarwal <sujalagarwal.nitdgp@gmail.com>
Date: Thu, 6 Aug 2026 08:32:01 +0530
Subject: [PATCH] feat: add URL shortener redirect component and routing

---
 src/App.js                     |  2 ++
 src/components/UrlRedirect.jsx | 63 ++++++++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 src/components/UrlRedirect.jsx

diff --git a/src/App.js b/src/App.js
index 573589a..0023877 100644
--- a/src/App.js
+++ b/src/App.js
@@ -29,6 +29,7 @@ import ViewProfile from "./components/Profile/ViewProfile";
 import ResetPassword from "./components/Profile/ResetPassword";
 import ResetPasswordForm from "./components/Profile/ResetPasswordForm";
 import ResetPasswordSent from "./components/Profile/ResetPasswordSent";
+import UrlRedirect from "./components/UrlRedirect";
 
 function App() {
   return (
@@ -57,6 +58,7 @@ function App() {
                 path="reset/sent"
                 element={<ResetPasswordSent />}
               />
+              <Route path="url/:shortCode" element={<UrlRedirect />} />
 
               {/* private routes */}
               <Route element={<RequireAuth />}>
diff --git a/src/components/UrlRedirect.jsx b/src/components/UrlRedirect.jsx
new file mode 100644
index 0000000..f764589
--- /dev/null
+++ b/src/components/UrlRedirect.jsx
@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { Box, Text, Spinner, Flex } from "@chakra-ui/react";
+import axios from "../api/axios";
+
+const UrlRedirect = () => {
+  const { shortCode } = useParams();
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    const fetchOriginalUrl = async () => {
+      try {
+        const response = await axios.get(`/url/${shortCode}/`);
+        const { original_url: originalUrl } = response.data;
+        if (originalUrl) {
+          window.location.replace(originalUrl);
+        } else {
+          setError(true);
+        }
+      } catch (err) {
+        console.error("Failed to fetch the URL:", err);
+        setError(true);
+      }
+    };
+
+    fetchOriginalUrl();
+  }, [shortCode]);
+
+  if (error) {
+    return (
+      <Flex
+        direction="column"
+        justify="center"
+        align="center"
+        minH="60vh"
+        px={4}
+      >
+        <Text fontSize="3xl" color="red.500" mb={4}>
+          URL Not Found
+        </Text>
+        <Text fontSize="lg" textAlign="center">
+          The link you clicked on might be broken, expired, or typed incorrectly.
+        </Text>
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex
+      direction="column"
+      justify="center"
+      align="center"
+      minH="60vh"
+    >
+      <Spinner size="xl" thickness="4px" speed="0.65s" color="blue.500" />
+      <Text fontSize="xl" mt={6}>
+        Redirecting...
+      </Text>
+    </Flex>
+  );
+};
+
+export default UrlRedirect;