SpaceTyper is a TypeRacer inspired web application, where the first player to finish typing a provided quote wins. This is a single page app built with Ruby on Rails and React. It uses a Flux architecture and a Redux state container to keep track of the front-end application state.
I used Ruby on Rails to set up a RESTful API that performs CRUD operations to manage users, quotes, and scores in a PostgreSQL database. Rather than rendering the data through Rails’ conventional ERB templates I formatted the data with Jbuilder to render it as JSON.
Setting up the backend interface as an API that responds with JSON allowed me to use the React library to render all of the data as HTML through React’s Virtual DOM. I used the Flux design pattern to manage the data flow with actions, a dispatcher, a store, and views. I used the Redux implementation of Flux, so I could have a single predictable state container as the store. React Router controls the navigation between components and keeps the url in synch with the display. The background animation is built on a HTML5 Canvas rendered from a React component.
I used npm to manage all of the JavaScript packages, webpack to bundle all of the modules, and the Babel transpiler to convert ES6 to ES5 for better cross-browser compatibility. After the JavaScript is bundled into one file and transpiled to ES5, it is minified by Uglifier through the Rails asset pipeline.
