feat: connect backend with the frontend

frontend/.env.example

@@ -0,0 +1,4 @@
+# Frontend environment variables #
+
+REACT_APP_API_BASE_URL=http://localhost:8000
+REACT_APP_BASE_URL=http://localhost:8000

frontend/package-lock.json

@@ -17,6 +17,7 @@
         "@types/node": "^16.18.126",
         "@types/react": "^19.1.8",
         "@types/react-dom": "^19.1.6",
+        "eslint": "^8.57.1",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-redux": "^9.2.0",

frontend/package.json

@@ -12,6 +12,7 @@
     "@types/node": "^16.18.126",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
+    "eslint": "^8.57.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-redux": "^9.2.0",

frontend/src/api/url/types.ts

@@ -1,8 +1,9 @@
 
 export interface ShortenUrlRequest {
-    longUrl: string;
+    url: string;
 }
 
 export interface ShortenUrlResponse {
-    shortCode: string;
+    url: string;
+    shortcode: string;
 }

frontend/src/api/url/urlApi.ts

@@ -1,11 +1,11 @@
 import { ShortenUrlRequest, ShortenUrlResponse } from "./types";
 
+const baseUrl = process.env.REACT_APP_API_BASE_URL
+
 export async function shortenUrlApi(
     payload: ShortenUrlRequest
 ): Promise<ShortenUrlResponse> {
-    /* TODO
-
-    const response = await fetch('https://api.minxa.lol/api/v1/url', {
+    const response = await fetch(`${baseUrl}/`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(payload),
@@ -14,10 +14,11 @@ export async function shortenUrlApi(
     if (!response.ok) {
         throw new Error('Failed to shorten URL');
     }
-
-    */
+    
+    const data = await response.json()
 
     return {
-        shortCode: 'Ux5vy' // Dummy value return
+        url: data.url,
+        shortcode: data.shortcode
     }
 }

frontend/src/features/url/urlSlice.ts

@@ -5,9 +5,10 @@ import { UrlState } from './types';
 
 export const shortenUrl = createAsyncThunk(
     'url/shortenUrl',
-    async (longUrl: string) => {
-        const data = await shortenUrlApi({ longUrl });
-        return `https://minxa.lol/${data.shortCode}`;
+    async (url: string) => {
+        const baseUrl = process.env.REACT_APP_BASE_URL
+        const data = await shortenUrlApi({ url });
+        return `${baseUrl}/${data.shortcode}`;
     }
 );
 

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>