diff --git a/package.json b/package.json index f86bf50..b61b10f 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "next dev", + "dev": "next dev -p 3001", "build": "next build", "start": "next start", "lint": "next lint" diff --git a/src/app/favicon.ico b/src/app/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/src/app/favicon.ico and /dev/null differ diff --git a/src/app/globals.css b/src/app/globals.css deleted file mode 100644 index 875c01e..0000000 --- a/src/app/globals.css +++ /dev/null @@ -1,33 +0,0 @@ -@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; - } -} diff --git a/src/app/layout.tsx b/src/app/layout.tsx deleted file mode 100644 index 3314e47..0000000 --- a/src/app/layout.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { Metadata } from "next"; -import { Inter } from "next/font/google"; -import "./globals.css"; - -const inter = Inter({ subsets: ["latin"] }); - -export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", -}; - -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( - - {children} - - ); -} diff --git a/src/app/page.tsx b/src/app/page.tsx deleted file mode 100644 index b81507d..0000000 --- a/src/app/page.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import Image from "next/image"; - -export default function Home() { - return ( -
-
-

- Get started by editing  - src/app/page.tsx -

-
- - By{" "} - Vercel Logo - -
-
- -
- Next.js Logo -
- -
- -

- Docs{" "} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn{" "} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates{" "} - - -> - -

-

- Explore starter templates for Next.js. -

- - - -

- Deploy{" "} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
-
- ); -} diff --git a/src/pages/404.tsx b/src/pages/404.tsx new file mode 100644 index 0000000..e0e3699 --- /dev/null +++ b/src/pages/404.tsx @@ -0,0 +1,11 @@ + +const Custom404 = () => { + return ( +
+

404 - Page Not Found

+

The URL you are looking for does not exist.

+
+ ); +}; + +export default Custom404; \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx new file mode 100644 index 0000000..aeb42a6 --- /dev/null +++ b/src/pages/index.tsx @@ -0,0 +1,61 @@ +// src/pages/index.tsx + +import { useState } from 'react'; + +const HomePage = () => { + const [url, setUrl] = useState(''); + const [tinyUrl, setTinyUrl] = useState(''); + const [error, setError] = useState(''); + + const handleSubmit = async (e: { preventDefault: () => void; }) => { + e.preventDefault(); + setError(''); + try { + const response = await fetch('http://localhost:3000/url-shortener/shorten', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ url }), + }); + + const data = await response.json(); + if (response.ok && data.status === 201) { + setTinyUrl(data.data); // Just store the tiny URL part + } else { + setError(data.error || 'An error occurred while shortening the URL'); + } + } catch (error) { + setError('Failed to connect to the server'); + } + }; + + return ( +
+

Shorten Your URL

+
+ setUrl(e.target.value)} + /> + +
+ {tinyUrl && ( +

+ Shortened URL: + + {tinyUrl} + +

+ )} + {error &&

{error}

} +
+ ); +}; + +export default HomePage;