feat(#13): Adds initial support for QR Code generation

docs/conf.py

@@ -7,7 +7,7 @@
 # https://www.sphinx-doc.org/en/master/usage/configuration.html#project-information
 
 project = "shortenit"
-copyright = "2025, Elia el Lazkani"
+copyright = "2024, Elia el Lazkani"
 author = "Elia el Lazkani"
 release = "0.0.0"
 

frontend/package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "shortenit",
+  "name": "frontend",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "shortenit",
+      "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
         "@testing-library/jest-dom": "^5.17.0",

frontend/src/components/URLShortener/URLShortener.tsx

@@ -35,66 +35,23 @@ export default function URLShortener() {
       const api_url = `${config.url}${api_endpoint}`;
 
       // Send the POST request to the backend
-      const response = await axios.post(api_url , {url: url})
+      await axios
-      if (response.data.url) {
+        .post(api_url , {
+          url: url
+        })
+        .then((response) => {
+          if (response) {
             const shortUrl: string = response.data.url;
             setShortenedUrl(shortUrl);
             setShowInput(true);
-        toast.success("URL Shortened Successfully", {
-          position: "top-right",
-          autoClose: 5000,
-          hideProgressBar: false,
-          closeOnClick: true,
-          pauseOnHover: true,
-          draggable: true,
-          progress: undefined,
-          theme: "dark",
-          className: "custom-toast",
-        });
-      } else {
-        toast.error("Something went wrong while shortening the URL", {
-          position: "top-right",
-          autoClose: 5000,
-          hideProgressBar: false,
-          closeOnClick: true,
-          pauseOnHover: true,
-          draggable: true,
-          progress: undefined,
-          theme: "dark",
-          className: "custom-toast",
-        });
           }
+        });
 
       setTimeout(() => {
         setShowInput(false);
-      }, 900000);
+      }, 10000);
-    } catch (error : any) {
+    } catch (error) {
-      if (error.response) {
+      console.log(error);
-        const errorMessage : string = error.response.data.msg || "An error occurred. Please try again.";
-        toast.error(errorMessage, {
-          position: "top-right",
-          autoClose: 5000,
-          hideProgressBar: false,
-          closeOnClick: true,
-          pauseOnHover: true,
-          draggable: true,
-          progress: undefined,
-          theme: "dark",
-          className: "custom-toast",
-        });
-      } else {
-        toast.error("Network error. Please check your connection and try again.", {
-          position: "top-right",
-          autoClose: 5000,
-          hideProgressBar: false,
-          closeOnClick: true,
-          pauseOnHover: true,
-          draggable: true,
-          progress: undefined,
-          theme: "dark",
-          className: "custom-toast",
-        });
-      }
     }
   }
 
@@ -119,14 +76,13 @@ export default function URLShortener() {
     }
   }
   return (
-    <>
     <div className="URLShortener-component">
       <div className="left-side">
         <h1>Paste the URL</h1>
         <form className="url-input" onSubmit={ShortenIt}>
           <input
             type="text"
-              placeholder="https://www.example.com"
+            placeholder="www.example.com"
             aria-label="URL input field"
             value={url}
             onChange={(e) => setUrl(e.target.value)}
@@ -152,9 +108,7 @@ export default function URLShortener() {
           </p>
         </div>
       </div>
-        
-      </div>
       <ToastContainer />
-    </>
+    </div>
   );
 }

frontend/src/components/footer/Footer.css

@@ -1,8 +1,5 @@
 .footer {
     width: 100%;
-    height: 100px;
+    height: 200px;
     background-color: var(--color-secondary);
-    display: flex;
-    justify-content: center;
-    align-items: center;
 }

frontend/src/components/qrCode/qrCodeGenerator.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { QRCodeSVG } from "qrcode.react";
+import { qrCodeGeneratorProps } from "./qrCodeGeneratorProps";
+
+const QRCodeGenerator: React.FC<qrCodeGeneratorProps> = ({ url }) => {
+  return (
+    <div>
+      <QRCodeSVG id="qrCodeSVG" value={url} />
+    </div>
+  );
+};
+
+export default QRCodeGenerator;

frontend/src/components/qrCode/qrCodeGeneratorProps.ts

@@ -0,0 +1,3 @@
+export interface qrCodeGeneratorProps {
+  url: string;
+}

shortenit/web.py

@@ -80,7 +80,7 @@ class SiteHandler:
             data = self.shortenit_load_format(data)
         except Exception as e:
             self.logger.error(e)
-            return {"msg" : "Invalid URL format"}, 400
+            return {}, 400
             self.logger.error(e)
             abort(400)
         try: