Initial commit

2026-03-18 00:47:10 +00:00 · 2024-08-06 01:16:01 +05:30
commit 65f113a90f
23 changed files with 612 additions and 0 deletions
--- a/frontend/app/api/redirect/[id]/route.js
+++ b/frontend/app/api/redirect/[id]/route.js
@@ -0,0 +1,22 @@
+import { NextResponse } from "next/server";
+import axios from "axios";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+export async function GET(request, { params }) {
+  const { id } = params;
+
+  try {
+    const response = await axios.get(
+      `${process.env.NEXT_PUBLIC_BACKEND_URL}/${id}`,
+    );
+    if (response.status === 200) {
+      return NextResponse.redirect(response.data.long_url);
+    } else {
+      return new NextResponse("URL not found", { status: 404 });
+    }
+  } catch (error) {
+    return new NextResponse("Server error", { status: 500 });
+  }
+}
--- a/frontend/app/favicon.ico
+++ b/frontend/app/favicon.ico
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
--- a/frontend/app/layout.js
+++ b/frontend/app/layout.js
@@ -0,0 +1,20 @@
+import { Inter } from "next/font/google";
+import "./globals.css";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "URL Shortener",
+  description: "A simple URL shortener application",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}
--- a/frontend/app/page.js
+++ b/frontend/app/page.js
@@ -0,0 +1,61 @@
+"use client";
+
+import { useState } from "react";
+import axios from "axios";
+import dotenv from "dotenv";
+
+dotenv.config({ path: "./.env.local" });
+
+export default function Home() {
+  const [longUrl, setLongUrl] = useState("");
+  const [shortUrl, setShortUrl] = useState("");
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const response = await axios.post(
+      `${process.env.NEXT_PUBLIC_BACKEND_URL}/shorten`,
+      {
+        long_url: longUrl,
+      },
+    );
+    setShortUrl(response.data.short_url);
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">
+      <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
+        <h1 className="text-3xl font-bold mb-6 text-center text-gray-800">
+          URL Shortener
+        </h1>
+        <form onSubmit={handleSubmit} className="flex flex-col space-y-4">
+          <input
+            type="text"
+            placeholder="Enter URL"
+            value={longUrl}
+            onChange={(e) => setLongUrl(e.target.value)}
+            className="border border-gray-300 rounded-lg p-3 text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+          <button
+            type="submit"
+            className="bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition duration-200"
+          >
+            Shorten
+          </button>
+        </form>
+        {shortUrl && (
+          <p className="mt-4 text-center text-gray-800">
+            Short URL:{" "}
+            <a
+              href={shortUrl}
+              className="text-blue-500 underline hover:text-blue-600"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {shortUrl}
+            </a>
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}