feat: connect backend with the frontend

frontend/src/pages/Home.tsx

@@ -11,7 +11,7 @@ import {
 
 const Home: React.FC = () => {
     /* component level state */
-    const [longUrl, setLongUrl] = useState('');
+    const [url, setUrl] = useState('');
 
     /* global state */
     const dispatch = useAppDispatch();
@@ -22,8 +22,8 @@ const Home: React.FC = () => {
 
     /* methods */
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === 'Enter' && longUrl.trim() !== '') {
-            dispatch(shortenUrl(longUrl));
+        if (e.key === 'Enter' && url.trim() !== '') {
+            dispatch(shortenUrl(url));
         }
     };
 
@@ -42,9 +42,9 @@ const Home: React.FC = () => {
 
                 <input
                     type="text"
-                    placeholder="Enter your long URL here"
-                    value={longUrl}
-                    onChange={(e) => setLongUrl(e.target.value)}
+                    placeholder="https://example.com/my-long-url"
+                    value={url}
+                    onChange={(e) => setUrl(e.target.value)}
                     onKeyDown={handleKeyDown}
                     className="w-80 p-3 rounded-md text-lg border border-gray-300 shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-400"
                 />
@@ -77,7 +77,7 @@ const Home: React.FC = () => {
                             onClick={handleCopy}
                             className="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600 transition">
                                 Copy to Clipboard
-                            </button>
+                        </button>
                     </div>
                 )}
             </div>