Implement tennis courts review challenge

code-challenge/.env

@@ -0,0 +1 @@
+EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_cG9saXRlLWdvc2hhd2stMTkuY2xlcmsuYWNjb3VudHMuZGV2JA

code-challenge/.expo/README.md

@@ -0,0 +1,13 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

code-challenge/.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

code-challenge/.expo/types/router.d.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+import * as Router from 'expo-router';
+
+export * from 'expo-router';
+
+declare module 'expo-router' {
+  export namespace ExpoRouter {
+    export interface __routes<T extends string | object = string> {
+      hrefInputParams: { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/sign-in` | `/sign-in`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/sign-up` | `/sign-up`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/welcome` | `/welcome`; params?: Router.UnknownInputParams; } | { pathname: `${'/(home)'}/community` | `/community`; params?: Router.UnknownInputParams; } | { pathname: `${'/(home)'}/court` | `/court`; params?: Router.UnknownInputParams; } | { pathname: `${'/(home)'}` | `/`; params?: Router.UnknownInputParams; } | { pathname: `${'/(home)'}/profile` | `/profile`; params?: Router.UnknownInputParams; } | { pathname: `/court/[id]`, params: Router.UnknownInputParams & { id: string | number; } };
+      hrefOutputParams: { pathname: Router.RelativePathString, params?: Router.UnknownOutputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownOutputParams } | { pathname: `/_sitemap`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(auth)'}/sign-in` | `/sign-in`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(auth)'}/sign-up` | `/sign-up`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(auth)'}/welcome` | `/welcome`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(home)'}/community` | `/community`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(home)'}/court` | `/court`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(home)'}` | `/`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(home)'}/profile` | `/profile`; params?: Router.UnknownOutputParams; } | { pathname: `/court/[id]`, params: Router.UnknownOutputParams & { id: string; } };
+      href: Router.RelativePathString | Router.ExternalPathString | `/_sitemap${`?${string}` | `#${string}` | ''}` | `${'/(auth)'}/sign-in${`?${string}` | `#${string}` | ''}` | `/sign-in${`?${string}` | `#${string}` | ''}` | `${'/(auth)'}/sign-up${`?${string}` | `#${string}` | ''}` | `/sign-up${`?${string}` | `#${string}` | ''}` | `${'/(auth)'}/welcome${`?${string}` | `#${string}` | ''}` | `/welcome${`?${string}` | `#${string}` | ''}` | `${'/(home)'}/community${`?${string}` | `#${string}` | ''}` | `/community${`?${string}` | `#${string}` | ''}` | `${'/(home)'}/court${`?${string}` | `#${string}` | ''}` | `/court${`?${string}` | `#${string}` | ''}` | `${'/(home)'}${`?${string}` | `#${string}` | ''}` | `/${`?${string}` | `#${string}` | ''}` | `${'/(home)'}/profile${`?${string}` | `#${string}` | ''}` | `/profile${`?${string}` | `#${string}` | ''}` | { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/sign-in` | `/sign-in`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/sign-up` | `/sign-up`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/welcome` | `/welcome`; params?: Router.UnknownInputParams; } | { pathname: `${'/(home)'}/community` | `/community`; params?: Router.UnknownInputParams; } | { pathname: `${'/(home)'}/court` | `/court`; params?: Router.UnknownInputParams; } | { pathname: `${'/(home)'}` | `/`; params?: Router.UnknownInputParams; } | { pathname: `${'/(home)'}/profile` | `/profile`; params?: Router.UnknownInputParams; } | `/court/${Router.SingleRoutePart<T>}${`?${string}` | `#${string}` | ''}` | { pathname: `/court/[id]`, params: Router.UnknownInputParams & { id: string | number; } };
+    }
+  }
+}

code-challenge/.gitignore

@@ -21,3 +21,9 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

code-challenge/README.md

@@ -1,18 +1,50 @@
-# Match Rating Challenge!
+# Welcome to your Expo app 👋
 
-This is a local match rating engine.  But, oh no! There's something wrong and it is your job to fix it.
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
 
-## Instructions
+## Get started
 
-1. Clone this repo locally
-2. Create your own branch for your solution.
-3. Run the app and see if you can find the problem.
-4. Fix the problem and push your changes to your branch.
-5. Create a PR to merge your branch into master.
-    a. Add a commit message explaining what you did.
+1. Install dependencies
 
-## Notes
+   ```bash
+   npm install
+   ```
 
-- Do not modify the apis -- they are mock endpoints! 
-- You can modify the UI/UX all you want.
-- You are allowed to use coding assitants, but, include all your prompts in the your commit message(s).
+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.

code-challenge/app.json

@@ -0,0 +1,48 @@
+{
+  "expo": {
+    "name": "tennis",
+    "slug": "tennis",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "tennis",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#E6F4FE",
+        "foregroundImage": "./assets/images/android-icon-foreground.png",
+        "backgroundImage": "./assets/images/android-icon-background.png",
+        "monochromeImage": "./assets/images/android-icon-monochrome.png"
+      },
+      "edgeToEdgeEnabled": true,
+      "predictiveBackGestureEnabled": false
+    },
+    "web": {
+      "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",
+          "dark": {
+            "backgroundColor": "#000000"
+          }
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true,
+      "reactCompiler": true
+    }
+  }
+}

