Add Amplify Backend

.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  extends: ['universe/native', 'universe/shared/typescript-analysis'],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx', '*.d.ts'],
+      parserOptions: {
+        project: './tsconfig.json',
+      },
+    },
+  ],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'warn',
+  },
+};

.gitignore

@@ -17,4 +17,7 @@ web-build/
 # The following patterns were generated by expo-cli
 
 expo-env.d.ts
-# @end expo-cli
+# @end expo-cli
+
+# Enviromental variables
+.env*

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+    "recommendations": [
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "msjsdiag.vscode-react-native"
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.rulers": [
+    80,
+    120
+  ],
+}

README.md

@@ -25,14 +25,6 @@ In the output, you'll find options to open the app in a
 
 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
@@ -42,9 +34,40 @@ To learn more about developing your project with Expo, look at the following res
 - [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
+## Recommended Folder Structure
 
-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.
+```
+calbuddyorg/app/
+├── android/
+├── ios/
+├── app/
+├── src/
+│   ├── assets/
+│   │   ├── images/
+│   │   └── fonts/
+│   ├── components/
+│   │   └── common/
+│   │       ├── Button.tsx
+│   │       └── Input.tsx
+│   ├── constants/
+│   │   └── Colors.tsx
+│   ├── contexts/
+│   │   └── AuthContext.tsx
+│   ├── hooks/
+│   │   └── useAuth.ts
+│   ├── services/
+│   │   └── auth.ts
+│   │   └── api.ts
+│   ├── types/
+│   │   └── index.d.ts
+│   ├── utils/
+│   │   └── helpers.ts
+├── .env*
+├── .env-example
+├── .eslintrc.js
+├── app.json
+├── babel.config.js
+├── package.json
+├── README.md
+└── tsconfig.json
+```

app.json

@@ -4,30 +4,38 @@
     "slug": "calbuddy",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/images/icon.png",
+    "icon": "./src/assets/images/icon.png",
     "scheme": "myapp",
     "userInterfaceStyle": "automatic",
     "splash": {
-      "image": "./assets/images/splash.png",
+      "image": "./src/assets/images/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "com.calbuddy.app"
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "foregroundImage": "./src/assets/images/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      }
+      },
+      "package": "com.calbuddy.app"
     },
     "web": {
       "bundler": "metro",
       "output": "static",
-      "favicon": "./assets/images/favicon.png"
+      "favicon": "./src/assets/images/favicon.png"
     },
     "plugins": [
-      "expo-router"
+      "expo-router",
+      [
+        "expo-secure-store",
+        {
+          "faceIDPermission": "Allow CalBuddy to access your Face ID biometric data."
+        }
+      ]
     ],
     "experiments": {
       "typedRoutes": true

app/(app)/_layout.tsx

@@ -0,0 +1,95 @@
+import { Redirect, Stack } from 'expo-router';
+import { Text } from 'react-native';
+
+import { useSession } from '@/contexts/AuthContext';
+
+export default function AppLayout() {
+  const { session, isLoading } = useSession();
+  if (isLoading) {
+    return <Text>Loading...</Text>;
+  }
+
+  if (!session) {
+    return <Redirect href="/sign-in" />;
+  }
+
+  return <Stack />;
+}
+
+// import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
+// import { getCurrentUser } from 'aws-amplify/auth';
+// import { useFonts } from 'expo-font';
+// import { Stack } from 'expo-router';
+// import * as SplashScreen from 'expo-splash-screen';
+// import { useEffect, useState } from 'react';
+// import 'react-native-reanimated';
+// import { View, ActivityIndicator } from 'react-native';
+
+// import { AuthProvider } from '@/contexts/AuthContext'; // Wrap the entire app with this provider
+// import { useColorScheme } from '@/hooks/useColorScheme';
+
+// // Initialize Amplify
+// import '@/services/aws-config';
+
+// // Prevent the splash screen from auto-hiding before asset loading is complete.
+// SplashScreen.preventAutoHideAsync();
+
+// export default function RootLayout() {
+//   const colorScheme = useColorScheme();
+//   const [loaded] = useFonts({
+//     SpaceMono: require('@/assets/fonts/SpaceMono-Regular.ttf'),
+//   });
+//   const [user, setUser] = useState(null);
+//   const [isLoading, setIsLoading] = useState(true);
+
+//   useEffect(() => {
+//     const checkAuthStatus = async () => {
+//       try {
+//         const currentUser = await getCurrentUser();
+//         console.log('response user:', currentUser);
+//         setUser(currentUser);
+//       } catch (error) {
+//         console.log('User not authenticated', error);
+//         setUser(null);
+//       } finally {
+//         setIsLoading(false); // Stop loading once authentication check is done
+//       }
+//     };
+
+//     checkAuthStatus();
+//   }, []);
+
+//   useEffect(() => {
+//     if (loaded && !isLoading) {
+//       SplashScreen.hideAsync();
+//     }
+//   }, [loaded, isLoading]);
+
+//   if (isLoading || !loaded) {
+//     return (
+//       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+//         <ActivityIndicator size="large" color="#0000ff" />
+//       </View>
+//     );
+//   }
+
+//   return (
+//     <AuthProvider>
+//       <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+//         <Stack>
+//           {user ? (
+//             <>
+//               <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+//               <Stack.Screen name="+not-found" />
+//             </>
+//           ) : (
+//             <>
+//               <Stack.Screen name="auth/SignIn" options={{ headerShown: false }} />
+//               <Stack.Screen name="auth/SignUp" options={{ headerShown: false }} />
+//             </>
+//           )}
+//         </Stack>
+//       </ThemeProvider>
+//     </AuthProvider>
+//   );
+// }

app/(app)/index.tsx

@@ -0,0 +1,49 @@
+import { Text, View } from 'react-native';
+
+import { useSession } from '@/contexts/AuthContext';
+
+export default function Index() {
+  const { signOut } = useSession();
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text
+        onPress={() => {
+          // The `app/(app)/_layout.tsx` will redirect to the sign-in screen.
+          signOut();
+        }}
+      >
+        Sign Out
+      </Text>
+    </View>
+  );
+}
+
+// import { Link } from 'expo-router';
+// import React from 'react';
+// import { View, Text, Button, StyleSheet } from 'react-native';
+
+// import { useAuth } from '@/contexts/AuthContext';
+
+// export default function HomeScreen() {
+//   const { user, signOut, signIn } = useAuth();
+
+//   return (
+//     <View style={styles.container}>
+//       <Text style={styles.welcome}>Welcome, {user?.signInDetails?.loginId}!</Text>
+//       <Button title="Sign Out" onPress={signOut} />
+//     </View>
+//   );
+// }
+
+// const styles = StyleSheet.create({
+//   container: {
+//     flex: 1,
+//     justifyContent: 'center',
+//     alignItems: 'center',
+//     padding: 16,
+//   },
+//   welcome: {
+//     fontSize: 24,
+//     marginBottom: 20,
+//   },
+// });

app/(tabs)/_layout.tsx

@@ -13,7 +13,8 @@ export default function TabLayout() {
       screenOptions={{
         tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
         headerShown: false,
-      }}>
+      }}
+    >
       <Tabs.Screen
         name="index"
         options={{

app/(tabs)/explore.tsx

@@ -11,7 +11,8 @@ export default function TabTwoScreen() {
   return (
     <ParallaxScrollView
       headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
-      headerImage={<Ionicons size={310} name="code-slash" style={styles.headerImage} />}>
+      headerImage={<Ionicons size={310} name="code-slash" style={styles.headerImage} />}
+    >
       <ThemedView style={styles.titleContainer}>
         <ThemedText type="title">Explore</ThemedText>
       </ThemedView>
@@ -72,8 +73,8 @@ export default function TabTwoScreen() {
         <ThemedText>
           This template includes an example of an animated component. The{' '}
           <ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
-          the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText> library
-          to create a waving hand animation.
+          the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText>{' '}
+          library to create a waving hand animation.
         </ThemedText>
         {Platform.select({
           ios: (