chore: frontend setup

.github/pull_request_template.md

@@ -0,0 +1,20 @@
+## Description
+
+Include a basic outline here of what this pull request is doing.
+
+References and fixes [link to GitHub issue](https://github-issue-link-url.com).
+
+### Imposed Changes
+- Item #1
+- Item #2
+
+### Testing Procedures
+- Testing procedure #1
+- Testing procedure #2
+
+### Checklist
+- [x] I have read the CONTRIBUTING.md.
+- [x] I have self-reviewed my code and written tests.
+- [x] I have made corresponding changes to the documentation.
+- [x] All unit tests are passing locally.
+- [x] **I have merged the most recent commit from `main` into my branch.**

.github/workflows/frontend.yml

@@ -0,0 +1,50 @@
+name: frontend
+
+on:
+  push:
+    branches:
+      - "**"
+
+jobs:
+  format:
+    name: Format Code
+    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: bun install
+        working-directory: frontend
+      - name: Format
+        run: bun run format
+        working-directory: frontend
+  lint:
+    name: "Lint Code"
+    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: bun install
+        working-directory: frontend
+      - name: Lint
+        run: bun run lint
+        working-directory: frontend
+  test:
+    name: Test Code
+    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: bun install
+        working-directory: frontend
+      - name: Test
+        run: bun run test
+        working-directory: frontend

.gitignore

@@ -0,0 +1,5 @@
+# jetbrains files
+.idea/
+
+# visual studio code files
+.vscode/

docs/CONTRIBUTING.md

@@ -0,0 +1,19 @@
+### Contributing
+
+**Before making a commit, make sure the lint, test, and format checks pass.**
+
+1. Create a pull request and fill out the provided template. Ensure all fields are filled and that **the title is detailed**.
+2. In order for a PR to be merged, it requires at least one approval from a technical lead, as well as a fully passing CI/CD pipeline. This is to ensure the commit tree in our main branch is clean and well-tested. To help with this, all pull requests will be squashed and merged.
+3. In the case your PR is not initially approved, a technical lead will leave suggestions to improve. Once you have incorporated said improvements, feel free to re-request a review or message one of your TLs on Slack for another review.
+
+### Best Practices
+
+- We use [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for our commit messages. This methodology ensures uniformity, clarity, and ease of understanding for all contributors.
+- Make sure to write tests for the most complex parts of your code.
+- For manual API testing, include screenshots from Postman.
+- Go uses **TitleCase** and React Native uses **camelCase** for naming conventions.
+
+### If you have time...
+
+- *Want to go that extra level?* — Consider checking out [act](https://github.com/nektos/act).
+- If you're *real interested* in industry-level commit practices, consider [GPG/PGP signing](https://docs.github.com/en/authentication/managing-commit-signature-verification/signing-commits) your commits.

docs/FRONTEND-SETUP.md

@@ -0,0 +1,6 @@
+### Frontend Setup
+
+**Please setup the backend before proceeding.**
+
+1. Create a new `.env` file in the root of the frontend directory with the contents of `.env.example`.
+2. TODO: nix setup & configuration.

frontend/.env.example

@@ -0,0 +1 @@
+EXPO_PUBLIC_BASE_URL=

frontend/.eslintrc.js

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

frontend/.gitignore

@@ -0,0 +1,39 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# jetbrains files
+../.idea/

frontend/.prettierrc

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

frontend/README.md

@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+    ```bash
+    npm install
+    ```
+
+2. Start the app
+
+    ```bash
+     npx expo start
+    ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

frontend/__tests__/AboutScreen.test.tsx

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

frontend/app.json

@@ -0,0 +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"
+                }
+            ]
+        ],
+        "experiments": {
+            "typedRoutes": true
+        }
+    }
+}

frontend/app/(tabs)/_layout.tsx

@@ -0,0 +1,47 @@
+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";
+
+export default function TabLayout() {
+    const colorScheme = useColorScheme();
+
+    return (
+        <Tabs
+            screenOptions={{
+                tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
+                headerShown: true,
+                headerTitleStyle: {
+                    fontFamily: "Outfit",
+                },
+                tabBarButton: HapticTab,
+                tabBarBackground: TabBarBackground,
+                tabBarStyle: Platform.select({
+                    ios: {
+                        position: "absolute",
+                    },
+                    default: {},
+                }),
+            }}>
+            <Tabs.Screen
+                name="index"
+                options={{
+                    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} />,
+                }}
+            />
+        </Tabs>
+    );
+}

frontend/app/(tabs)/explore.tsx

@@ -0,0 +1,35 @@
+import { StyleSheet } from "react-native";
+
+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" }}
+            headerImage={
+                <IconSymbol
+                    size={310}
+                    color="#808080"
+                    name="chevron.left.forwardslash.chevron.right"
+                    style={styles.headerImage}
+                />
+            }>
+            <ThemedText style={{ fontFamily: "Outfit" }}>This is the content of the explore page.</ThemedText>
+        </ParallaxScrollView>
+    );
+}
+
+const styles = StyleSheet.create({
+    headerImage: {
+        color: "#808080",
+        bottom: -90,
+        left: -35,
+        position: "absolute",
+    },
+    titleContainer: {
+        flexDirection: "row",
+        gap: 8,
+    },
+});