chore: frontend setup

.github/workflows/frontend.yml

@@ -0,0 +1,51 @@
+name: frontend
+
+permissions:
+  contents:
+    read: all
+    write: all
+
+on:
+  push:
+    branches:
+      - "**"
+    paths:
+      - "frontend/**"
+
+jobs:
+  format:
+    name: format
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+      - name: Install Dependencies
+        run: cd frontend && bun install
+      - name: Format Code
+        run: cd frontend && bun run format
+  lint:
+    name: lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+      - name: Install Dependencies
+        run: cd frontend && bun install
+      - name: Lint Code
+        run: cd frontend && bun run lint
+  test:
+    name: test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+      - name: Install Dependencies
+        run: cd frontend && bun install
+      - name: Test Code
+        run: cd frontend && bun run test

frontend/.eslintrc.js

@@ -1,5 +1,8 @@
 // https://docs.expo.dev/guides/using-eslint/
 module.exports = {
-  extends: 'expo',
-  ignorePatterns: ['/dist/*'],
+    extends: ["expo", "prettier"],
+    ignorePatterns: ["/dist/*"],
+    rules: {
+        "prettier/prettier": "error",
+    },
 };

frontend/.prettierrc

@@ -0,0 +1,7 @@
+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "singleQuote": false,
+    "bracketSameLine": true,
+    "trailingComma": "es5"
+}

frontend/README.md

