⚡ Build a command-line app from scratch

Prerequisites

For this tutorial, you will need:

• npm (instructions to install it can be found here or through a package manager like Homebrew
• A code editor (I recommend Visual Studio Code, but anything you have will do)

Setup

First, make a new folder and initialize a Node.js project:

mkdir one-rep-max-calculator
cd one-rep-max-calculator
npm init

The prompt will ask you a series of questions to create your package.json file. You can just press Enter to select the default answer for each one.

On the same level, create a new folder called /bin, and inside that create a file index.js, so your folder structure looks like this:

1
bin
2
    index.js
3
package.json

At the top of this index.js file, add this line to make it executable:

#!/usr/bin/env node

This tells your system that this script should be run with Node.js.

Let’s get started

Now time to finally write some code!

Before asking anything, we want to show the title of our application as an introduction to the user. Common libraries to show any kind of colors or decoration are chalk (for colors and styles) and boxen (for, well, boxes and borders).

We can install those via:

npm i chalk boxen

And import them in our index.js file:

1
const chalk = require('chalk');
2
const boxen = require('boxen');

Now that we have access to those, let’s create our title.

In Node, if we want to show any kind of text to the user, we do that by logging it via console.log. In boxen, we use a function that accepts the title we want it to show as the first parameter, and the styles we want it to have as an object in the second parameter, like so.

1
console.log(boxen('ONE REP MAX CALCULATOR', {
2
  borderColor: '#E0115F',
3
  borderStyle: 'classic',
4
  padding: 2,
5
  margin: 1,
6
  color: 'white'
7
}));

This makes a red bordered box saying “ONE REP MAX CALCULATOR”!

Additionally, I figured it was fun to show some additional ASCII art, but it might definitely be overkill for some. We do this with chalk to give it a nice green color, but you can leave the chalk part out of it.

1
console.log(chalk.hex('#50C878')(`
2
  (your ASCII art here)
3
`));

You can already test this out in your terminal by running node ./bin/index.js to see it in action!

Show an explanation to the user

I wanted to show a bit more practical information to the user. This is just a line of text separated by two long lines for aesthetic reasons.

1
console.log(chalk.hex('#50C878')(`
2
---------------------------------------------------------------------------------
3
`));
4
console.log(`Calculate the ${chalk.hex('#E0115F').bold('max weight you can lift')} for a single repetition of an exercise.`);
5
console.log(chalk.hex('#50C878')(`
6
---------------------------------------------------------------------------------
7
`));

Ask the user for input

Now with the introductions out of the way, let’s go ahead and do the actual interactive part where we ask for input (in this case the weight and the reps) from the user. Technically we could use parameters for this, so that users would have to enter 1rm --weight 100 --reps 5 to do the calculation, which is a good option to have for tools that are automated, but not very user friendly. Instead, we will prompt the user to fill in those numbers. A useful tool for this is a package called ~yargs-interactive. so let’s go ahead and install and import that too.

npm i yargs-interactive

index.js:

1
const yargsInteractive = require('yargs-interactive');

Let’s go through the options we pass it step by step.

The usage line will show up when the user uses the --help command.

1
.usage('$0 <command>')

1
.interactive({
2
    interactive: { default: true },
3
    weight: { type: 'input', describe: 'Enter the weight of the lift (in kg)' },
4
    reps: { type: 'input', describe: 'Enter the amount of reps' },
5
  });
6
})

1
yargsInteractive()
2
  .usage('$0 <command>')
3
  .interactive({
4
    interactive: { default: true },
5
    weight: { type: 'input', describe: 'Enter the weight of the lift (in kg)' },
6
    reps: { type: 'input', describe: 'Enter the amount of reps' },
7
  })
8
  .then(result => {
9
    console.log(result);
10
  });

A few improvements

Notice how we reused a few colors throughout the application? We can go ahead and assign them to a variable so we can easily reuse them and change them more easily if we want.

1
const theme = {
2
  green: '#50C878',
3
  red: '#E0115F',
4
};

Now you can update every '#50C878' appearance with theme.green and '#E0115F' with theme.red.

Additionally, the object inside interactive looks a bit messy. Let’s go ahead and assign that to a separate variable as well.

1
const options = {
2
  interactive: { default: true },
3
  weight: { type: 'input', describe: 'Enter the weight of the lift (in kg)' },
4
  reps: { type: 'input', describe: 'Enter the amount of reps' },
5
};

So now you can update your code like this:

1
yargsInteractive()
2
  .usage('$0 <command>')
3
  .interactive(options)
4
  .then(result => {
5
    console.log(result);
6
  });

If you test this out by running node ./bin/index.js, you will get back an object showing your answered values.

Handle the user input

Now let’s do something with the user data we have. Inside the .then(result => { ... }), we will calculate the One-Rep Max with the Epley formula (which is the easiest one I’ve found).

1
let { weight, reps } = result;
2
const max = (weight / (1.0278 - 0.0278 * reps)).toFixed(2);
3
console.log(`Your one rep max is ${max}`);

We can even make it prettier and use our beloved boxen and chalk packages for this!

1
const styledMax = chalk.hex(theme.green).bold(`${max} kg`);
2

3
console.log(boxen(`Your one rep max is estimated to be ${styledMax}`, {
4
    padding: 1,
5
    borderStyle: 'double',
6
    borderColor: theme.red
7
}));

1
weight = weight.replace(/,/g, '.').replace(/[^0-9\.]+/g, '');
2
reps = reps.replace(/,/g, '.');

1
yargsInteractive()
2
  .usage('$0 <command> test')
