Battle of Gods: Content Management System

Battle of Gods is a physical board game currently in development and led by Don Chatelain and Patrick Johnson. While working on the API for characters and cards, etc., I decided to build a full CMS alongside it- giving my partners and I fine-tuned access to making changes and viewing our game's content. Below serves as a description of technologies used and technical decisions made.

• MERN stack single page application utlizing server-side rendering. Express handles all API endpoints and lets other requests fall through to React's front-end router. This allows both the client and server code to be hosted in the same place (deployed using Now by Zeit)

• Passport.js is used for authentication using a JWT strategy and encrypted payloads

• Mongoose serves as an ODM to MongoDB- utlizing aggregation and model schemas

• I use styled components in such a way that allows me to write all pertinant code to a component (JS, HTML, CSS) within the same class while keeping my preferred order hierarchy- JavaScript at the top, with HTML below it (render()) and CSS at the bottom (style()). Also the package allows the use of Sass without the need to setup a precompiler- just awesome.

For example:

import React from 'react';
import styled from 'styled-components';

export default class CharacterViewer extends React.Component {
  constructor(props) { ...
  }
  
  fetchData(event) { ...
  }

  render() {
    const Wrapper = this.style();
    return (
      <Wrapper onClick={this.fetchData.bind(this)}>
        {this.props.children}
      </Wrapper>
    );
  }

  style() {
    return styled.main`
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;

      > section {
        width: 100%;
      }

      @media only screen and (min-width : 768px) {
        > section {
          width: 40%;
        }
      }
    `;
  }
}