@@ -6,15 +6,15 @@ This is an [Expo](https://expo.dev) project created with [`create-expo-app`](htt
 
 1. Install dependencies
 
-   ```bash
-   npm install
-   ```
+    ```bash
+    npm install
+    ```
 
 2. Start the app
 
-   ```bash
-    npx expo start
-   ```
+    ```bash
+     npx expo start
+    ```
 
 In the output, you'll find options to open the app in a
 

frontend/__tests__/AboutScreen.test.tsx

@@ -1,10 +1,10 @@
-import { render } from '@testing-library/react-native';
+import { render } from "@testing-library/react-native";
 
 import AboutScreen from "@/app/about";
 
 describe("home screen", () => {
-    test('text renders correctly', () => {
+    test("text renders correctly", () => {
         const { getByText } = render(<AboutScreen />);
-        getByText("Lorem ipsum dolor sit amet.");
+        getByText("This text serves as the body content of the example stack.");
     });
 });

frontend/app.json

@@ -1,45 +1,42 @@
 {
-  "expo": {
-    "name": "PlateMate",
-    "slug": "platemate",
-    "version": "0.0.1",
-    "orientation": "portrait",
-    "icon": "./assets/images/icon.png",
-    "scheme": "myapp",
-    "userInterfaceStyle": "automatic",
-    "newArchEnabled": true,
-    "platforms": [
-      "ios",
-      "android"
-    ],
-    "ios": {
-      "supportsTablet": true
-    },
-    "android": {
-      "adaptiveIcon": {
-        "foregroundImage": "./assets/images/icon.png",
-        "backgroundColor": "#ffffff"
-      }
-    },
-    "web": {
-      "bundler": "metro",
-      "output": "static",
-      "favicon": "./assets/images/favicon.png"
-    },
-    "plugins": [
-      "expo-router",
-      [
-        "expo-splash-screen",
-        {
-          "image": "./assets/images/splash-icon.png",
-          "imageWidth": 200,
-          "resizeMode": "contain",
-          "backgroundColor": "#ffffff"
+    "expo": {
+        "name": "PlateMate",
+        "slug": "platemate",
+        "version": "0.0.1",
+        "orientation": "portrait",
+        "icon": "./assets/images/icon.png",
+        "scheme": "myapp",
+        "userInterfaceStyle": "automatic",
+        "newArchEnabled": true,
+        "platforms": ["ios", "android"],
+        "ios": {
+            "supportsTablet": true
+        },
+        "android": {
+            "adaptiveIcon": {
+                "foregroundImage": "./assets/images/icon.png",
+                "backgroundColor": "#ffffff"
+            }
+        },
+        "web": {
+            "bundler": "metro",
+            "output": "static",
+            "favicon": "./assets/images/favicon.png"
+        },
+        "plugins": [
+            "expo-router",
+            [
+                "expo-splash-screen",
+                {
+                    "image": "./assets/images/splash-icon.png",
+                    "imageWidth": 200,
+                    "resizeMode": "contain",
+                    "backgroundColor": "#ffffff"
+                }
+            ]
+        ],
+        "experiments": {
+            "typedRoutes": true
         }
-      ]
-    ],
-    "experiments": {
-      "typedRoutes": true
     }
-  }
 }

frontend/app/(tabs)/_layout.tsx

@@ -1,45 +1,45 @@
-import {Tabs} from 'expo-router';
-import React from 'react';
-import {Platform} from 'react-native';
+import { Tabs } from "expo-router";
+import React from "react";
+import { Platform } from "react-native";
 
-import {HapticTab} from '@/components/HapticTab';
-import {IconSymbol} from '@/components/ui/IconSymbol';
-import TabBarBackground from '@/components/ui/TabBarBackground';
-import {Colors} from '@/constants/Colors';
-import {useColorScheme} from "react-native";
+import { HapticTab } from "@/components/HapticTab";
+import { IconSymbol } from "@/components/ui/IconSymbol";
+import TabBarBackground from "@/components/ui/TabBarBackground";
+import { Colors } from "@/constants/Colors";
+import { useColorScheme } from "react-native";
 
 export default function TabLayout() {
     const colorScheme = useColorScheme();
 
     return (
         <Tabs
             screenOptions={{
-                tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+                tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
                 headerShown: true,
                 headerTitleStyle: {
-                    fontFamily: "Outfit"
+                    fontFamily: "Outfit",
                 },
                 tabBarButton: HapticTab,
                 tabBarBackground: TabBarBackground,
                 tabBarStyle: Platform.select({
                     ios: {
-                        position: 'absolute',
+                        position: "absolute",
                     },
                     default: {},
                 }),
             }}>
             <Tabs.Screen
                 name="index"
                 options={{
-                    title: 'Home',
-                    tabBarIcon: ({color}) => <IconSymbol size={28} name="house.lodge" color={color}/>,
+                    title: "Home",
+                    tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.lodge" color={color} />,
                 }}
             />
             <Tabs.Screen
                 name="explore"
                 options={{
-                    title: 'Explore',
-                    tabBarIcon: ({color}) => <IconSymbol size={28} name="chevron.compact.down" color={color}/>,
+                    title: "Explore",
+                    tabBarIcon: ({ color }) => <IconSymbol size={28} name="chevron.compact.down" color={color} />,
                 }}
             />
         </Tabs>

frontend/app/(tabs)/explore.tsx

@@ -1,13 +1,13 @@
-import {StyleSheet} from 'react-native';
+import { StyleSheet } from "react-native";
 
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import {ThemedText} from '@/components/ThemedText';
-import {IconSymbol} from '@/components/ui/IconSymbol';
+import ParallaxScrollView from "@/components/ParallaxScrollView";
+import { ThemedText } from "@/components/ThemedText";
+import { IconSymbol } from "@/components/ui/IconSymbol";
 
 export default function TabTwoScreen() {
     return (
         <ParallaxScrollView
-            headerBackgroundColor={{light: '#D0D0D0', dark: '#353636'}}
+            headerBackgroundColor={{ light: "#D0D0D0", dark: "#353636" }}
             headerImage={
                 <IconSymbol
                     size={310}
@@ -16,20 +16,20 @@ export default function TabTwoScreen() {
                     style={styles.headerImage}
                 />
             }>
-            <ThemedText style={{fontFamily: "Outfit"}}>This is the content of the explore page.</ThemedText>
+            <ThemedText style={{ fontFamily: "Outfit" }}>This is the content of the explore page.</ThemedText>
         </ParallaxScrollView>
     );
 }
 
 const styles = StyleSheet.create({
     headerImage: {
-        color: '#808080',
+        color: "#808080",
         bottom: -90,
         left: -35,
-        position: 'absolute',
+        position: "absolute",
     },
     titleContainer: {
-        flexDirection: 'row',
+        flexDirection: "row",
         gap: 8,
     },
 });

frontend/app/(tabs)/index.tsx

@@ -1,34 +1,29 @@
-import {Image, StyleSheet} from 'react-native';
+import { Image, StyleSheet } from "react-native";
 
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import {ThemedText} from '@/components/ThemedText';
-import {ThemedView} from '@/components/ThemedView';
-import {Link} from "expo-router";
+import ParallaxScrollView from "@/components/ParallaxScrollView";
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
+import { Link } from "expo-router";
 
 export default function HomeScreen() {
     return (
         <ParallaxScrollView
-            headerBackgroundColor={{light: '#A1CEDC', dark: '#1D3D47'}}
-            headerImage={
-                <Image
-                    source={require('@/assets/images/partial-react-logo.png')}
-                    style={styles.reactLogo}
-                />
-            }>
+            headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
+            headerImage={<Image source={require("@/assets/images/partial-react-logo.png")} style={styles.reactLogo} />}>
             <ThemedView style={styles.titleContainer}>
-                <ThemedText type={"title"} style={{fontFamily: "Outfit"}}>
+                <ThemedText type={"title"} style={{ fontFamily: "Outfit" }}>
                     PlatMate - React Native Boilerplate
                 </ThemedText>
             </ThemedView>
             <ThemedView>
-                <ThemedText type={"default"} style={{fontFamily: "Outfit"}}>
-                    This page serves as the landing page of the app. This code is boilerplate code made
-                    to give you a brief overview of best practices for React Native development.
+                <ThemedText type={"default"} style={{ fontFamily: "Outfit" }}>
+                    This page serves as the landing page of the app. This code is boilerplate code made to give you a
+                    brief overview of best practices for React Native development.
                 </ThemedText>
             </ThemedView>
             <ThemedView>
                 <Link href={"/about"}>
-                    <ThemedText type={"default"} lightColor={"#20c1e6"} style={{fontFamily: "Outfit"}}>
+                    <ThemedText type={"default"} lightColor={"#20c1e6"} style={{ fontFamily: "Outfit" }}>
                         Click here to view an example stack.
                     </ThemedText>
                 </Link>
@@ -39,15 +34,15 @@ export default function HomeScreen() {
 
 const styles = StyleSheet.create({
     titleContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
+        flexDirection: "row",
+        alignItems: "center",
         gap: 8,
     },
     reactLogo: {
         height: 178,
         width: 290,
         bottom: 0,
         left: 0,
-        position: 'absolute',
+        position: "absolute",
     },
 });

frontend/app/+not-found.tsx

@@ -1,14 +1,14 @@
-import {Link, Stack} from 'expo-router';
-import {StyleSheet} from 'react-native';
+import { Link, Stack } from "expo-router";
+import { StyleSheet } from "react-native";
 
-import {ThemedText} from '@/components/ThemedText';
-import {ThemedView} from '@/components/ThemedView';
-import React from 'react';
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
+import React from "react";
 
 export default function NotFoundScreen() {
     return (
         <>
-            <Stack.Screen options={{title: 'Oops!'}}/>
+            <Stack.Screen options={{ title: "Oops!" }} />
             <ThemedView style={styles.container}>
                 <ThemedText type="title">This screen doesn't exist.</ThemedText>
                 <Link href="/" style={styles.link}>
@@ -22,8 +22,8 @@ export default function NotFoundScreen() {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
+        alignItems: "center",
+        justifyContent: "center",
         padding: 20,
     },
     link: {