Feature: Discover

Discover

Table of Contents

• Feature Overview
• Subfeature: CLI
• Subfeature: User Overview

Feature Overview

The Discover page displays suggested matches for the user and allows the user to match or skip through the list of proposed matches. The Discover page also contains a responsive Command Line Interface giving the user the option to navigate and interact with the app in an alternative way.

Subfeature: CLI

Concept

To fit the programmer theme of Nerdr we decided a CLI as an additional way to navigate and perform actions would be an interesting addition. We looked at a few examples of CLI-themed web interfaces and noticed there are often a few flaws with the implementation. The two most obvious flaws that strongly deteriorate the user's experience are:

1. It's not obvious what commands there are and how to use these commands with the correct arguments, values, etc.
2. It's the website's only means of navigation/interaction. By forcing the user to use the CLI it quickly becomes a chore instead of a fun and playful extension of the website.

These issues both have a very straightforward solution: 1, add a list of commands somewhere on the website and 2, make sure the user can do everything without the CLI. We weren't satisfied with the first solution however, and wanted something a bit more elegant. So we settled for an 'autocomplete'-like functionality. When the user clicks on the CLI input, a dialogue shows up with all the commands available for the user. The user can now manually enter a command or click the command to quickly perform it.

When the user starts typing the autocomplete dialogue narrows down the available commands according to the input of the user. Once the user entered a valid command, the interface shows all the possible values (arguments) that can follow this command. For example, after entering the cd command the user will be prompted with a list of possible locations to navigate.

Implementation

The creation of this command-line interface consisted of a few steps in the following order:

Step 1: Parsing & validating commands

Allowing the user to insert a command, parsing & validating it and, if correct, run the command's function. By storing these commands inside of an object, we can also store functions along with the command. A simple command looks like this:

addInterest: {
  tag: 'actions',
  arguments: [
    {
      label: 'interest',
      values: ['language', 'skillLevel', 'occupation'],
    },
    {
      label: 'value',
      dependant: true,
      values: [
        ['Java', 'C', 'Python', 'JavaScript', '.NET'],
        ['amateur', 'intermediate', 'expert'],
        ['frontend', 'backend', 'fullStack'],
      ],
    },
  ],
  function: function(req, res, args) {
    console.log('Add Interest: ' + args[0] + ' - ' + args[1]);
  },
},

After the user inputs a command and runs it, it gets sent to a post function. This function goes through a few steps to validate the command:

1. Split up the input into a command and arguments:

const input = req.body.command.split(' ');
const command = input.slice(0, 1);
const args = input.slice(1);
> Step 2

2. Check if the command exists in the command list:

if (command in commandList) {
  > Step 3
}

3. Check if the amount of given arguments are the required amount:

if (args.length === chosenCommand.arguments.length) {
  > Step 4
}

4. Loop through input arguments and check against defined command argument values. If it is a dependant, find out which value list to use according to the index of the value of the previous argument:

let argsCorrect = true;
for ([i, argument] of args.entries()) {
  if (argsCorrect) {
    let valueList = chosenCommand.arguments[i].values;
    if (chosenCommand.arguments[i].dependant) {
      valueList = valueList[chosenCommand.arguments[i-1].values.indexOf(args[i-1])];
    }
    if (!valueList.includes(argument)) {
      argsCorrect = false;
    }
  }
  > Step 5
};

5. Run the command if arguments are of correct values:

if (argsCorrect) {
  chosenCommand.function(req, res, args);
}

Step 2: Displaying feedback messages to the user

This was achieved by simply re-rendering the page with an error or success message attached and conditionally displaying the message using .ejs templating.

Step 3: Showing the user a list of available commands

This was done by looping through the command list and creating a new HTML node for every command.

Step 4: Suggesting commands according to user input

Check if the command list includes the input command and conditionally display the suggested command.

Step 5: Allowing the user to click on suggested commands

Add an onclick event that copies the respective value to the input box.

Step 6: Suggesting argument values

Now here is where it got tricky as there are quite some steps to go through, but we managed to get it working. There are still a few issues with the current implementation; it breaks when the command requires two dependant arguments after each other. This could be fixed by perpetually checking backwards for every dependant argument, but this wasn't necessary for the current implementation.

Subfeature: User Overview

Because of the slight anonymous nature of Nerdr we didn't want to make users upload a profile picture. As such, we didn't have much to display about matches. We chose to keep it simple and display the languages the person is interested in and the languages the person already knew, highlighting the languages that fit in with your preferences. Matches are displayed according to your preferred skill level and occupation.