3
  .interactive(options)
4
  .then((result) => {
5
    const { weight, reps } = result;
6

7
    weight = weight.replace(/,/g, '.').replace(/[^0-9\.]+/g, '');
8
    reps = reps.replace(/,/g, '.');
9

10
    const max = (weight / (1.0278 - 0.0278 * reps)).toFixed(2);
11
    const styledMax = chalk.hex(theme.green).bold(`${max} kg`);
12

13
    console.log(boxen(`Your one rep max is estimated to be ${styledMax}`, {
14
        padding: 1,
15
        borderStyle: 'double',
16
        borderColor: theme.red
17
    }));
18
  });

Final code

1
#!/usr/bin/env node
2
const yargsInteractive = require('yargs-interactive');
3
const chalk = require('chalk');
4
const boxen = require('boxen');
5
const options = {
6
  interactive: { default: true },
7
  weight: { type: 'input', describe: 'Enter the weight of the lift (in kg)' },
8
  reps: { type: 'input', describe: 'Enter the amount of reps' },
9
};
10
const theme = {
11
    green: '#50C878',
12
    red: '#E0115F',
13
};
14

15
console.log(boxen('ONE REP MAX CALCULATOR', { borderColor: theme.red, borderStyle: 'classic', padding: 2, margin: 1, color: 'white' }));
16

17
console.log(chalk.hex(theme.green)(
18
    `⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
19
    ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣶⣿⣿⣿⣿⣷⣦⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
20
    ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢾⠿⡏⢿⡟⠿⠁⢸⣿⣷⡄⠀⠀⠀⠀⠀⠀⠀⠀
21
    ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣁⣀⡀⢠⣶⠶⠀⠁⣽⣿⣆⠀⠀⠀⠀⠀⠀⠀
22
    ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠁⠀⠀⠀⠀⠀⠘⣿⣿⣷⡀⠀⠀⠀⠀⠀
23
    ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⣿⣿⣿⣆⠀⠀⠀⠀
24
    ⠀⠀⢀⣠⣴⣶⣶⣶⣦⣄⠀⠀⠀⠀⢀⣀⣀⣀⠀⠀⠀⣼⣿⣿⣿⣿⣧⠀⠀⠀
25
    ⠀⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⣐⢾⣿⣿⣿⣿⣷⣦⣌⡻⣿⣿⣿⣿⣿⣧⠀⠀
26
    ⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⣿⣿⣿⣿⣿⡇⠀
27
    ⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⠟⢋⡉⠛⠿⣿⣿⣿⣿⣿⡿⢿⣿⣿⣿⣿⣿⣿⡇⠀
28
    ⠀⣿⣿⣿⣿⣿⣿⣿⣿⡏⢠⣿⣿⣷⡦⠀⣈⣉⣀⣤⣶⣿⣟⣛⠛⠛⠛⠛⠃⠀
29
    ⠀⣿⣿⣿⣿⣿⣿⣿⡿⠀⠾⠛⠋⠁⠐⠺⠿⠿⠿⠛⠛⠉⠁⠀⠀⠀⠀⠀⠀⠀
30
    ⠀⣿⣿⣿⣿⣿⣿⠟⢁⣴⣶⣾⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
31
    ⠀⣿⣿⣿⣿⠿⠋⣰⣿⣿⣿⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
32
    ⠀⠛⠛⠋⠁⠐⠛⠛⠛⠛⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀`));
33

34
console.log(chalk.hex(theme.green)(`
35
---------------------------------------------------------------------------------
36
`));
37
console.log(`Calculate the ${chalk.hex(theme.red).bold('max weight you can lift')} for a single repetition of an exercise.`);
38
console.log(chalk.hex(theme.green)(`
39
---------------------------------------------------------------------------------
40
`));
41

42
yargsInteractive()
43
  .usage('$0 <command>')
44
  .interactive(options)
45
  .then(result => {
46
    let { weight, reps } = result;
47

48
    weight = weight.replace(/,/g, '.').replace(/[^0-9\.]+/g, '');
49
    reps = reps.replace(/,/g, '.');
50

51
    const max = (weight / (1.0278 - 0.0278 * reps)).toFixed(2);
52
    const styledMax = chalk.hex(theme.green).bold(`${max} kg`);
53

54
    console.log(boxen(`Your one rep max is estimated to be ${styledMax}`, { padding: 1, borderStyle: 'double', borderColor: theme.red }));
55
  });

Making it installable

It’s fun having your own little tool on your computer, but what if you wanted others to try it out as well? You could upload it to a public repository and have people install it from there, but an easier way would be to upload it as a public NPM package.

For this, open your package.json file and add a bin section. This will decide the command that the user will have to use to start your application, in this case 1rm, but it could be anything you decide.

1
"bin": {
2
    "1rm": "./index.js"
3
},

Publishing it on npm

If you want other people to install it too: First, create an account on npmjs.com, then log in with:

npm login

This will open a browser window where you can enter your username and password.

Now to publish your tool:

npm publish

Then others can install it globally via:

npm install -g one-rep-max-calculator

Small note: If you were to update your application afterwards and republish it, don’t forget to update your version number in your package.json.

Final thoughts

And there you have it, your very own commandline application published on NPM!

Some fun improvements you could do to expand on this application could be:

• Typescript optimized
• Ask the user whether they want to enter the weight in pounds or kilos
• Let users choose between the different formulas outside of Epley
• Clean up the code - separate into logical files and methods
• Add tests

Or better yet, check out the full code on GitHub if you would like to fork or contribute! ✨