code-challenge/app/(auth)/_layout.tsx

@@ -0,0 +1,11 @@
+import { Stack } from "expo-router";
+
+export default function AuthRoutesLayout() {
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="welcome" />
+      <Stack.Screen name="sign-in" />
+      <Stack.Screen name="sign-up" />
+    </Stack>
+  );
+}

code-challenge/app/(auth)/sign-in.tsx

@@ -0,0 +1,156 @@
+import { useSignIn } from "@clerk/clerk-expo";
+import { Link, useRouter } from "expo-router";
+import React from "react";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+import { AuthErrorMessage } from "@/components/auth/AuthErrorMessage";
+import { AuthFooterLink } from "@/components/auth/AuthFooterLink";
+import { AuthHeader } from "@/components/auth/AuthHeader";
+import AuthInput from "@/components/auth/AuthInput";
+import { AuthScreenWrapper } from "@/components/auth/AuthScreenWrapper";
+import { PrimaryButton } from "@/components/auth/PrimaryButton";
+import { SocialSignInRow } from "@/components/auth/SocialSignInRow";
+
+const PRIMARY_BLUE = "#2563EB";
+const FORGOT_PASSWORD_LINK = "/(auth)/forgot-password";
+
+export default function SignInScreen() {
+  const { signIn, setActive, isLoaded } = useSignIn();
+  const router = useRouter();
+
+  const [emailAddress, setEmailAddress] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const onSignInPress = async () => {
+    if (!isLoaded || isSubmitting) return;
+    if (!emailAddress.trim() || !password.trim()) {
+      setError("Please enter both email and password.");
+      return;
+    }
+    setError(null);
+    setIsSubmitting(true);
+
+    try {
+      const signInAttempt = await signIn.create({
+        identifier: emailAddress,
+        password,
+      });
+
+      if (signInAttempt.status === "complete") {
+        await setActive({ session: signInAttempt.createdSessionId });
+        router.replace("/");
+      } else {
+        console.error(JSON.stringify(signInAttempt, null, 2));
+        setError("Sign in is not complete. Please try again.");
+      }
+    } catch (err: any) {
+      const clerkError =
+        err?.errors?.[0]?.longMessage ||
+        err?.errors?.[0]?.message ||
+        "Invalid credentials. Please try again.";
+      setError(clerkError);
+      console.error(JSON.stringify(err, null, 2));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const isButtonDisabled =
+    !isLoaded || isSubmitting || !emailAddress.trim() || !password.trim();
+
+  return (
+    <AuthScreenWrapper contentStyle={styles.scrollContent}>
+      <View style={styles.content}>
+        <AuthHeader
+          appBrand="CourtReserve"
+          title="Welcome Back"
+          subtitle="Sign in to book your next court time."
+        />
+
+        <View style={styles.fieldGroup}>
+          <AuthInput
+            iconName="mail"
+            placeholder="Email or Phone Number"
+            value={emailAddress}
+            onChangeText={setEmailAddress}
+            keyboardType="email-address"
+            returnKeyType="next"
+          />
+        </View>
+
+        <View style={styles.fieldGroup}>
+          <View style={styles.passwordContainer}>
+            <AuthInput
+              iconName="lock"
+              placeholder="Password"
+              value={password}
+              onChangeText={setPassword}
+              returnKeyType="done"
+              isPassword
+            />
+
+            <Link href={FORGOT_PASSWORD_LINK} asChild>
+              <TouchableOpacity style={styles.forgotButton}>
+                <Text style={styles.forgotText}>Forgot Password?</Text>
+              </TouchableOpacity>
+            </Link>
+          </View>
+        </View>
+
+        <AuthErrorMessage message={error} />
+
+        <PrimaryButton
+          onPress={onSignInPress}
+          title="Sign In Securely"
+          isLoading={isSubmitting}
+          isDisabled={isButtonDisabled}
+        />
+
+        <SocialSignInRow
+          onApplePress={() => console.log("Apple Sign In")}
+          onGooglePress={() => console.log("Google Sign In")}
+        />
+
+        <AuthFooterLink
+          label="Ready to start playing?"
+          linkText="Create an Account"
+          href="/(auth)/sign-up"
+        />
+      </View>
+    </AuthScreenWrapper>
+  );
+}
+
+const styles = StyleSheet.create({
+  scrollContent: {
+    paddingTop: Platform.OS === "android" ? 20 : 0,
+  },
+  content: {
+    width: "100%",
+  },
+  fieldGroup: {
+    marginBottom: 16,
+  },
+  passwordContainer: {
+    position: "relative",
+  },
+  forgotButton: {
+    marginTop: 8,
+    alignSelf: "flex-end",
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+  forgotText: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: PRIMARY_BLUE,
+  },
+});