Add comments for code structure clarity; enhance readability across multiple components

App.js

@@ -18,46 +18,40 @@ const Stack = createNativeStackNavigator();
 
 const AuthStack = () => (
     <Stack.Navigator
-    screenOptions={{
-      headerShown: false,
-    }}
+        screenOptions={{headerShown: false}}
     >
-    <Stack.Screen name="LoginScreen" component={LoginScreen} />
-    <Stack.Screen name="RegisterScreen" component={RegisterScreen} />
+        <Stack.Screen name="LoginScreen" component={LoginScreen}/>
+        <Stack.Screen name="RegisterScreen" component={RegisterScreen}/>
     </Stack.Navigator>
 );
 
 const GameStack = () => (
     <Stack.Navigator
-    screenOptions={{
-      headerShown: false,
-    }}
+        screenOptions={{headerShown: false}}
     >
-    <Stack.Screen name="GameTypeScreen" component={GameTypeScreen} />
-    <Stack.Screen name="JoinPrivateGameScreen" component={JoinPrivateGameScreen} />
-    <Stack.Screen name="ManagePrivateGameScreen" component={ManagePrivateGameScreen} />
-    <Stack.Screen name="CreateGameScreen" component={CreateGameScreen} />
-    <Stack.Screen name="ManageGameScreen" component={ManageGameScreen} />
-    <Stack.Screen name="GameLobbyScreen" component={GameLobbyScreen} />
-    <Stack.Screen name="LeaderboardScreen" component={LeaderboardScreen} />
-    <Stack.Screen name="TeamScreen" component={TeamScreen} />
-    <Stack.Screen name="MapScreen" component={MapScreen} />
+        <Stack.Screen name="GameTypeScreen" component={GameTypeScreen}/>
+        <Stack.Screen name="JoinPrivateGameScreen" component={JoinPrivateGameScreen}/>
+        <Stack.Screen name="ManagePrivateGameScreen" component={ManagePrivateGameScreen}/>
+        <Stack.Screen name="CreateGameScreen" component={CreateGameScreen}/>
+        <Stack.Screen name="ManageGameScreen" component={ManageGameScreen}/>
+        <Stack.Screen name="GameLobbyScreen" component={GameLobbyScreen}/>
+        <Stack.Screen name="LeaderboardScreen" component={LeaderboardScreen}/>
+        <Stack.Screen name="TeamScreen" component={TeamScreen}/>
+        <Stack.Screen name="MapScreen" component={MapScreen}/>
     </Stack.Navigator>
 );
 
 const AdminStack = () => (
     <Stack.Navigator
-    screenOptions={{
-      headerShown: false,
-    }}
+        screenOptions={{headerShown: false}}
     >
-    <Stack.Screen name="AdminHubScreen" component={AdminHubScreen} />
-    <Stack.Screen name="ManageSubgroupsScreen" component={ManageSubgroupsScreen} />
-    <Stack.Screen name="LeaderboardScreen" component={LeaderboardScreen} />
-    <Stack.Screen name="MapScreen" component={MapScreen} />
-    <Stack.Screen name="TeamScreen" component={TeamScreen} />
-    <Stack.Screen name="CreateGameScreen" component={CreateGameScreen} />
-    <Stack.Screen name="ManageGameScreen" component={ManageGameScreen} />
+        <Stack.Screen name="AdminHubScreen" component={AdminHubScreen}/>
+        <Stack.Screen name="ManageSubgroupsScreen" component={ManageSubgroupsScreen}/>
+        <Stack.Screen name="LeaderboardScreen" component={LeaderboardScreen}/>
+        <Stack.Screen name="MapScreen" component={MapScreen}/>
+        <Stack.Screen name="TeamScreen" component={TeamScreen}/>
+        <Stack.Screen name="CreateGameScreen" component={CreateGameScreen}/>
+        <Stack.Screen name="ManageGameScreen" component={ManageGameScreen}/>
     </Stack.Navigator>
 );
 
@@ -65,17 +59,14 @@ export const App = () => {
     return (
         <NavigationContainer>
             <Stack.Navigator
-        screenOptions={{
-          headerShown: false,
-        }}
+                screenOptions={{headerShown: false}}
             >
-        <Stack.Screen name="Auth" component={AuthStack} />
-        <Stack.Screen name="Game" component={GameStack} />
-        <Stack.Screen name="Admin" component={AdminStack} />
+                <Stack.Screen name="Auth" component={AuthStack}/>
+                <Stack.Screen name="Game" component={GameStack}/>
+                <Stack.Screen name="Admin" component={AdminStack}/>
             </Stack.Navigator>
         </NavigationContainer>
     );
 };
 
 export default App;
-

package.json

@@ -3,10 +3,7 @@
   "main": "node_modules/expo/AppEntry.js",
   "version": "1.0.0",
   "scripts": {
-    "api": "node server/server.js",
-    "api:standalone": "npm --prefix server start",
     "start": "expo start",
-    "start:api": "npm run api",
     "android": "expo run:android",
     "ios": "expo run:ios",
     "web": "expo start --web",

src/components/API/API.js

@@ -0,0 +1,32 @@
+const API = {};
+
+API.get = (endpoint) => callFetch(endpoint, 'GET');
+API.post = (endpoint, data) => callFetch(endpoint, 'POST', data);
+API.put = (endpoint, data) => callFetch(endpoint, 'PUT', data);
+API.delete = (endpoint) => callFetch(endpoint, 'DELETE');
+
+export default API;
+
+const callFetch = async (endpoint, method, dataObj = null) => {
+    // Build request object
+    let requestObj = {method: method}; // GET, POST, PUT or DELETE
+    if (dataObj)
+        requestObj = {
+            ...requestObj,
+            headers: {'Content-type': 'application/json'},
+            body: JSON.stringify(dataObj),
+        };
+
+    // Call the fetch and process the return
+    try {
+        let result = null;
+        const response = await fetch(endpoint, requestObj);
+        if (response.status !== 204) result = await response.json();
+        return response.status >= 200 && response.status < 300
+            ? {isSuccess: true, result}
+            : {isSuccess: false, message: `${result.message}`};
+    } catch (error) {
+        return {isSuccess: false, message: error.message};
+    }
+};
+

src/components/API/useLoad.js

@@ -0,0 +1,30 @@
+import {useEffect, useState} from "react";
+import API from "./API";
+
+
+const useLoad = (loadEndpoint) => {
+
+    //   State ----------------------
+
+    const [records, setRecords] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+
+    //   Loader ----------------------
+    const loadRecords = async (endpoint) => {
+        setIsLoading(true);
+        const response = await API.get(endpoint);
+        if (response.isSuccess) setRecords(response.result);
+        setIsLoading(false);
+    };
+
+    useEffect(() => {
+        loadRecords(loadEndpoint);
+    }, []);
+
+    //   return ----------------------
+
+    return [records, setRecords, isLoading, loadRecords];
+};
+
+export default useLoad;
+

src/components/UI/Button.js

@@ -1,6 +1,11 @@
 import {Pressable, StyleSheet, Text, View} from "react-native";
 
 export const Button = ({ label, icon, onClick, styleLabel, styleButton }) => {
+  //   Initialisation -------------
+  //   State ----------------------
+  //   Handlers -------------------
+  //   View -----------------------
+
   return (
     <Pressable onPress={onClick} style={[styles.button, styleButton]}>
       {icon ? icon : null}
@@ -10,6 +15,11 @@ export const Button = ({ label, icon, onClick, styleLabel, styleButton }) => {
 };
 
 export const ButtonTray = ({ children }) => {
+  //   Initialisation -------------
+  //   State ----------------------
+  //   Handlers -------------------
+  //   View -----------------------
+
   return <View style={styles.buttonTray}>{children}</View>;
 };
 

src/components/gameplay/AdminCacheEditorView.js

@@ -2,6 +2,11 @@ import React from 'react';
 import MapView, {Circle, Marker} from 'react-native-maps';
 
 const AdminCacheEditorView = ({ userLocation, caches, onAddCache, onMoveCache }) => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
   if (!userLocation) {
     return null;
   }

src/components/gameplay/ClaimTimerView.js

@@ -2,8 +2,13 @@ import React, {useEffect, useState} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
 const ClaimTimerView = ({ cache, onClaimSuccess, isClaiming }) => {
+//   Initialisation -------------
+//   State ----------------------
+
   const [timeLeft, setTimeLeft] = useState(5);
 
+//   Handlers -------------------
+
   useEffect(() => {
     let timer;
     if (isClaiming && timeLeft > 0) {
@@ -16,6 +21,8 @@ const ClaimTimerView = ({ cache, onClaimSuccess, isClaiming }) => {
     return () => clearTimeout(timer);
   }, [isClaiming, timeLeft, cache, onClaimSuccess]);
 
+//   View -----------------------
+
   if (!isClaiming) {
     return null;
   }
@@ -45,4 +52,3 @@ const styles = StyleSheet.create({
 });
 
 export default ClaimTimerView;
-

src/components/gameplay/PlayerMapView.js

@@ -3,9 +3,12 @@ import MapView, {Circle} from 'react-native-maps';
 import ClaimTimerView from './ClaimTimerView';
 
 const PlayerMapView = ({ userLocation, visibleCache, isClaiming, onClaimSuccess }) => {
-  if (!userLocation) {
-    return null;
-  }
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
+  if (!userLocation) return null;
 
   return (
     <>

src/components/layout/BottomNavbar.js

@@ -1,6 +1,8 @@
 import {Pressable, StyleSheet, Text, View} from 'react-native';
 
 const BottomNavbar = ({ navigation, routeName }) => {
+//   Initialisation ------------
+
     const tabs = [
         {
             label: 'Map',
@@ -19,6 +21,10 @@ const BottomNavbar = ({ navigation, routeName }) => {
         },
     ];
 
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
     return (
         <View style={styles.container}>
             {tabs.map((tab) => {
@@ -71,4 +77,3 @@ const styles = StyleSheet.create({
 });
 
 export default BottomNavbar;
-

src/components/layout/Screen.js

@@ -5,18 +5,18 @@ import TopNavbar from "./TopNavbar";
 import BottomNavbar from "./BottomNavbar";
 
 const Screen = ({ children, style }) => {
+  //   Initialisation -------------
+
   const navigation = useNavigation();
   const route = useRoute();
 
   const titleMap = {
-    LoginScreen: "Login",
-    RegisterScreen: "Register",
     GameTypeScreen: "Game Type",
     JoinPrivateGameScreen: "Join Private Game",
     ManagePrivateGameScreen: "Manage Private Game",
     CreateGameScreen: "Create Game",
     ManageGameScreen: "Manage Game",
-    GameLobbyScreen: "Leaderboard",
+    GameLobbyScreen: "Game Lobby",
     LeaderboardScreen: "Leaderboard",
     TeamScreen: "Current Team",
     MapScreen: "Map",
@@ -24,15 +24,21 @@ const Screen = ({ children, style }) => {
     ManageSubgroupsScreen: "Manage Subgroups",
   };
 
+  //   State ----------------------
+
   const routeName = route.name;
-  const showBack = routeName !== "LoginScreen" && navigation.canGoBack();
+  const isAuthScreen = routeName === "LoginScreen" || routeName === "RegisterScreen";
+  const showBack = !isAuthScreen && navigation.canGoBack();
   const pageTitle = titleMap[routeName] || "Treasure Hunt";
 
+  //   Handlers -------------------
+  //   View -----------------------
+
   return (
     <View style={[styles.screen, style]}>
-      <TopNavbar title={pageTitle} showBack={showBack} navigation={navigation} />
+      {!isAuthScreen && <TopNavbar title={pageTitle} showBack={showBack} navigation={navigation} />}
       <View style={styles.content}>{children}</View>
-      <BottomNavbar navigation={navigation} routeName={routeName} />
+      {!isAuthScreen && <BottomNavbar navigation={navigation} routeName={routeName} />}
       <StatusBar style="light" />
     </View>
   );

src/components/layout/TopNavbar.js

@@ -1,24 +1,29 @@
 import {Pressable, StyleSheet, Text, View} from 'react-native';
 import {clearSession} from '../../hooks/SessionStore';
 
-const TopNavbar = ({ title, showBack, navigation }) => {
+const TopNavbar = ({title, showBack, navigation}) => {
+//   Initialisation ------------
+
     const routeName = navigation.getState()?.routes?.[navigation.getState().index]?.name;
     const showLogout = routeName !== 'LoginScreen' && routeName !== 'RegisterScreen';
 
+//   State ----------------------
+//   Handlers -------------------
+
     const handleBack = () => {
-    if (navigation.canGoBack()) {
-      navigation.goBack();
-    }
+        if (navigation.canGoBack()) navigation.goBack();
     };
 
     const handleLogout = () => {
         clearSession();
         navigation.reset({
             index: 0,
-      routes: [{ name: 'Auth', params: { screen: 'LoginScreen' } }],
+            routes: [{name: 'Auth', params: {screen: 'LoginScreen'}}],
         });
     };
 
+//   View -----------------------
+
     return (
         <View style={styles.container}>
             <View style={styles.leftSlot}>
@@ -87,4 +92,3 @@ const styles = StyleSheet.create({
 });
 
 export default TopNavbar;
-

src/components/screens/AdminHubScreen.js

@@ -2,17 +2,24 @@ import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import Screen from '../layout/Screen';
 
-const AdminHubScreen = () => (
+const AdminHubScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
+    return (
         <Screen style={styles.container}>
             <Text style={styles.title}>Admin Hub</Text>
             <Text style={styles.body}>Admin hub setup goes here.</Text>
         </Screen>
-);
+    );
+};
 
 const styles = StyleSheet.create({
-  container: { justifyContent: 'center', alignItems: 'center' },
-  title: { fontSize: 24, fontWeight: 'bold' },
-  body: { color: '#4b5563', fontSize: 15, marginTop: 10 },
+    container: {justifyContent: 'center', alignItems: 'center'},
+    title: {fontSize: 24, fontWeight: 'bold'},
+    body: {color: '#4b5563', fontSize: 15, marginTop: 10},
 });
 
 export default AdminHubScreen;

src/components/screens/CreateGameScreen.js

@@ -2,17 +2,24 @@ import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import Screen from '../layout/Screen';
 
-const CreateGameScreen = () => (
+const CreateGameScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
+    return (
         <Screen style={styles.container}>
             <Text style={styles.title}>Create Game</Text>
             <Text style={styles.body}>Create game setup goes here.</Text>
         </Screen>
-);
+    );
+};
 
 const styles = StyleSheet.create({
-  container: { justifyContent: 'center', alignItems: 'center' },
-  title: { fontSize: 24, fontWeight: 'bold' },
-  body: { color: '#4b5563', fontSize: 15, marginTop: 10 },
+    container: {justifyContent: 'center', alignItems: 'center'},
+    title: {fontSize: 24, fontWeight: 'bold'},
+    body: {color: '#4b5563', fontSize: 15, marginTop: 10},
 });
 
 export default CreateGameScreen;

src/components/screens/GameLobbyScreen.js

@@ -2,17 +2,24 @@ import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import Screen from '../layout/Screen';
 
-const GameLobbyScreen = () => (
+const GameLobbyScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
+    return (
         <Screen style={styles.container}>
             <Text style={styles.title}>Game Lobby</Text>
             <Text style={styles.body}>Game lobby setup goes here.</Text>
         </Screen>
-);
+    );
+};
 
 const styles = StyleSheet.create({
-  container: { justifyContent: 'center', alignItems: 'center' },
-  title: { fontSize: 24, fontWeight: 'bold' },
-  body: { color: '#4b5563', fontSize: 15, marginTop: 10 },
+    container: {justifyContent: 'center', alignItems: 'center'},
+    title: {fontSize: 24, fontWeight: 'bold'},
+    body: {color: '#4b5563', fontSize: 15, marginTop: 10},
 });
 
 export default GameLobbyScreen;

src/components/screens/GameTypeScreen.js

@@ -3,33 +3,39 @@ import {Pressable, StyleSheet, Text, View} from 'react-native';
 import useGameHook from '../../hooks/useGameHook';
 import Screen from '../layout/Screen';
 
-const GameTypeScreen = ({ navigation }) => {
-  const { getGameTypes } = useGameHook();
+const GameTypeScreen = ({navigation}) => {
+//   Initialisation ------------
+
+    const {getGameTypes} = useGameHook();
+
+//   State ----------------------
+
     const [gameTypes, setGameTypes] = useState([]);
 
+//   Handlers -------------------
+
     useEffect(() => {
         let isMounted = true;
-
         const load = async () => {
             const types = await getGameTypes();
-	  if (isMounted) {
-		setGameTypes(types || []);
-	  }
+            if (isMounted) setGameTypes(types || []);
         };
-
         load();
+        return () => { isMounted = false; };
+    }, []);
 
-	return () => {
-	  isMounted = false;
-	};
-  }, [getGameTypes]);
+//   View -----------------------
 
     return (
         <Screen style={styles.container}>
             <Text style={styles.title}>Select Game Type</Text>
             <View style={styles.content}>
                 {gameTypes && gameTypes.map((type) => (
-		  <Pressable key={type} style={styles.button} onPress={() => navigation.navigate('GameLobbyScreen')}>
+                    <Pressable
+                        key={type}
+                        style={styles.button}
+                        onPress={() => navigation.navigate('GameLobbyScreen')}
+                    >
                         <Text style={styles.buttonText}>{type}</Text>
                     </Pressable>
                 ))}
@@ -65,4 +71,3 @@ const styles = StyleSheet.create({
 });
 
 export default GameTypeScreen;
-

src/components/screens/JoinPrivateGameScreen.js

@@ -3,6 +3,11 @@ import {StyleSheet, Text} from 'react-native';
 import Screen from '../layout/Screen';
 
 const JoinPrivateGameScreen = () => {
+  //   Initialisation -------------
+  //   State ----------------------
+  //   Handlers -------------------
+  //   View -----------------------
+
   return (
     <Screen style={styles.container}>
       <Text style={styles.title}>Join Private Game</Text>

src/components/screens/LeaderboardScreen.js

@@ -2,18 +2,24 @@ import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import Screen from '../layout/Screen';
 
-const LeaderboardScreen = () => (
+const LeaderboardScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
+    return (
         <Screen style={styles.container}>
             <Text style={styles.title}>Leaderboard</Text>
             <Text style={styles.body}>Leaderboard view goes here.</Text>
         </Screen>
-);
+    );
+};
 
 const styles = StyleSheet.create({
-  container: { justifyContent: 'center', alignItems: 'center' },
-  title: { fontSize: 24, fontWeight: 'bold' },
-  body: { color: '#4b5563', fontSize: 15, marginTop: 10 },
+    container: {justifyContent: 'center', alignItems: 'center'},
+    title: {fontSize: 24, fontWeight: 'bold'},
+    body: {color: '#4b5563', fontSize: 15, marginTop: 10},
 });
 
 export default LeaderboardScreen;
-

src/components/screens/LoginScreen.js

@@ -5,9 +5,16 @@ import Screen from '../layout/Screen';
 import {Button, ButtonTray} from '../UI/Button';
 
 const LoginScreen = ({ navigation }) => {
+//   Initialisation ------------->
+
   const { email, password, error, isLoading, setEmail, setPassword, login } = useAuthHook();
+
+//   State ----------------------
+
   const [submitting, setSubmitting] = useState(false);
 
+//   Handlers -------------------
+
   const handleLogin = async () => {
     setSubmitting(true);
     const user = await login();
@@ -22,6 +29,8 @@ const LoginScreen = ({ navigation }) => {
     navigation.reset({ index: 0, routes: [{ name: 'Game' }] });
   };
 
+//   View -----------------------
+
   return (
     <Screen style={styles.container}>
       <View style={styles.content}>
@@ -107,4 +116,3 @@ const styles = StyleSheet.create({
 });
 
 export default LoginScreen;
-

src/components/screens/ManageGameScreen.js

@@ -7,13 +7,20 @@ import useGameHook from '../../hooks/useGameHook';
 import {getSession} from '../../hooks/SessionStore';
 
 const ManageGameScreen = () => {
+//   Initialisation ------------
+
     const session = getSession();
-  const { getCaches, upsertCache } = useGameHook();
+    const {getCaches, upsertCache} = useGameHook();
+
+//   State ----------------------
+
     const [userLocation, setUserLocation] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState('');
     const [cacheRecords, setCacheRecords] = useState([]);
 
+//   Handlers -------------------
+
     const loadCaches = useCallback(async () => {
         if (!session.currentGid) {
             setCacheRecords([]);
@@ -21,53 +28,36 @@ const ManageGameScreen = () => {
         }
         const rows = await getCaches(session.currentGid, null);
         setCacheRecords(rows || []);
-  }, [getCaches, session.currentGid]);
+    }, [session.currentGid]);
 
-  useEffect(() => {
-    loadCaches();
-  }, [loadCaches]);
+    useEffect(() => { loadCaches(); }, [loadCaches]);
 
     useEffect(() => {
         let locationSub;
-
         const start = async () => {
-      const { status } = await Location.requestForegroundPermissionsAsync();
+            const {status} = await Location.requestForegroundPermissionsAsync();
             if (status !== 'granted') {
                 setError('Location permission denied');
                 setLoading(false);
                 return;
             }
-
-      const current = await Location.getCurrentPositionAsync({ accuracy: Location.Accuracy.Balanced });
-      setUserLocation({ latitude: current.coords.latitude, longitude: current.coords.longitude });
+            const current = await Location.getCurrentPositionAsync({accuracy: Location.Accuracy.Balanced});
+            setUserLocation({latitude: current.coords.latitude, longitude: current.coords.longitude});
 
             locationSub = await Location.watchPositionAsync(
-        {
-          accuracy: Location.Accuracy.Balanced,
-          distanceInterval: 1,
-          timeInterval: 1000,
-        },
+                {accuracy: Location.Accuracy.Balanced, distanceInterval: 1, timeInterval: 1000},
                 (next) => {
-          setUserLocation({ latitude: next.coords.latitude, longitude: next.coords.longitude });
+                    setUserLocation({latitude: next.coords.latitude, longitude: next.coords.longitude});
                 },
             );
-
             setLoading(false);
         };
-
         start();
-
-    return () => {
-      if (locationSub) {
-        locationSub.remove();
-      }
-    };
+        return () => { if (locationSub) locationSub.remove(); };
     }, []);
 
     const handleAddCache = async (coordinate) => {
-    if (!session.currentGid) {
-      return;
-    }
+        if (!session.currentGid) return;
         await upsertCache({
             gid: session.currentGid,
             latitude: coordinate.latitude,
@@ -80,13 +70,9 @@ const ManageGameScreen = () => {
     };
 
     const handleMoveCache = async (cacheId, coordinate) => {
-    if (!session.currentGid) {
-      return;
-    }
+        if (!session.currentGid) return;
         const current = cacheRecords.find((cache) => cache.id === cacheId);
-    if (!current) {
-      return;
-    }
+        if (!current) return;
         await upsertCache({
             gid: session.currentGid,
             cacheId,
@@ -99,6 +85,8 @@ const ManageGameScreen = () => {
         await loadCaches();
     };
 
+//   View -----------------------
+
     if (!session.currentGid) {
         return (
             <Screen style={styles.center}>
@@ -118,7 +106,7 @@ const ManageGameScreen = () => {
     if (loading) {
         return (
             <Screen style={styles.center}>
-        <ActivityIndicator size="large" />
+                <ActivityIndicator size="large"/>
             </Screen>
         );
     }
@@ -146,24 +134,11 @@ const ManageGameScreen = () => {
 };
 
 const styles = StyleSheet.create({
-  container: {
-    padding: 0,
-  },
-  mapWrap: {
-    flex: 1,
-  },
-  center: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  body: {
-    color: '#4b5563',
-    fontSize: 15,
-  },
-  error: {
-    color: '#dc2626',
-    fontSize: 15,
-  },
+    container: {padding: 0},
+    mapWrap: {flex: 1},
+    center: {justifyContent: 'center', alignItems: 'center'},
+    body: {color: '#4b5563', fontSize: 15},
+    error: {color: '#dc2626', fontSize: 15},
 });
 
 export default ManageGameScreen;

src/components/screens/ManagePrivateGameScreen.js

@@ -3,6 +3,11 @@ import {StyleSheet, Text} from 'react-native';
 import Screen from '../layout/Screen';
 
 const ManagePrivateGameScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
     return (
         <Screen style={styles.container}>
             <Text style={styles.title}>Manage Private Game</Text>
@@ -12,9 +17,9 @@ const ManagePrivateGameScreen = () => {
 };
 
 const styles = StyleSheet.create({
-  container: { justifyContent: 'center', alignItems: 'center' },
-  title: { fontSize: 24, fontWeight: 'bold' },
-  body: { color: '#4b5563', fontSize: 15, marginTop: 10 },
+    container: {justifyContent: 'center', alignItems: 'center'},
+    title: {fontSize: 24, fontWeight: 'bold'},
+    body: {color: '#4b5563', fontSize: 15, marginTop: 10},
 });
 
 export default ManagePrivateGameScreen;

src/components/screens/ManageSubgroupsScreen.js

@@ -2,17 +2,24 @@ import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import Screen from '../layout/Screen';
 
-const ManageSubgroupsScreen = () => (
+const ManageSubgroupsScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
+    return (
         <Screen style={styles.container}>
             <Text style={styles.title}>Manage Subgroups</Text>
             <Text style={styles.body}>Manage subgroups setup goes here.</Text>
         </Screen>
-);
+    );
+};
 
 const styles = StyleSheet.create({
-  container: { justifyContent: 'center', alignItems: 'center' },
-  title: { fontSize: 24, fontWeight: 'bold' },
-  body: { color: '#4b5563', fontSize: 15, marginTop: 10 },
+    container: {justifyContent: 'center', alignItems: 'center'},
+    title: {fontSize: 24, fontWeight: 'bold'},
+    body: {color: '#4b5563', fontSize: 15, marginTop: 10},
 });
 
 export default ManageSubgroupsScreen;

src/components/screens/MapScreen.js

@@ -9,14 +9,19 @@ import usePlayerGame from '../../hooks/usePlayerGame';
 import {getSession} from '../../hooks/SessionStore';
 import Cache from '../../models/Cache';
 
-const toHeading = ({ x, y }) => {
+const toHeading = ({x, y}) => {
     const angle = Math.atan2(y, x) * (180 / Math.PI);
     return angle < 0 ? angle + 360 : angle;
 };
 
 const MapScreen = () => {
+//   Initialisation ------------
+
     const session = getSession();
-  const { getCaches, claimCache } = useGameHook();
+    const {getCaches, claimCache} = useGameHook();
+
+//   State ----------------------
+
     const [userLocation, setUserLocation] = useState(null);
     const [heading, setHeading] = useState(null);
     const [loading, setLoading] = useState(true);
@@ -24,8 +29,7 @@ const MapScreen = () => {
     const [error, setError] = useState('');
 
     const activeCaches = useMemo(() => (
-    cacheRecords.map(
-      (cache) => new Cache(
+        cacheRecords.map((cache) => new Cache(
             cache.id,
             cache.coordinates.latitude,
             cache.coordinates.longitude,
@@ -33,12 +37,13 @@ const MapScreen = () => {
             cache.clue,
             cache.groupId,
             cache.subgroupId,
-      ),
-    )
+        ))
     ), [cacheRecords]);
 
     const subgroupFilter = session.currentSGid;
-  const { visibleCache, isClaiming, setIsClaiming } = usePlayerGame(userLocation, heading, activeCaches);
+    const {visibleCache, isClaiming, setIsClaiming} = usePlayerGame(userLocation, heading, activeCaches);
+
+//   Handlers -------------------
 
     const loadCaches = useCallback(async () => {
         if (!session.currentGid) {
@@ -47,62 +52,46 @@ const MapScreen = () => {
         }
         const rows = await getCaches(session.currentGid, subgroupFilter);
         setCacheRecords(rows || []);
-  }, [getCaches, session.currentGid, subgroupFilter]);
+    }, [session.currentGid, subgroupFilter]);
 
-  useEffect(() => {
-    loadCaches();
-  }, [loadCaches]);
+    useEffect(() => { loadCaches(); }, [loadCaches]);
 
     useEffect(() => {
         let locationSub;
         let headingSub;
 
         const start = async () => {
-      const { status } = await Location.requestForegroundPermissionsAsync();
+            const {status} = await Location.requestForegroundPermissionsAsync();
             if (status !== 'granted') {
                 setError('Location permission denied');
                 setLoading(false);
                 return;
             }
-
-      const current = await Location.getCurrentPositionAsync({ accuracy: Location.Accuracy.Balanced });
-      setUserLocation({ latitude: current.coords.latitude, longitude: current.coords.longitude });
+            const current = await Location.getCurrentPositionAsync({accuracy: Location.Accuracy.Balanced});
+            setUserLocation({latitude: current.coords.latitude, longitude: current.coords.longitude});
 
             locationSub = await Location.watchPositionAsync(
-        {
-          accuracy: Location.Accuracy.Balanced,
-          distanceInterval: 1,
-          timeInterval: 1000,
-        },
+                {accuracy: Location.Accuracy.Balanced, distanceInterval: 1, timeInterval: 1000},
                 (next) => {
-          setUserLocation({ latitude: next.coords.latitude, longitude: next.coords.longitude });
+                    setUserLocation({latitude: next.coords.latitude, longitude: next.coords.longitude});
                 },
             );
 
             Magnetometer.setUpdateInterval(500);
-      headingSub = Magnetometer.addListener((data) => {
-        setHeading(toHeading(data));
-      });
-
+            headingSub = Magnetometer.addListener((data) => { setHeading(toHeading(data)); });
             setLoading(false);
         };
 
         start();
 
         return () => {
-      if (locationSub) {
-        locationSub.remove();
-      }
-      if (headingSub) {
-        headingSub.remove();
-      }
+            if (locationSub) locationSub.remove();
+            if (headingSub) headingSub.remove();
         };
     }, []);
 
     const handleClaim = async (cacheId) => {
-    if (!session.currentGid) {
-      return;
-    }
+        if (!session.currentGid) return;
         await claimCache({
             gid: session.currentGid,
             cacheId,
@@ -113,6 +102,8 @@ const MapScreen = () => {
         await loadCaches();
     };
 
+//   View -----------------------
+
     if (!session.currentGid) {
         return (
             <Screen style={styles.center}>
@@ -132,7 +123,7 @@ const MapScreen = () => {
     if (loading) {
         return (
             <Screen style={styles.center}>
-        <ActivityIndicator size="large" />
+                <ActivityIndicator size="large"/>
             </Screen>
         );
     }
@@ -160,24 +151,11 @@ const MapScreen = () => {
 };
 
 const styles = StyleSheet.create({
-  container: {
-    padding: 0,
-  },
-  mapWrap: {
-    flex: 1,
-  },
-  center: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  body: {
-    color: '#4b5563',
-    fontSize: 15,
-  },
-  error: {
-    color: '#dc2626',
-    fontSize: 15,
-  },
+    container: {padding: 0},
+    mapWrap: {flex: 1},
+    center: {justifyContent: 'center', alignItems: 'center'},
+    body: {color: '#4b5563', fontSize: 15},
+    error: {color: '#dc2626', fontSize: 15},
 });
 
 export default MapScreen;

src/components/screens/RegisterScreen.js

@@ -4,38 +4,36 @@ import useAuthHook from '../../hooks/useAuthHook';
 import Screen from '../layout/Screen';
 import {Button, ButtonTray} from '../UI/Button';
 
-const RegisterScreen = ({ navigation }) => {
+const RegisterScreen = ({navigation}) => {
+//   Initialisation ------------
+
     const {
-    username,
-    email,
-    password,
-    confirmPassword,
-    accountType,
-    error,
-    isLoading,
-    setUsername,
-    setEmail,
-    setPassword,
-    setConfirmPassword,
-    setAccountType,
+        username, email, password, confirmPassword, accountType,
+        error, isLoading,
+        setUsername, setEmail, setPassword, setConfirmPassword, setAccountType,
         register,
     } = useAuthHook();
+
+//   State ----------------------
+
     const [submitting, setSubmitting] = useState(false);
 
+//   Handlers -------------------
+
     const handleRegister = async () => {
         setSubmitting(true);
         const user = await register();
         setSubmitting(false);
-    if (!user) {
-      return;
-    }
+        if (!user) return;
         if (user.IsAcceptedAdmin) {
-      navigation.reset({ index: 0, routes: [{ name: 'Admin' }] });
+            navigation.reset({index: 0, routes: [{name: 'Admin'}]});
             return;
         }
-    navigation.reset({ index: 0, routes: [{ name: 'Game' }] });
+        navigation.reset({index: 0, routes: [{name: 'Game'}]});
     };
 
+//   View -----------------------
+
     return (
         <Screen style={styles.container}>
             <View style={styles.content}>
@@ -80,14 +78,18 @@ const RegisterScreen = ({ navigation }) => {
                         onPress={() => setAccountType('Individual')}
                         disabled={isLoading}
                     >
-            <Text style={[styles.typeText, accountType === 'Individual' && styles.typeTextActive]}>Individual</Text>
+                        <Text style={[styles.typeText, accountType === 'Individual' && styles.typeTextActive]}>
+                            Individual
+                        </Text>
                     </Pressable>
                     <Pressable
                         style={[styles.typeButton, accountType === 'Business/School' && styles.typeButtonActive]}
                         onPress={() => setAccountType('Business/School')}
                         disabled={isLoading}
                     >
-            <Text style={[styles.typeText, accountType === 'Business/School' && styles.typeTextActive]}>Business</Text>
+                        <Text style={[styles.typeText, accountType === 'Business/School' && styles.typeTextActive]}>
+                            Business
+                        </Text>
                     </Pressable>
                 </View>
 
@@ -102,7 +104,7 @@ const RegisterScreen = ({ navigation }) => {
                     />
                 </ButtonTray>
 
-        <Pressable onPress={() => navigation.navigate('Auth', { screen: 'LoginScreen' })}>
+                <Pressable onPress={() => navigation.navigate('Auth', {screen: 'LoginScreen'})}>
                     <Text style={styles.linkText}>Back to Login</Text>
                 </Pressable>
             </View>

src/components/screens/TeamScreen.js

@@ -2,17 +2,24 @@ import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import Screen from '../layout/Screen';
 
-const TeamScreen = () => (
+const TeamScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+
+    return (
         <Screen style={styles.container}>
             <Text style={styles.title}>Team Management</Text>
             <Text style={styles.body}>Team management setup goes here.</Text>
         </Screen>
-);
+    );
+};
 
 const styles = StyleSheet.create({
-  container: { justifyContent: 'center', alignItems: 'center' },
-  title: { fontSize: 24, fontWeight: 'bold' },
-  body: { color: '#4b5563', fontSize: 15, marginTop: 10 },
+    container: {justifyContent: 'center', alignItems: 'center'},
+    title: {fontSize: 24, fontWeight: 'bold'},
+    body: {color: '#4b5563', fontSize: 15, marginTop: 10},
 });
 
 export default TeamScreen;

src/hooks/SessionStore.js

@@ -1,3 +1,5 @@
+// --- Session Store ---
+
 const session = {
   currentUid: null,
   currentGid: null,
@@ -7,6 +9,8 @@ const session = {
   isAcceptedAdmin: false,
 };
 
+// --- Handlers ---
+
 const setSessionUser = (user) => {
   session.currentUid = user?.Uid ?? null;
   session.currentGid = user?.Gid ?? null;

src/hooks/dbLink.js

@@ -1,22 +1,3 @@
-import Constants from 'expo-constants';
+const API_BASE_URL = 'http://localhost:3000';
 
-const hostFromExpo = Constants.expoConfig?.hostUri?.split(':')[0] || null;
-const apiBaseUrl = 'http://localhost:3000'; // Shirish, i need to deploy the database first so... wait until that... sorry buddy...
-// if you want you can run your own db locally i can send you the files for it just ask :(((
-
-const postJson = async (path, payload) => {
-  const response = await fetch(`${apiBaseUrl}${path}`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(payload),
-  });
-  const result = await response.json();
-  if (!response.ok) {
-    throw new Error(result.message || 'Request failed');
-  }
-  return result;
-};
-
-export const postDb = async (action, payload = {}) => {
-  return postJson('/db', { action, payload });
-};
+export default API_BASE_URL;

src/hooks/useAuthHook.js

@@ -1,8 +1,16 @@
 import {useState} from 'react';
-import {postDb} from './dbLink';
+import API from '../components/API/API';
+import API_BASE_URL from './dbLink';
 import {clearSession, setSessionUser} from './SessionStore';
 
 const useAuthHook = () => {
+  //   Initialisation ------------
+
+  const loginEndpoint = `${API_BASE_URL}/auth/login`;
+  const registerEndpoint = `${API_BASE_URL}/auth/register`;
+
+  //   State ----------------------
+
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [username, setUsername] = useState('');
@@ -11,40 +19,41 @@ const useAuthHook = () => {
   const [error, setError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
 
+  //   Handlers -------------------
+
   const login = async () => {
     setError('');
     setIsLoading(true);
-    try {
-      const user = await postDb('login', { email: email.trim(), password });
-      setSessionUser(user);
+    const response = await API.post(loginEndpoint, {
+      email: email.trim(),
+      password,
+    });
     setIsLoading(false);
-      return user;
-    } catch (e) {
-      setError(e.message);
-      setIsLoading(false);
-      return null;
+    if (response.isSuccess) {
+      setSessionUser(response.result);
+      return response.result;
     }
+    setError(response.message);
+    return null;
   };
 
   const register = async () => {
     setError('');
     setIsLoading(true);
-    try {
-      const user = await postDb('register', {
+    const response = await API.post(registerEndpoint, {
       username: username.trim(),
       email: email.trim().toLowerCase(),
       password,
       confirmPassword,
       accountType,
     });
-      setSessionUser(user);
     setIsLoading(false);
-      return user;
-    } catch (e) {
-      setError(e.message);
-      setIsLoading(false);
-      return null;
+    if (response.isSuccess) {
+      setSessionUser(response.result);
+      return response.result;
     }
+    setError(response.message);
+    return null;
   };
 
   const logout = () => {
@@ -57,6 +66,8 @@ const useAuthHook = () => {
     setError('');
   };
 
+  //   Return ---------------------
+
   return {
     email,
     password,

src/hooks/useGameHook.js

@@ -1,33 +1,102 @@
-import {postDb} from './dbLink';
+import API from '../components/API/API';
+import API_BASE_URL from './dbLink';
 
 const useGameHook = () => {
-  const request = async (action, payload = {}) => postDb(action, payload);
+  //   Initialisation ------------
 
-  const getGameTypes = async () => request('getGameTypes');
+  const gameTypesEndpoint = `${API_BASE_URL}/game-types`;
+  const groupsEndpoint = `${API_BASE_URL}/groups`;
+  const subgroupMembershipsEndpoint = `${API_BASE_URL}/subgroup-memberships`;
+  const teamsEndpoint = `${API_BASE_URL}/teams`;
+  const teamMembersEndpoint = `${API_BASE_URL}/team-members`;
+  const gameDataEndpoint = `${API_BASE_URL}/game-data`;
+  const adminWaitlistEndpoint = `${API_BASE_URL}/admin-waitlist`;
 
-  const getCreatedPrivateGame = async (userId) => request('getCreatedPrivateGameByUser', { userId });
+  //   Handlers -------------------
 
-  const createPrivateGame = async (payload) => request('createPrivateGame', payload);
+  const getGameTypes = async () => {
+    const response = await API.get(gameTypesEndpoint);
+    return response.isSuccess ? response.result : [];
+  };
 
-  const joinPrivateGame = async (payload) => request('joinPrivateGame', payload);
+  const getCreatedPrivateGame = async (userId) => {
+    const response = await API.get(`${groupsEndpoint}?CreatedByUid=${userId}`);
+    return response.isSuccess ? response.result : [];
+  };
 
-  const joinAsAdmin = async (payload) => request('joinAsAdmin', payload);
+  const createPrivateGame = async (payload) => {
+    const response = await API.post(groupsEndpoint, payload);
+    return response.isSuccess ? response.result : null;
+  };
 
-  const getLobby = async (gid) => request('getLobby', { gid });
+  const joinPrivateGame = async (payload) => {
+    const response = await API.post(subgroupMembershipsEndpoint, payload);
+    return response.isSuccess ? response.result : null;
+  };
 
-  const getTeam = async (tid) => request('getTeam', { tid });
+  const joinAsAdmin = async (payload) => {
+    const response = await API.post(adminWaitlistEndpoint, payload);
+    return response.isSuccess ? response.result : null;
+  };
 
-  const createTeam = async (payload) => request('createTeam', payload);
+  const getLobby = async (gid) => {
+    const response = await API.get(`${groupsEndpoint}/${gid}`);
+    return response.isSuccess ? response.result : null;
+  };
 
-  const joinTeamByCode = async (payload) => request('joinTeamByCode', payload);
+  const getTeam = async (tid) => {
+    const response = await API.get(`${teamsEndpoint}/${tid}`);
+    return response.isSuccess ? response.result : null;
+  };
 
-  const getMapPoints = async (gid, sgid = null) => request('getMapPoints', { gid, sgid });
+  const createTeam = async (payload) => {
+    const response = await API.post(teamsEndpoint, payload);
+    return response.isSuccess ? response.result : null;
+  };
 
-  const getCaches = async (gid, sgid = null) => request('getCaches', { gid, sgid });
+  const joinTeamByCode = async (payload) => {
+    const response = await API.post(teamMembersEndpoint, payload);
+    return response.isSuccess ? response.result : null;
+  };
 
-  const upsertCache = async (payload) => request('upsertCache', payload);
+  const getMapPoints = async (gid, sgid = null) => {
+    let url = `${gameDataEndpoint}/${gid}/caches`;
+    if (sgid !== null) url += `?SGid=${sgid}`;
+    const response = await API.get(url);
+    return response.isSuccess ? response.result : [];
+  };
 
-  const claimCache = async (payload) => request('claimCache', payload);
+  const getCaches = async (gid, sgid = null) => {
+    let url = `${gameDataEndpoint}/${gid}/caches`;
+    if (sgid !== null) url += `?SGid=${sgid}`;
+    const response = await API.get(url);
+    return response.isSuccess ? response.result : [];
+  };
+
+  const upsertCache = async (payload) => {
+    if (payload.cacheId) {
+      const response = await API.put(
+        `${gameDataEndpoint}/${payload.gid}/caches/${payload.cacheId}`,
+        payload,
+      );
+      return response.isSuccess ? response.result : null;
+    }
+    const response = await API.post(
+      `${gameDataEndpoint}/${payload.gid}/caches`,
+      payload,
+    );
+    return response.isSuccess ? response.result : null;
+  };
+
+  const claimCache = async (payload) => {
+    const response = await API.put(
+      `${gameDataEndpoint}/${payload.gid}/caches/${payload.cacheId}`,
+      {ClaimedByUid: payload.uid, ClaimedByTid: payload.tid},
+    );
+    return response.isSuccess ? response.result : null;
+  };
+
+  //   Return ---------------------
 
   return {
     getGameTypes,

src/hooks/usePlayerGame.js

@@ -2,9 +2,13 @@ import {useEffect, useState} from 'react';
 import {isLookingAtCache, isWithinRadius} from '../utils/geoMath';
 
 const usePlayerGame = (playerLocation, playerHeading, activeCaches) => {
+//   State ----------------------
+
     const [visibleCache, setVisibleCache] = useState(null);
     const [isClaiming, setIsClaiming] = useState(false);
 
+//   Handlers -------------------
+
     useEffect(() => {
         if (!playerLocation || playerHeading === null || playerHeading === undefined) {
             setVisibleCache(null);
@@ -21,17 +25,14 @@ const usePlayerGame = (playerLocation, playerHeading, activeCaches) => {
             return;
         }
 
-    const isTargeted = isLookingAtCache(
-      playerHeading,
-      playerLocation,
-      nearbyCache.coordinates,
-    );
-
+        const isTargeted = isLookingAtCache(playerHeading, playerLocation, nearbyCache.coordinates);
         setVisibleCache(nearbyCache);
         setIsClaiming(isTargeted);
     }, [playerLocation, playerHeading, activeCaches]);
 
-  return { visibleCache, isClaiming, setIsClaiming };
+//   Return ---------------------
+
+    return {visibleCache, isClaiming, setIsClaiming};
 };
 
 export default usePlayerGame;