user api fetch request created

app.json

@@ -23,10 +23,10 @@
     },
     "web": {
       "bundler": "metro",
-      "output": "static",
+      "output": "server",
       "favicon": "./assets/images/favicon.png"
     },
-    "plugins": ["expo-router"],
+    "plugins": [["expo-router", { "origin": "https://example.com/" }]],
     "experiments": {
       "typedRoutes": true
     }

app/(api)/user+api.ts

@@ -0,0 +1,38 @@
+import { neon } from "@neondatabase/serverless";
+
+export async function POST(req: Request) {
+  const sql = neon(process.env.DATABASE_URL!);
+  const { name, email, clerkId } = await req.json();
+
+  if (!name || !email || !clerkId) {
+    return Response.json(
+      {
+        error: "Missing required fields!",
+      },
+      {
+        status: 400,
+      },
+    );
+  }
+
+  try {
+    const response = await sql`
+        INSERT INTO users (
+            name,
+            email,
+            clerk_id
+        )
+        VALUES (
+            ${name},
+            ${email},
+            ${clerkId}
+        )
+    `;
+
+    return new Response(JSON.stringify({ data: response }));
+  } catch (error) {
+    console.log(error);
+
+    return Response.json({ error });
+  }
+}

environment.d.ts

@@ -0,0 +1,14 @@
+// This file is needed to support autocomplete for process.env
+export {};
+
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      // clerk publishable key
+      EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY: string;
+
+      // postgres db url (neon db)
+      DATABASE_URL: string;
+    }
+  }
+}

lib/fetch.ts

@@ -0,0 +1,40 @@
+import { useState, useEffect, useCallback } from "react";
+
+export const fetchAPI = async (url: string, options?: RequestInit) => {
+  try {
+    const response = await fetch(url, options);
+    if (!response.ok) {
+      new Error(`HTTP error! status: ${response.status}`);
+    }
+    return await response.json();
+  } catch (error) {
+    console.error("Fetch error:", error);
+    throw error;
+  }
+};
+
+export const useFetch = <T>(url: string, options?: RequestInit) => {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const result = await fetchAPI(url, options);
+      setData(result.data);
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  }, [url, options]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return { data, loading, error, refetch: fetchData };
+};

tailwind.config.js

@@ -4,7 +4,7 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        Jakarta: ["Jakarta", "sans-serif"],
+        Jakarta: ["Jakarta-Regular", "sans-serif"],
         JakartaBold: ["Jakarta-Bold", "sans-serif"],
         JakartaExtraBold: ["Jakarta-ExtraBold", "sans-serif"],
         JakartaExtraLight: ["Jakarta-ExtraLight", "sans-serif"],