For Frontend, you can run:

yarn install

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

For Backend, you can first create a virtual environment and install all the dependencies

Activate your virtual environment

pip install -r requirements.txt

To start the server:

python app.py

It will start the flask application and listens the the request from the frontend side.

After setting up the frontend and backend sides

1 - You can upload a video, input height, weight and shooting foot

2 - click analyse button

3 - analysis result rendering

4 - select a video frame

5 - image filters

6 - speed performance metrics

7 - detected shooting frame

8 - changes of ankle y coordinates over frames

9 - comparision between two videos

Future Work:

• Turn the web app into react native mobile app
• tensorflow-lite for mobile app inference
• or FireBase for cloud inference