/ai-basketball-app

Primary LanguageTypeScript

AI Basketball App

This is an application that will be developed to enable users to upload videos of them shooting a basketball and receive feedback in the application.

Getting Started

Prerequisites

The following dependencies are required to run this application

  1. NodeJs v12.x.x or greater

  2. expo-cli (To download this, run: npm install expo-cli --global)

  3. expo application on your mobile device (Check the IOS or Android App Store)

Firebase Config

You will require the firebase config to be able to run the application. Please talk to a member in the team about getting this and save the config as a file named: firebaseConf.ts

Local Development

The following steps need to be followed to run the application:

  1. Install dependencies: npm install

  2. If you have an Android device, run: npm run android

  3. If you have an IOS device, run: npm run ios

After you’ve started the application for either Android or IOS, expect to see in the terminal a QR code displayed. In the expo application on your mobile device, select 'Scan QR Code' and scan this code. Expect after a shortwhile that the application will load. You should be able to make changes to the application now and once saved, see that change reflected in the mobile application.

Note
 Because we live in 2021 and the world is a magical place, in order to run the application with the backend you need to update the AppConfig.ts file with the private IP address of your computer so the application can connect to the webserver (How good is that!!).

To do this, when you startup expo (via Android or IOS), you should expect that you see an IP logged, ie exp://192.168.0.1:19000. You should also see the IP address when you scan the QR code and view it from Expo. Take this IP address and replace serverHostname in AppConfig.ts with it. EG serverHostname=192.168.0.1.

Manual Project Setup

Note: We should not really be doing anything manually to setup the project.

Firebase Project Setup

  1. Navigate to: https://console.firebase.google.com/

  2. Click 'Add project' (Fill in options to create project)

  3. When the project is setup, go to 'Project Settings'

  4. Click 'Add app' and click on the </> icon.

  5. Name the project, and fill out the inputs to create the app!

AWS Setup

Note: The following setup will need to be templated into Cloudformation or Terraform

  1. Setup S3 bucket named 'aibasketball' (or something similar)

  2. Setup Cloudfront distribution for the bucket

  3. Setup policy in IAM to write to S3

  4. Setup a user in IAM with programmatic access only that uses the policy created

  5. Save the access token and secret access token locally (This will need to be used by the app)

Conventions

Directory structure

/
|- assets/              # Assets used for the application (Images, Fonts etc)
|- App.tsx              # Entrypoint for the application
|- src/AppNavigator.tsx # Contains all the routes for the application
|- src/components/      # Reusable components to be used across the application
|- src/screens/         # Screens that contains a number of components and are routable to in the application
|- src/enums/           # Enums to be used across the application
|- src/interfaces/      # Interfaces to be used across the application
|- src/constants/       # Any constant values that can be reused across the application
|- src/types/           # Any types that can be reused across the application
|- src/hooks/           # For any custom hooks that can be reused across the application

Filenames

  • Interfaces - I<PascalCase>.ts (prefix with I)

  • Unit Tests - <PascalCase>.unit.test.ts