Feat/api deploy boilerplate

app.json

@@ -6,10 +6,10 @@
       }
     },
     "android": {
-      "package": "com.fss"
+      "package": "fss.bundle.co2"
     },
     "ios": {
-      "bundleIdentifier": "com.fss"
+      "bundleIdentifier": "fss.bundle.co2"
     }
   }
 }

apps/expo/app.config.ts

@@ -2,7 +2,7 @@ import type { ConfigContext, ExpoConfig } from "expo/config";
 
 export default ({ config }: ConfigContext): ExpoConfig => ({
   ...config,
-  name: "expo",
+  name: "Fresh Seasonal Sustainable",
   slug: "expo",
   scheme: "expo",
   version: "0.1.0",
@@ -19,11 +19,11 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   },
   assetBundlePatterns: ["**/*"],
   ios: {
-    bundleIdentifier: "your.bundle.identifier",
+    bundleIdentifier: "fss.bundle.co2",
     supportsTablet: true,
   },
   android: {
-    package: "your.bundle.identifier",
+    package: "fss.bundle.co2",
     adaptiveIcon: {
       foregroundImage: "./assets/fss.png",
       backgroundColor: "#ffffff",
@@ -43,8 +43,8 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     [
       "expo-camera",
       {
-        cameraPermission: `Allow ${process.env.CUSTOMER_FACCING_PRODUCT_NAME} to access your camera`,
-        microphonePermission: `Allow ${process.env.CUSTOMER_FACCING_PRODUCT_NAME} to access your microphone`,
+        cameraPermission: `Allow ${process.env.CUSTOMER_FACING_PRODUCT_NAME} to access your camera`,
+        microphonePermission: `Allow ${process.env.CUSTOMER_FACING_PRODUCT_NAME} to access your microphone`,
         recordAudioAndroid: true,
       },
     ],

apps/expo/eas.json

@@ -10,9 +10,15 @@
       }
     },
     "development": {
+      "extends": "base",
+      "developmentClient": true
+    },
+    "development-simulator": {
       "extends": "base",
       "developmentClient": true,
-      "distribution": "internal"
+      "ios": {
+        "simulator": true
+      }
     },
     "preview": {
       "extends": "base",

apps/expo/src/app/(tabs)/_layout.tsx

@@ -1,35 +1,45 @@
 import React from "react";
+import { Dimensions, StyleSheet } from "react-native";
 import { Tabs } from "expo-router";
-import { BarChart3, House, Info } from "lucide-react-native";
+import { House, Info } from "lucide-react-native";
 
 import Header from "~/components/Header";
 
 const primary = "#4caf50";
 const secondary = "#ffffff";
 const tertiary = "#008134";
 
+const { width, height } = Dimensions.get("window");
+
+const tabBarHeight = height > 700 ? 64 : 56;
+const tabBarFontSize = width > 350 ? 12 : 10;
+
 export default function TabLayout() {
   return (
     <Tabs
       screenOptions={() => ({
         tabBarActiveTintColor: tertiary,
         tabBarInactiveTintColor: secondary,
         tabBarStyle: {
-          height: 64,
+          position: "relative",
+          height: tabBarHeight,
           borderColor: secondary,
-          borderTopColor: secondary,
           backgroundColor: primary,
+          borderTopColor: secondary,
         },
         tabBarIconStyle: {
-          marginTop: 8,
+          position: "absolute",
+          top: 25,
           color: secondary,
         },
         tabBarLabelStyle: {
-          fontSize: 12,
+          position: "absolute",
+          top: 40,
+          fontSize: tabBarFontSize,
           color: secondary,
           fontWeight: "medium",
-          marginBottom: 8,
         },
+        tabBarAccessibilityLabel: "hello world",
         header: () => <Header />,
       })}
     >
@@ -51,15 +61,6 @@ export default function TabLayout() {
           ),
         }}
       />
-      <Tabs.Screen
-        name="summary"
-        options={{
-          title: "Summary",
-          tabBarIcon: ({ color, focused }) => (
-            <BarChart3 size={28} color={focused ? tertiary : color} />
-          ),
-        }}
-      />
     </Tabs>
   );
 }

apps/expo/src/components/Header.tsx

@@ -3,7 +3,7 @@ import { Image, Text, View } from "react-native";
 
 import FssLogoCircle from "../../assets/fssCircle.png";
 
