Welcome to Stats Collide, a tool for recording and tracking your Final Fantasy VI: Worlds Collide runs. Here you can monitor your speedrunning progress, analyze patterns with your playstyle, and identify trends that can help improve your Worlds Collide skills. We know how much you love data, so why not use it to kill that crazy clown even faster than before and save the world in record time?
Stats Collide is a fully serverless, full-stack application built with the React framework. It utilizes the following technologies:
- React - framework for the frontend application.
- AWS Amplify - Hosting platform for frontend and backend, making the deployment and infrastructure much simplier.
- AWS Lambda - Backend code for submitting runs and data validation.
- Dynamodb - Backend database for user and run data.
- Graphql - Query language API in front of the dynamodb database.
- Docker - Local development containerization.
- Discord Development Application - For user authentication.
In order to run the application locally, the following technologies needs to be pre-installed:
- Docker Desktop - The development environment runs in Anvil, a DevSecOps tools container. This container has all development tools installed and configured for this application, reducing onboarding time for new developers.
- WINDOWS ONLY - Linux on Windows - Needed to run the bash commands for setting up the container. Make sure you follow the configuration instructions for getting Docker to work with WSL 2 distros.
- An AWS account and your AWS credentials configured as Enviornment variables. Note that while you do not need to actually deploy to the cloud to develop locally, Amplify is kind of dumb and requires it to be set to start up a local database. I hate it.
NOTE: Anvil is not opinionated on how you manage your AWS credentials but it is encouraged that you manage them in a safer way then the default
/.aws/credentialsfile. One recommendation is AWS Vault but ultimately management is up to each developer.
Once the prerequisites are installed locally, follow these steps:
-
WINDOWS ONLY - Ensure that
anvilw,docker-compose.ymlandentrypoint.shis set for Windows line endings. For instructions on how to do this with VSCode, refer to here. -
./anvilw task init(NOTE: You only need to run this command once, when first configuring your development environment). Near the end you will be prompted for some input from the Amplify CLI. -
To enter the container to run development commands, run
./anvilw bash. Once inside the container, you can start the development server viatask serve.
NOTE: This assumes you have access to the AWS account with the StatsCollide database
-
Make sure you pull the AWS Amplify environment you want (either
mainordevelop) via the command:amplify pull --envName develop. When askedDo you plan on modifying this backend?, select Yes. (NOTE: This will update a bunch of files locally. Do not commit these changes in git unless you know what you are doing) -
Run
task npm-start REACT_APP_LOCAL_BACKEND=false. Instead of deploying the front-end app locally with a local mock DB, this will deploy your front-end app locally but connect it to the Graphql endpoint in AWS for your given environment. Make sure this is for read-only operations, as to not overwrite data in the production database
In addition to regular npm commands, a handful of macros have been set up for common development commands. These commands can be run via task <command> when in the container via ./anvilw bash. The following macros have been configured:
Installs the required development software and configured pre-commit.
Runs the pre-commit hooks. If you do not run your git cli inside the container, make sure you this command before making a commit.
Starts the local Graphql database and React frontend app. You can reach the local database via http://localhost:20002 and the frontvia via http://localhost:3000
Starts only the GraphQL backend database.
Starts only the front-end dev server with no backend database.
Deletes the local database.
Installs the given NPM package locally.