first-version-updated

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

app/api/route.ts

@@ -0,0 +1,36 @@
+import { NextResponse } from 'next/server';
+import puppeteer from 'puppeteer';
+
+
+
+
+export async function POST(request: Request) {
+  let browser;
+  try {
+    const { url } = await request.json();
+
+    const urlRegex = /^(http|https):\/\/[^ "]+$/;
+
+    if (!urlRegex.test(url)) {
+        return NextResponse.json({urlerror:"invalid url"});
+    }
+
+    browser = await puppeteer.launch();
+    const page = await browser.newPage();
+    console.log(url);
+    await page.goto(url);
+    const extractedText = await page.$eval('*', (el: any) => el.innerText);
+    console.log(extractedText);
+    if (browser) {
+      await browser.close();
+    }
+
+    return NextResponse.json({ extractedText });
+  } catch (error) {
+    if (browser) {
+      await browser.close();
+    }
+    console.error(error);
+    return NextResponse.json({ error });
+  }
+}

app/layout.tsx

@@ -5,8 +5,8 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "ScrapQuest",
+  description: "Unlock insights from the web with our powerful web scraper",
 };
 
 export default function RootLayout({

components/Form.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import { useState } from "react";
+import Snackbar from "./Snackbar";
+
+
+
+export default function Form() {
+    const [url, seturl] = useState<string>("");
+    const [load,setload] = useState(false);
+    const [err,seterr] = useState<any>(null);
+    const update = (e: any) => {
+        seturl(e.target.value);
+    }
+
+    const send = async () => {
+        setload(true);
+        if(err){
+            setload(false);
+            return;
+        }
+
+        try {
+            const response = await fetch(process.env.NEXT_APP||"http://localhost:3000", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({ url })
+            });
+
+
+
+            console.log("Request sent successfully!");
+            const data = await response.json();
+            if(data.extractedText){
+            const blob = new Blob([data.extractedText], { type: 'text/plain' });
+            const url2 = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url2;
+            a.download = "data.txt";
+            document.body.appendChild(a);
+            a.click();
+            window.URL.revokeObjectURL(url2);
+            }
+            else{
+                if(data.urlerror){
+                     seterr(data.urlerror);
+                }
+                else{
+                      seterr("URL cannot be loaded");
+                }
+
+                setTimeout(() => {
+                    seterr(null);
+                }, 3000);
+            }
+            setload(false);
+
+
+        } catch (error: any) {
+            console.error("Error:", error.message);
+            setload(false);
+        }
+    }
+
+
+    return <>
+        <div className="mb-6">
+            <label className="block mb-2 text-sm font-medium text-green-700 dark:text-green-500">Type a website url</label>
+            <input onChange={update} type="text" id="success" className="bg-green-50 border border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-green-500 mb-5" placeholder="https://www.example.com" />
+
+            <button onClick={send} type="button" className="block text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mx-auto">{load ? "Downloading...": "Download now"}</button>
+
+           { err &&  <Snackbar state={err} setstate={seterr}/>}
+
+        </div>
+    </>
+}

components/Hero.tsx

@@ -1,22 +1,24 @@
 import { Blockquote } from "flowbite-react";
+import Form from "./Form";
+import Snackbar from "./Snackbar";
+
 
 export default function Hero() {
     return <>
-     <div className="h-5/6 flex flex-col justify-center items-center ">
-        <div>
+
 
+        <div className="h-5/6 flex flex-col justify-center items-center">
+            <div>
 
-        <Blockquote className="text-center my-10">
-            Unlock insights from the web with our powerful web scraper
-        </Blockquote>
-        <div className="mb-6">
-            <label className="block mb-2 text-sm font-medium text-green-700 dark:text-green-500">Type a website url</label>
-            <input type="text" id="success" className="bg-green-50 border border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-green-500 mb-5" placeholder="https://www.example.com"/>
-
-<button type="button" className="block text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mx-auto">Download now</button>
-        </div>
+
+                <Blockquote className="text-center my-10">
+                    Unlock insights from the web with our powerful web scraper
+                </Blockquote>
+                <Form/>
+            </div>
         </div>
-     </div>
+
+
 
     </>
 }

components/Snackbar.tsx

@@ -0,0 +1,20 @@
+"use client"
+import { Toast } from "flowbite-react";
+import { HiCheck, HiExclamation, HiX } from "react-icons/hi";
+
+
+export default function Snackbar({state,setstate}:any){
+
+  const handleCloseSnackbar = () => {
+    setstate(() => null);
+  }
+     return <>
+         <Toast className="fixed top-14 right-2 md:right-10">
+         <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-100 text-orange-500 dark:bg-orange-700 dark:text-orange-200">
+          <HiExclamation className="h-5 w-5" />
+        </div>
+        <div className="ml-3 text-sm font-normal">{state}</div>
+        <Toast.Toggle />
+      </Toast>
+     </>
+}