Structure

Project Structure

Scouter is seperated into 3 core modules: client, server, and launcher. Each module contains their own package.json to specify their unique dependencie, with commands linked in the global package.json. The purpose of each module is as follows:

• Server: Handles connections between clients, admin authentication, and CRUD interactions with the Database.
• Client: Contains the front-end logic maintained via React, React-Redux, and Less. A compiled version is served to any user who connects to the server.
• Launcher: GUI interface that handles first-time setup along with subsequent runs of the server. Provides an alternative over using a command-line to start the server for less tech savy users.

Specific details of each module are listed below:

Server

Core packages: Express, SocketIO, and Mongoose

The server is actually comprised of two seperate servers. One is controlled with Express and is the default that is accessed when a user enters in the URL with no port. This server uses Express to handle the routing. The routes are specifically involved with serving the compiled site and interfacing with the Database via a CRUD API. The other server, located on port 4000, is controlled with SocketIO and handles communication with specific connected users or communication from one user to another. Example functionality that SocketIO handles is admin authentication, assigning users to their scouting target, and maintaining the time left in a match.

Server Structure

The server is initialized and configured within the srv/ folder. models/, routes/, and controllers/ all handle the specific details of the Express and Mongoose integration. models/ defines the structure of how data is stored in the database. Each file defines a specific Schema for a document in the database. routes/ contains the express routers which defines the URLs to access the internal API. controllers contains the functions that a route on a router calls. As for SocketIO, all of the interactions are handled in socket/.

The file structure of the server module is outlined below:

📦src
┣ 📂controllers // contains the code that handles the logic implementation for a route
┃ ┣ 📜*Controller.ts
┣ 📂models // contains the schemas for the MongoDB database
┃ ┣ 📜*Model.ts
┣ 📂routes // contains the Express sub-route definitions for an route defined in server.ts
┃ ┣ 📜*Routes.ts
┣ 📂socket
┃ ┗ 📜socketController.ts // class that handles the SocketIO communication events with clients
┣ 📂srv
┃ ┣ 📜main.ts // initializes and starts the server
┃ ┗ 📜server.ts // class for the server itself. Handles MongoDB authentication, SocketIO initializing, and routes that serve the client site
┗ 📂utils
┃ ┣ 📜catchAsync.ts // utility function for error handling with the controllers
┃ ┣ 📜dataCompiler.ts // compiles the data in the database into a CSV file for external use
┃ ┣ 📜error.ts // class for express middleware handler
┃ ┣ 📜logger.ts // definition for Winston logger
┃ ┗ 📜Timer.ts // a timer class that can be used to keep track of match time
┗ 📂global // contains the global files that are copied over from the root directory when the server is compiled

Client

Core packages: React, React-Redux, Plotly, Less, and Antd

The client in essence is the webpage that is sent to the user. The site is created with React to allow for a modular, component-based design. React-Redux and React-Router are integrated alongside React to each allow for consistent, clear data transfer and page navigation. The stylesheets are handled with less to allow each component to have its own corresponding stylesheet, along with keeping the CSS cleaner.

Client Structure

Each React component used to build the site are stored in the components/ directory. components/RouterComponents/ contains each page of the application that the user can navigate to (in reality it's a single page and components are merely swapped with the Router). components/Grid is a custom implementation of CSS Grid as a React component. The remaining files in the root directory are core components that are utilized no matter which page you are on.

The data transfer system that utilizes Redux uses a standard configuration with actions/ reducers/, and store/ in their own directorys. What these are in detail can be found here

The file structure of the client module is outlined below:

📦src
 ┣ 📂actions // contains the Redux actions
 ┣ 📂classes // contains utility classes
 ┃ ┣ 📜RequestHandler.ts // handles making requests to the Express API
 ┃ ┗ 📜socketController.ts // handles opening a socket with the server and communicating between the
 ┣ 📂components
 ┃ ┣ 📂Grid // contains a custom Grid component
 ┃ ┣ 📂RouterComponents
 ┃ ┃ ┣ 📂Admin
 ┃ ┃ ┃ ┣ 📂AdminFormComponents // contains components used for the forms on the admin page
 ┃ ┃ ┃ ┣ 📂AdminTabComponents // contains the components for each tab in the admin page
 ┃ ┃ ┃ ┗ 📜Admin.tsx
 ┃ ┃ ┣ 📂DataInput
 ┃ ┃ ┃ ┣ 📂DataInputFormComponents // contains individual componentss for the data collection tab
 ┃ ┃ ┃ ┗ 📜DataInput.tsx
 ┃ ┃ ┣ 📂Debug // page used for debuging purposes and testing components
 ┃ ┃ ┃ ┗ 📜Debug.tsx
 ┃ ┃ ┣ 📂Visualize
 ┃ ┃ ┃ ┣ 📂PlotComponents // contains Plotly component implementations for various types of charts
 ┃ ┃ ┃ ┗ 📜Visualize.tsx
 ┃ ┃ ┗ 📜Home.tsx // the component for the welcome page
 ┃ ┣ 📜ComponentRouter.tsx // handles routing the user to the correct page via React-Router
 ┃ ┣ 📜Header.tsx // component for the bar displayed at the top of the site
 ┃ ┣ 📜Navigation.tsx // contains the links that trigger the router to go to their corresponding page
 ┃ ┣ 📜ProtectedRoute.tsx // implementation for a route that is protected by a flag (ie isAdmin)
 ┃ ┗ 📜Root.tsx // the root component that contains the overarching structure of the site
 ┣ 📂constants
 ┣ 📂containers // utilizes React-Redux to bind reducers to components
 ┣ 📂entrypoints // contains the entrypoints for the application. Scouter is designed to only use one but the boilerplate had room for multiple
 ┣ 📂global // contains the files that are copied over from the global directory
 ┣ 📂helper // various helper files and ulities
 ┣ 📂less // contains the stylesheets that are imported in the global less file
 ┣ 📂reducers // contains the Redux reducers that map actions to functions
 ┣ 📂store // contains the logic that binds the Redux reducers together to be injected into the site
 ┣ 📂types // @deprecated
 ┗ 📜app.global.less // the global stylesheet

Launcher

Core packages: Electron, React, React-Redux, Antd