Avdhesh-Varshney · Aditijainnn · Aug 1, 2024 · Aug 1, 2024 · Aug 3, 2024
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/.eslintrc.json b/Next-JS-Projects/Intermediate/Url-Shortener/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["next", "prettier"]
+}
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/.prettierignore b/Next-JS-Projects/Intermediate/Url-Shortener/.prettierignore
@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.idea
+.vscode
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/.prettierrc.json b/Next-JS-Projects/Intermediate/Url-Shortener/.prettierrc.json
@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "arrowParens": "avoid",
+  "trailingComma": "none",
+  "jsxSingleQuote": true
+}
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/README.md b/Next-JS-Projects/Intermediate/Url-Shortener/README.md
@@ -0,0 +1,63 @@
+<h1 align='center'><b>💥 Url Shortener 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<div align='center'>
+
+  ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
+  ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+  ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white)
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+    <p>A Url shortener website that shortens the url</p>
+</div>
+
+
+
+
+## :zap: How to run it? 🕹️
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+
+
+## :zap: Screenshots 📸
+<img src="./screenshot.webp.png"/>
+
+
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Aditi Jain</i></b> 👦</h4>
+<p align='center'>
+  <a href='https://github.com/Aditijainnn'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/Screenshot.webp.png b/Next-JS-Projects/Intermediate/Url-Shortener/Screenshot.webp.png
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/app/globals.css b/Next-JS-Projects/Intermediate/Url-Shortener/app/globals.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/app/head.tsx b/Next-JS-Projects/Intermediate/Url-Shortener/app/head.tsx
@@ -0,0 +1,13 @@
+export default function Head() {
+  return (
+    <>
+      <title>{"Rustam's URL Shortener"}</title>
+      <meta content='width=device-width, initial-scale=1' name='viewport' />
+      <meta
+        name='description'
+        content="The most beautiful Rustam's URL shortener"
+      />
+      <link rel='icon' href='/favicon.ico' />
+    </>
+  )
+}
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/app/layout.tsx b/Next-JS-Projects/Intermediate/Url-Shortener/app/layout.tsx
@@ -0,0 +1,23 @@
+// noinspection HtmlRequiredTitleElement
+
+import './globals.css'
+import React from 'react'
+
+export default function RootLayout({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang='en'>
+      {/*
+        <head /> will contain the components returned by the nearest parent
+        head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
+      */}
+      <head />
+      <body className='grid h-screen w-screen place-items-center bg-gradient-to-r from-purple-400 to-yellow-400'>
+        {children}
+      </body>
+    </html>
+  )
+}
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/app/page.tsx b/Next-JS-Projects/Intermediate/Url-Shortener/app/page.tsx
@@ -0,0 +1,11 @@
+import MovingPart from '@/components/MovingPart'
+import FixedPart from '@/components/FixedPart'
+
+export default function Page() {
+  return (
+    <div className='flex w-full max-w-sm flex-col items-center space-y-5 rounded-xl bg-white bg-opacity-20 p-5'>
+      <FixedPart />
+      <MovingPart />
+    </div>
+  )
+}
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/components/FixedPart.tsx b/Next-JS-Projects/Intermediate/Url-Shortener/components/FixedPart.tsx
@@ -0,0 +1,12 @@
+import { LinkIcon } from '@heroicons/react/24/solid'
+
+export default function FixedPart() {
+  return (
+    <div className='flex flex-col items-center'>
+      <div className='my-6 cursor-pointer rounded-3xl bg-gradient-to-br from-[#5885e0] via-[#CF4D9E] to-[#EC7951] p-3'>
+        <LinkIcon className='h-14 w-14 text-white' />
+      </div>
+      <h1 className='text-xl font-semibold'>Make a Short Link</h1>
+    </div>
+  )
+}
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/components/MovingPart.tsx b/Next-JS-Projects/Intermediate/Url-Shortener/components/MovingPart.tsx
@@ -0,0 +1,80 @@
+'use client'
+
+import { usePostUrlMutation } from '@/utils/use-swr'
+import { FormEventHandler, useEffect, useState } from 'react'
+
+export default function MovingPart() {
+  const postUrl = usePostUrlMutation()
+
+  const urlToRedirect =
+    postUrl.id != null
+      ? new URL(postUrl.id, window.location.origin).toString()
+      : null
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = async event => {
+    event.preventDefault()
+    postUrl.reset()
+    // @ts-ignore
+    const url = event.target.url.value
+    const newId = await postUrl.trigger({ url })
+    console.log(`The new id is`, newId)
+  }
+
+  const [copied, setCopied] = useState(false)
+  useEffect(() => {
+    if (copied) {
+      const id = setTimeout(() => setCopied(false), 2000)
+      return () => clearTimeout(id)
+    }
+  }, [copied])
+  const handleCopy = async () => {
+    if (typeof urlToRedirect === 'string') {
+      await navigator.clipboard.writeText(urlToRedirect)
+      setCopied(true)
+    }
+  }
+
+  return (
+    <div className='flex w-full flex-col items-center space-y-5'>
+      <form onSubmit={handleSubmit} className='flex w-full flex-col space-y-4'>
+        <input
+          type='url'
+          name='url'
+          required
+          className='rounded-lg border border-gray-200 indent-4 leading-[2.75rem] bg-transparent border-opacity-40'
+          onClick={e => e.currentTarget.select()}
+          defaultValue='https://the-link-you-want-to-shorten.long'
+        />
+
+        <button
+          type='submit'
+          className='h-12 rounded-lg bg-gradient-to-r from-blue-500 to-fuchsia-500 font-bold text-white hover:text-opacity-70'
+        >
+          Shorten it
+        </button>
+      </form>
+      <div
+        onClick={handleCopy}
+        className='group flex h-36 w-full cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed bg-green-200 bg-opacity-10 text-xl hover:border-2 hover:bg-opacity-20'
+      >
+        {copied ? (
+          <p className='text-4xl font-semibold'>Copied!</p>
+        ) : (
+          <>
+            <p>
+              {copied
+                ? 'Copied!'
+                : urlToRedirect ??
+                  (postUrl.isMutating ? '...' : 'Shortened link will be here')}
+            </p>
+            {urlToRedirect && (
+              <p className='mt-8 text-sm text-gray-500 group-hover:underline'>
+                Click to copy
+              </p>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/middleware.ts b/Next-JS-Projects/Intermediate/Url-Shortener/middleware.ts
@@ -0,0 +1,11 @@
+import type { NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
+import { fetchUrl } from '@/utils/urlsFetcher'
+
+export async function middleware(request: NextRequest) {
+  if (request.nextUrl.pathname.match(/\/\d+/)) {
+    const id = Number(request.nextUrl.pathname.substring(1))
+    const url = await fetchUrl(id)
+    if (url) return NextResponse.redirect(new URL(url!))
+  }
+}
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/next.config.js b/Next-JS-Projects/Intermediate/Url-Shortener/next.config.js
@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    appDir: true
+  }
+}
+
+module.exports = nextConfig
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/package.json b/Next-JS-Projects/Intermediate/Url-Shortener/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "next-url-shortener",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.0.13",
+    "@next/font": "13.1.2",
+    "@types/node": "18.11.18",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
+    "eslint": "8.31.0",
+    "eslint-config-next": "13.1.2",
+    "next": "13.1.1",
+    "nextjs-cors": "^2.1.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "swr": "^2.0.0",
+    "typescript": "4.9.4"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.13",
+    "eslint-config-prettier": "^8.6.0",
+    "postcss": "^8.4.21",
+    "prettier": "2.8.3",
+    "prettier-plugin-tailwindcss": "^0.2.1",
+    "tailwindcss": "^3.2.4"
+  }
+}
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/pages/api/urls.ts b/Next-JS-Projects/Intermediate/Url-Shortener/pages/api/urls.ts
@@ -0,0 +1,29 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+import NextCors from 'nextjs-cors'
+
+export type ShortUrl = {
+  id: number
+  url: string
+}
+
+const urls: string[] = []
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  await NextCors(req, res, {
+    // Options
+    methods: ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE'],
+    origin: '*',
+    optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
+  })
+
+  if (req.method === 'POST') {
+    const { url } = req.body
+    const id = urls.push(url) - 1
+    res.status(201).json(id)
+  } else if (req.method === 'GET') {
+    res.json(urls.map((url, id) => ({ url, id })))
+  }
+}
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/postcss.config.js b/Next-JS-Projects/Intermediate/Url-Shortener/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/public/favicon.ico b/Next-JS-Projects/Intermediate/Url-Shortener/public/favicon.ico
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/public/next.svg b/Next-JS-Projects/Intermediate/Url-Shortener/public/next.svg
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/public/thirteen.svg b/Next-JS-Projects/Intermediate/Url-Shortener/public/thirteen.svg
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/public/vercel.svg b/Next-JS-Projects/Intermediate/Url-Shortener/public/vercel.svg
diff --git a/Next-JS-Projects/Intermediate/Url-Shortener/tailwind.config.js b/Next-JS-Projects/Intermediate/Url-Shortener/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+    './app/**/*.{js,ts,jsx,tsx}'
+  ],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+}