-const Header = () => {
+export const Header = () => {
   return (
     <View className="h-16 w-full flex-row items-center justify-start bg-primary pl-2">
       <Image source={FssLogoCircle} className="h-12 w-12" />

apps/expo/src/components/HomePage.tsx

@@ -4,15 +4,16 @@ import { Button, Text, TouchableOpacity, View } from "react-native";
 import { CameraView, useCameraPermissions } from "expo-camera";
 
 import EcoScoreIcon from "~/components/icons/EcoScoreIcon";
+import Loading from "~/components/Loading";
 import { api } from "~/utils/api";
 
-export function HomePage() {
+export const HomePage = () => {
   const [facing, setFacing] = useState<CameraType>("back");
   const [permission, requestPermission] = useCameraPermissions();
   const [scannedData, setScannedData] = useState<string | null>(null);
   const [scanned, setScanned] = useState(false);
 
-  const { isError, data, error, refetch } =
+  const { isError, isLoading, data, error, isFetched, refetch } =
     api.getEstimate.getEstimate.useQuery(
       { barCodeUniqueId: scannedData ?? "" },
       {
@@ -31,9 +32,7 @@ export function HomePage() {
     setFacing((current) => (current === "back" ? "front" : "back"));
   }
 
-  const productName =
-    data?.WorldFoodFactsProductInfo?.product.product_name ??
-    "Sorry, we couldn't find that product";
+  const productName = data?.WorldFoodFactsProductInfo?.product.product_name;
   const productGrade =
     data?.WorldFoodFactsProductInfo?.product.ecoscore_data?.grade;
   const productTotalCO2: string | number =
@@ -51,8 +50,31 @@ export function HomePage() {
     );
   }
 
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  if (scanned && isFetched && !productName) {
+    return (
+      <View>
+        <Text>Sorry! We couldn't find that product.</Text>
+        <View className="ml-0 w-full flex-row justify-center">
+          <Button
+            title={"Tap to Scan Another Product"}
+            onPress={() => setScanned(false)}
+            color="green"
+          />
+        </View>
+      </View>
+    );
+  }
+
   if (!permission) {
-    return <View />;
+    return (
+      <View>
+        <Text>Sorry! We need camera permissions to scan products.</Text>
+      </View>
+    );
   }
 
   if (!permission.granted) {
@@ -68,13 +90,13 @@ export function HomePage() {
 
   return (
     <>
-      {data && scanned ? (
+      {isFetched && scanned ? (
         <View className="relative h-full flex-col justify-start">
           <Text className="mb-4 text-3xl font-bold">{productName}</Text>
           {productGrade ? (
             <EcoScoreIcon grade={productGrade} />
           ) : (
-            <Text>"Sorry we can't seem to find that item "</Text>
+            <Text>"Sorry! We can't find the grade for that product."</Text>
           )}
           <Text className="mb-4 mt-4">
             The EcoScore for this product is an {productGrade?.toUpperCase()}{" "}
@@ -89,7 +111,9 @@ export function HomePage() {
             That's equivalent to driving a car for 5 miles...
           </Text>
           <Text className="mb-4 text-3xl font-bold">Seasonality </Text>
-          <Text>Sorry, we can't tell if this product is in season for you</Text>
+          <Text>
+            Sorry, we can't tell if this product is in season for you.
+          </Text>
           <View className="absolute bottom-0 ml-0 w-full flex-row justify-center">
             <Button
               title={"Tap to Scan Another Product"}
@@ -135,6 +159,6 @@ export function HomePage() {
       )}
     </>
   );
-}
+};
 
 export default HomePage;

apps/expo/src/components/Loading.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Text, View } from "react-native";
+import { Loader2 } from "lucide-react-native";
+
+export const Loading = () => {
+  return (
+    <View className="align-center m-auto flex justify-center">
+      <Text>Loading...</Text>
+      <Loader2 />
+    </View>
+  );
+};
+
+export default Loading;

apps/expo/src/utils/api.tsx

@@ -30,10 +30,7 @@ const getBaseUrl = () => {
   const localhost = debuggerHost?.split(":")[0];
 
   if (!localhost) {
-    // return "https://turbo.t3.gg";
-    throw new Error(
-      "Failed to get localhost. Please point to your production server.",
-    );
+    return "https://fssmono.onrender.com";
   }
   return `http://${localhost}:3000`;
 };

apps/nextjs/src/app/api/trpc/[trpc]/getEstimate/index.ts

@@ -0,0 +1,28 @@
+import { initTRPC } from "@trpc/server";
+import { z } from "zod";
+
+const t = initTRPC.create();
+
+export const appRouter = t.router({
+  getEstimate: t.procedure
+    .input(
+      z.object({
+        barCodeUniqueId: z.string(),
+      }),
+    )
+    .query(async ({ input }) => {
+      // Fetch data from the first API
+      const productRes = await fetch(
+        `${process.env.WORLD_OPEN_FOOD_FACTS_BASE_URL}/api/v0/product/${input.barCodeUniqueId}.json`,
+      ).then((res) => res.json());
+
+      // Fetch data from the second API
+      const data2 = await fetch(
+        `https://api2.example.com/data?param=${productRes.productName}`,
+      ).then((res) => res.json());
+
+      return { productRes, data2 };
+    }),
+});
+
+export type AppRouter = typeof appRouter;

eas.json

@@ -7,10 +7,20 @@
       "developmentClient": true,
       "distribution": "internal"
     },
+    "development-simulator": {
+      "developmentClient": true,
+      "ios": {
+        "simulator": true
+      }
+    },
     "preview": {
       "distribution": "internal"
     },
-    "production": {}
+    "production": {
+      "env": {
+        "CUSTOMER_FACING_PRODUCT_NAME": "Fresh Seasonal Sustainable"
+      }
+    }
   },
   "submit": {
     "production": {}

package.json

@@ -7,6 +7,7 @@
   "packageManager": "pnpm@9.1.0",
   "scripts": {
     "build": "turbo build",
+    "build:backend": "turbo run build --ignore apps/expo",
     "clean": "git clean -xdf node_modules",
     "clean:workspaces": "turbo clean",
     "db:push": "pnpm -F db push",

packages/db/package.json

@@ -30,8 +30,8 @@
     "with-env": "dotenv -e ../../.env --"
   },
   "dependencies": {
-    "@vercel/postgres": "^0.8.0",
     "@t3-oss/env-core": "^0.10.1",
+    "@vercel/postgres": "^0.8.0",
     "drizzle-orm": "^0.30.10",
     "drizzle-zod": "^0.5.1",
     "zod": "^3.23.8"