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 , {
-        const shortUrl: string = response.data.url;
+          url: url
-        setShortenedUrl(shortUrl);
+        })
-        setShowInput(true);
+        .then((response) => {
-        toast.success("URL Shortened Successfully", {
+          if (response) {
-          position: "top-right",
+            const shortUrl: string = response.data.url;
-          autoClose: 5000,
+            setShortenedUrl(shortUrl);
-          hideProgressBar: false,
+            setShowInput(true);
-          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,42 +76,39 @@ export default function URLShortener() {
     }
   }
   return (
-    <>
+    <div className="URLShortener-component">
-      <div className="URLShortener-component">
+      <div className="left-side">
-        <div className="left-side">
+        <h1>Paste the URL</h1>
-          <h1>Paste the URL</h1>
+        <form className="url-input" onSubmit={ShortenIt}>
-          <form className="url-input" onSubmit={ShortenIt}>
+          <input
-            <input
+            type="text"
-              type="text"
+            placeholder="www.example.com"
-              placeholder="https://www.example.com"
+            aria-label="URL input field"
-              aria-label="URL input field"
+            value={url}
-              value={url}
+            onChange={(e) => setUrl(e.target.value)}
-              onChange={(e) => setUrl(e.target.value)}
+          />
-            />
+          <button type="submit">Shorten It</button>
-            <button type="submit">Shorten It</button>
+        </form>
-          </form>
 
-          {shortenedUrl && showInput && (
+        {shortenedUrl && showInput && (
-            <div className="url-input shortened">
+          <div className="url-input shortened">
-              <input type="text" readOnly value={shortenedUrl} />
+            <input type="text" readOnly value={shortenedUrl} />
-              <button onClick={copyURL}>Copy</button>
+            <button onClick={copyURL}>Copy</button>
-            </div>
-          )}
-        </div>
-        <div className="right-side">
-          <div className="right-side-title">
-            <h1>Shorten It</h1>
-          </div>
-          <div className="right-side-content">
-            <p>
-              Shortenit is a free and open-source URL shortening service designed
-              for simplicity and efficiency.
-            </p>
           </div>
+        )}
+      </div>
+      <div className="right-side">
+        <div className="right-side-title">
+          <h1>Shorten It</h1>
+        </div>
+        <div className="right-side-content">
+          <p>
+            Shortenit is a free and open-source URL shortening service designed
+            for simplicity and efficiency.
+          </p>
         </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: