Modular

frontend/.env.example

@@ -1 +1,2 @@
 EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_your_key_here
+EXPO_PUBLIC_API_BASE_URL=https://localhost:5000/

frontend/app.config.ts

@@ -0,0 +1,16 @@
+import { ExpoConfig } from "@expo/config";
+import getLocalIPAddress from "./getLocalIPAddress";
+
+const LOCAL_IP = getLocalIPAddress();
+
+const config: ExpoConfig = {
+  name: "Snap Map",
+  slug: "snap-map",
+  version: "1.0.0",
+
+  extra: {
+    API_BASE_URL: `http://${LOCAL_IP}:5000`
+  }
+};
+
+export default config;

frontend/env.d.ts

@@ -4,5 +4,6 @@
 declare namespace NodeJS {
   interface ProcessEnv {
     EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY?: string;
+    EXPO_PUBLIC_API_BASE_URL?: string;
   }
 }

frontend/getLocalIPAddress.js

@@ -0,0 +1,17 @@
+import { networkInterfaces } from "os";
+
+function getLocalIPAddress() {
+  const interfaces = networkInterfaces();
+
+  for (const name in interfaces) {
+    for (const iface of interfaces[name] || []) {
+      if (iface.family === "IPv4" && !iface.internal) {
+        return iface.address;
+      }
+    }
+  }
+
+  return "localhost";
+}
+
+export default getLocalIPAddress;

frontend/package.json

@@ -28,6 +28,7 @@
     "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
     "react-native-keyboard-controller": "1.18.5",
+    "react-native-maps": "1.20.1",
     "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",

frontend/src/screens/BubbleDetailsScreen.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { View, Text, Button, StyleSheet } from "react-native";
 import type { ScreenProps } from "../types";
+import BubbleDetailsStyle from "../styles/BubbleDetailsStyle";
 
+const styles = BubbleDetailsStyle;
 const BubbleDetailsScreen = ({
   navigation,
 }: ScreenProps<"BubbleDetailsScreen">) => {
@@ -17,17 +19,3 @@ const BubbleDetailsScreen = ({
 };
 
 export default BubbleDetailsScreen;
-
-const styles = StyleSheet.create({
-  root: {
-    textAlign: "center",
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "#fff",
-    flex: 1,
-  },
-  text: {
-    fontSize: 18,
-    marginBottom: 10,
-  },
-});

frontend/src/screens/CameraScreen.tsx

@@ -11,7 +11,9 @@ import {
   View,
 } from "react-native";
 import type { ScreenProps } from "../types";
+import CameraStyle from "../styles/CameraStyle";
 
+const styles = CameraStyle;
 export default function CameraScreen({
   navigation,
 }: ScreenProps<"CameraScreen">) {
@@ -146,68 +148,3 @@ export default function CameraScreen({
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#000000ff",
-  },
-  permissionContainer: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 4,
-    backgroundColor: "#000000ff",
-  },
-  permissionText: {
-    color: "#fff",
-    fontSize: 16,
-    textAlign: "center",
-    marginBottom: 16,
-  },
-  camera: {
-    flex: 1,
-  },
-  controls: {
-    position: "absolute",
-    bottom: 40,
-    width: "100%",
-    alignItems: "center",
-    gap: 16,
-  },
-  controlsRow: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    width: "80%",
-  },
-  controlButton: {
-    backgroundColor: "rgba(0,0,0,0.5)",
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-    borderRadius: 20,
-  },
-  controlText: {
-    color: "#fff",
-    fontSize: 14,
-    fontWeight: "600",
-  },
-  shutterOuter: {
-    width: 72,
-    height: 72,
-    borderRadius: 36,
-    borderWidth: 4,
-    borderColor: "#0e0d0dff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  shutterInnerButton: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    backgroundColor: "#ffffffff",
-
-    fontSize: 24,
-    fontWeight: "bold",
-    color: "white",
-  },
-});

frontend/src/screens/ErrorScreen.tsx

@@ -2,7 +2,9 @@ import React from "react";
 import { View, Text, StyleSheet } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import type { ScreenProps } from "../types";
+import ErrorStyle from "../styles/ErrorStyle";
 
+const styles = ErrorStyle;
 const ErrorScreen = ({ navigation }: ScreenProps<"ErrorScreen">) => {
   return (
     <SafeAreaView style={styles.container}>
@@ -17,30 +19,3 @@ const ErrorScreen = ({ navigation }: ScreenProps<"ErrorScreen">) => {
 };
 
 export default ErrorScreen;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#FFF5F5",
-  },
-  content: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    paddingHorizontal: 20,
-  },
-  errorText: {
-    fontSize: 48,
-    fontWeight: "bold",
-    color: "#000",
-    marginBottom: 20,
-    textAlign: "center",
-  },
-  messageText: {
-    fontSize: 18,
-    fontWeight: "normal",
-    color: "#000",
-    textAlign: "center",
-    lineHeight: 24,
-  },
-});

frontend/src/screens/EventGalleryScreen.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 import { View, Text, Button, StyleSheet } from "react-native";
 import type { ScreenProps } from "../types";
+import EventGalleryStyle from "../styles/EventGalleryStyle";
+
+const styles = EventGalleryStyle;
 
 const EventGalleryScreen = ({
   navigation,
@@ -17,17 +20,3 @@ const EventGalleryScreen = ({
 };
 
 export default EventGalleryScreen;
-
-const styles = StyleSheet.create({
-  root: {
-    textAlign: "center",
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "#fff",
-    flex: 1,
-  },
-  text: {
-    fontSize: 18,
-    marginBottom: 10,
-  },
-});

frontend/src/screens/HomeScreen.tsx

@@ -4,6 +4,9 @@ import { Ionicons } from "@expo/vector-icons";
 import { SafeAreaView } from "react-native-safe-area-context";
 import type { ScreenProps } from "../types";
 import { useUser } from "@clerk/clerk-expo";
+import HomeStyle from "../styles/HomeStyle";
+
+const styles = HomeStyle;
 
 const HomeScreen = ({ navigation }: ScreenProps<"HomeScreen">) => {
   const { user } = useUser();
@@ -62,62 +65,3 @@ const HomeScreen = ({ navigation }: ScreenProps<"HomeScreen">) => {
 };
 
 export default HomeScreen;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#FFF5F5",
-  },
-  logoContainer: {
-    alignItems: "center",
-    paddingTop: 10,
-    paddingBottom: 10,
-  },
-  logo: {
-    width: 100,
-    height: 100,
-  },
-  mapContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    margin: 20,
-    overflow: "hidden",
-  },
-  mapImage: {
-    width: "125%",
-    height: "125%",
-  },
-  buttonContainer: {
-    padding: 20,
-    paddingBottom: 40,
-    gap: 16,
-  },
-  button: {
-    backgroundColor: "#FF4444",
-    borderRadius: 16,
-    paddingVertical: 18,
-    paddingHorizontal: 24,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 3,
-  },
-  buttonText: {
-    color: "#FFFFFF",
-    fontSize: 18,
-    fontWeight: "bold",
-    letterSpacing: 1,
-    textTransform: "uppercase",
-  },
-  cameraIcon: {
-    marginRight: 12,
-  },
-});