Initial Commit

* Implements Basic Routing and API
* Implements Package.json file select and json parse
* Displays Project Name, Version & Desc from the package.json
* Fetch all package details using npm registry API and map it based on package name

islands/ListPackageDetails.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "preact/hooks";
+
+export default function ListPackageDetails(props: any) {
+    const [packages, setPacakges] = useState(props.packages);
+    const [projectName, setProjectName] = useState(props.projectname);
+    const [projectVersion, setProjectVersion] = useState(props.projectversion);
+    const [projectDesc, setProjectDesc] = useState(props.projectdesc);
+    const [isLoading, setIsLoading] = useState(false);
+    useEffect(() => {
+        fetchRegistry();
+    }, [packages])
+
+    const fetchRegistry = async () => {
+        setIsLoading(true);
+        const response = await fetch("/api/npm", {
+            method: 'POST',
+            body: JSON.stringify(packages)
+        });
+        const data = await response.json();
+        setIsLoading(false);
+    }
+
+    return (
+        <div>
+            <h3>{projectName}</h3>
+            <h4>{projectVersion}</h4>
+            <h5>{projectDesc}</h5>
+            {isLoading ? <>Loading</> : <>Data</>}
+        </div>
+    )
+}

islands/UploadButton.tsx

@@ -0,0 +1,17 @@
+import {JSX} from 'preact';
+
+export default function UploadButton(props: JSX.HTMLAttributes<HTMLInputElement>) {
+
+    return(
+        <form action="/analyze" method="post" encType="multipart/form-data">
+            <input 
+            {...props}
+            name="packagefile"
+            type="file"
+            accept={".json"}
+            // onChange={getFileData}
+        />
+        <button type="submit">Submit</button>
+        </form>
+    );
+}