@alekzandriia

Building a CLI business card with NodeJS

—

by

alekzandriia
in , ,

I spent yesterday evening working on my first CLI tool! It’s a business card app with contact information and clickable links.

I also learned how to publish it to npm so that I can share it with the world. Publishing it was surprisingly simple & only took about 5 minutes (seriously!).

See it in your own terminal by running npx alekzandriia ✨

Here’s a little preview of what it looks like. 👇

How it’s Made

Prerequisites: Before we begin, make sure you have the following:

  • A computer with a text editor installed
  • A web browser
  • Basic understanding of HTML and CSS (optional, but helpful)

Step 1: Setting Up the Project

  1. Create a new directory (folder) on your computer for the project.
  2. Create a new file called index.js within the project directory.

Step 2: Installing Dependencies

  1. Open your terminal and navigate to the project directory.
  2. Run the following command to initialize a new Node project
npm init -y

Install the required dependencies by running the following command:

npm install chalk chalk-animation terminal-link inquirer

These packages provide additional functionality that we’ll use to enhance our business card app.

Step 3: Writing the Code

  1. Open the index.js file in your text editor.
  2. Import the required packages by adding the following code to the top of the blank document.
import chalk from 'chalk';
import chalkAnimation from 'chalk-animation';
import terminalLink from 'terminal-link';
import { select, confirm } from '@inquirer/prompts';
import open from 'open';

These libraries provide some awesome functionality like colored terminal output, animations, clickable links, and interactive menus.

3. Create an object to hold all of your information so that it can easily be referenced later on.

// INFO
const info = {
  name: "Alex O'Reilly",
  location: "Canada",
  email: "hello@alekzandriia.com",
  twitterID: "1416902515275321352",
  humanLang: ["English (native)", "Spanish (In progress)"],
  compLang: ["HTML", "CSS", "JavaScript", "SQL", "Bash"],
  tech: ["React", "Tailwind", "Bootstrap", "Express", "MongoDB", "Wordpress", "Figma"],
}

4. Next, we’ll define the message variable to hold the message we want displayed as our greeting. 

// TIP: use backticks to facilitate line breaks (template literals)

const message = "Oh hey there! You've found my business card."

const displayMessage = () => {
  console.log(`${chalk.magenta(message)}`)
}

5. Here, we’re storing the greeting message in the message variable and creating a function displayMessage that logs the message in the terminal using a magenta color.

6. Now we’ll take advantage of the inquirer/prompts package that we imported to create an interactive menu.

const contactMethods = async () => {
  const answer = await select({
    message: "Let's get in touch!",
    choices: [
      {
        name: 'twitter',
        value: 'twitter',
        description: `Send a twitter DM to ${username}`,
      },
      {
        name: 'email',
        value: 'email',
        description: `Send an email to ${info.email}`,
      },
      {
        name: 'cancel',
        value: 'cancel',
        description: 'Actually, Maybe later',
      }
    ],
  });
  if (answer === 'twitter') {
    open(`https://twitter.com/messages/compose?recipient_id=${info.twitterId}`)
  }
  if (answer === 'email') {
    open(`mailto:${info.email}`)
  }
}

7. Now, let’s add the code to display the links. 

const displayLinks = () => {
  console.log(`
  Find me on the internet.

  ${chalk.bgMagenta(`Website`)} -> ${chalk.magenta(`https://www.example.com`)}
  ${chalk.bgBlue(`Twitter`)} -> ${chalk.blue(`https://www.twitter.com/example`)}
  ${chalk.bgMagenta(`GitHub`)} -> ${chalk.magenta(`https://www.github.com/example`)}
  ${chalk.bgBlue(`CodePen`)} -> ${chalk.blue(`https://www.codepen.com/example`)}
  ${chalk.bgMagenta(`Dribbble`)} -> ${chalk.magenta(`https://www.dribbble.com/example`)}

  Tip: Try ${chalk.blue('cmd/ctrl + click')} on the links above
  `);
};

This function displays the links to your website and various social media profiles.

8. Finally, let’s add the code to animate and display the business card.

// Display Card

const titleAnimation = () => {
  const rainbow = chalkAnimation.rainbow(`${username}`)
  setTimeout(()=> {
    const glitch = chalkAnimation.karaoke(`${info.name}\n`)
    setTimeout(()=> {
      glitch.stop()
      displayMessage()
      displayLinks()
      setTimeout(async ()=> {
        const answer = await confirm({ message: `${chalk.yellow('Want to say hi?')}` });
          if (answer) {
            contactMethods()
          }
      },3000)
    },2000)
  },1000)
}

titleAnimation()

This function creates an animation effect for your username and name using the chalkAnimation package. It also calls the displayMessage and displayLinks functions to show the greeting message and links.

Step 4: Customizing the App

  1. Replace the placeholder URLs in the displayLinks function with your own website and social media profiles.
  2. Modify the message variable in the displayMessage function to personalize the greeting message.

Step 5: Running the App

  1. Save the index.js file.
  2. In your terminal, navigate to the project directory.
  3. Run the following command to start the application:
  4. node index.js

Congratulations! You’ve successfully made a CLI business card app.

This simple project is a great starting point for beginners to get hands-on experience building interactive CLI applications with node.