Startup CliX: DynamoDB & React Front-End on GitHub Pages

Over the course of this weekend I set up a front-end in React and added some data storage capabilities with DynamoDB.

Front-End

I used create-react-app and Bootstrap on GitHub Pages to get things going quick.

I'm rather impressed. It was a matter of about 10 minutes to get everything going.

1. Install create-react-app
2. Initialize a new React app
3. Modify the generated package.json so it fits GitHub Pages
4. Add Bootstrap the HTML template
5. Run the build command
6. Remove the build directory from .gitignore
7. Commit changes
8. Push to GitHub

The package.json for GitHub Pages:

{
  "name": "startup-clix",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-scripts": "1.1.4"
  },
  "homepage": "https://kay-is.github.io/startup-clix/front-end/build",
  "scripts": {
    "start": "react-scripts start",
    "move-html": "mv build/index.html ../index.html",
    "build": "react-scripts build && npm run move-html",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

I simply added the URL of my build directory on GitHub Pages in the homepage attribute.

And added a mv after the build command, so the new index.html ends up in the root directory.

This is just a first version and a friend already told me I should do it mobile first, haha.

Well, shouldn't be a big issue, I guess.

DynamoDB

After I found out about the limitations of AWS Step Functions, I had to get a new data storage ready. Luckily AWS SAM allows definition of simple DynamoDB tables.

With the conditional writes of DynamoDB I can synchronize player requests a bit better.

The new game thread would run like this:

1. Player joins are stored in a DynamoDB table
2. Start state-machine execution when enough players joined
3. Then send events via Pusher (game:start, game:end, round:start, round:end, etc.) to the clients.
4. Player send their finished products via HTTP to a Lambda function that stores it
5. End of every round a state-machine Lambda function checks if a players lost
6. If one or less players are left, the game finishes, if more players are left, the round is repeated

Next

Convert the front-end to mobile.

Let users publish their products.

Setup the state-machine right, so the game events are distributed on time.