Rewrite phase 1.

Started improved client code structure.

Implemented session based authentication serverside.

Implemented user, match, and sport database models serverside.

Implemented Controllers for variety of C and R operations of CRUD.

sports-matcher/client/src/components/GameInfoCard.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { Button, Card } from "react-bootstrap";
+import propTypes from "prop-types";
+import { grammaticalListString } from "../utils/strings";
+export default class GameInfoCard extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    getParticipants() {
+        let participants = [];
+        this.props.match.registeredUsers.array.forEach(user => {
+            participants.push(user.firstName);
+        });
+        return participants;
+    }
+
+    render() {
+        return (
+            <Card style={{ width: "20rem" }}>
+                <Card.Body>
+                    <Card.Title>{this.props.match.sport}</Card.Title>
+                    <Card.Subtitle className="mb-2 text-muted">{this.props.match.sport}</Card.Subtitle>
+                    <Card.Text>
+                        Join <strong>{grammaticalListString(this.getParticipants(), 4)}</strong> to play a few matches of <strong>{this.props.match.sport}</strong> at <strong>{this.props.match.location}</strong> on <strong>{this.props.match.dateTime.toLocaleDateString("en-US")}</strong>!
+                    </Card.Text>
+                    <Button variant="primary">Join!</Button>
+                </Card.Body>
+            </Card>
+        );
+    }
+}
+
+GameInfoCard.propTypes = {
+    match: propTypes.object,
+};

sports-matcher/client/src/components/GameInfoCardDisplay.js

@@ -0,0 +1,21 @@
+import React from "react";
+import propTypes from "prop-types";
+import GameInfoCard from "./GameInfoCard";
+
+export default class GameInfoCardDisplay extends React.Component {
+    constructor(props) {
+        super(props);
+
+    }
+    render() {
+        return (
+            <div className="horizontal-scroller">
+                {this.props.recommendedMatches.map((match) => <GameInfoCard key={match.id} match={match}></GameInfoCard>)}
+            </div>
+        );
+    }
+}
+
+GameInfoCardDisplay.propTypes = {
+    recommendedMatches: propTypes.array,
+};