No description, website, or topics provided.
JavaScript CSS HTML

README.md

Project Evaluation Client

This a front-end web app for evaluating WDI projects, to be used in conjunction with the WDI emailer. It uses WebSockets for realtime collaborative editing.

Setup

  1. Clone this repository.
  2. Run npm install.
  3. Run npm start. This will open the web app in your browser.
  4. The person who is running the WebSocket server will share an IP address and port number. Enter that into the input in the format suggested.
  5. Enter your name.
  6. Work with the rest of the team to evaluate the projects! The information you enter is saved in real time, no need to save or submit.
  7. NOTE: If you're using Grammarly add-on, turn it off when using this app.

Development

Structure

Most of this application's logic, including all communication with the WebSocket server, takes places in src/App.js. This is also the top-level component. All other components are children of App. The only file "above" App.js is index.js which just renders App and glues it onto the actual DOM. App.js has three child components:

  • src/connect/Connect.js is responsible for rendering input fields that allow the user to enter the IP address of the WS server and specify a username for themselves. They send this info back up to App which passes it to the server.
  • src/dev_index/DevIndex.js is the list of JSON files available from the server. It renders in the "Developers" dropdown menu.
  • src/editor/Editor.js contains all of the markup and some of the logic for the actual interactive editor. It recieves the template JSON from App, which gets it from the server. It has a Requirement subcomponent (src/editor/requirement/Requirement.js) which renders the markup (textarea, checkbox, requirement text, etc.) for a single requirement. Any changes made to the JSON start here, and are bubbled up to App where they are sent to the server.

'App Structure'

Protocol

The client and the server communicate via by sending JSON to each other. All messages sent and recieved and by the client must have a top-level property called type which serves a similiar role to HTTP verbs. On the client, these different types of incoming messages are parsed by a switch statement in App.js. There are four types of messages:

  • identify: Once connected, the client sends a username to the server. The outgoing message might look like this:
    { "type": "identify", "body": "caleb" }
    The server will accept this and store the username.
  • index: When the user connects, they will send a message like this to request a list of availbel JSON files:
    { "type": "index" }
    The server will respond with something like this:
    {
      "type": "index",
      "body": ["caleb.json", "mike.json", "maria.json"]
    }
  • show: When the user clicks on the name of JSON file, the client will send a request for that file to the server:
    { "type": "show", "target": "caleb.json" }
    The server will respond with type "show" and a body field that contains the entire JSON file pertaining to that developer.
  • update: When the user edits a textarea on a requirement or checks a checkbox, the client will send something like this:
    {
      "type": "update",
      "target": "caleb.json",
      "body": {
        "requirements": {
          "Deployment": {
            "a2": {
              "comment": {
                "Your app isn't deployed homie!"
              }
            }
          }
        }
      }
    }
    In this example, the user typed "Your app isn't deployed homie!" into the textarea associated with the deployment requirement with id "a2". The above is what gets sent to the server to show what's changed. Notice it only contains fields that have actually changed since the last time the client updated the server. The server will then send that same object back out to every other user who is currently viewing that file. This will trigger the update case in App's switch statement, and the change will be merged into App.state.currentFile.

Toolchain

This app was scaffolded with create-react-app. You can find lots of useful info about working with the infrastructure create-react-app provides here.