Node CLI Based Restaurant Feedback App With Using  Chalk, Clear, Figlet & Enquirer

Tags: node, javascript, webdev, beginners
Published: 2019-09-12 15:20:29

Let’s talk little bit about what we are going to develop. We are making a CLI based feedback application for a Restaurant. Using this app, people can give feedback about their experience regarding food taste, quality, & can provide their valuable suggestions also.

Let's begin,

We have created **Feedback-CLI-App** folder and installed `Enquirer`, `Chalk`, `Figlet` and `Clear` npm modules. The final `package.json` file should look like this:

```javascript
{
  "name": "feedback-cli-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "chalk": "^2.4.2",
    "clear": "^0.1.0",
    "enquirer": "^2.3.1",
    "figlet": "^1.2.1"
  }
}
```

Now, create `index.js` file at the root of your app & require these module that we installed earlier. I will let you know their usecase one by one

```javascript
const clear = require("clear");
const chalk = require("chalk");
const figlet = require("figlet");
```

We want to clear the console when the application runs, so we are using the `clear` module for that 

```javascript
// Clearing Console On App Starts
clear();
```

Now we want to show User a wonderful heading & a welcome message, so we are using `figlet` and `chalk` module for that purpose. 

```javascript
// Create Heading Using Chalk & Figlet
console.log(
  chalk.yellowBright(
    figlet.textSync("Feedback Form", { horizontalLayout: "full" })
  )
);
console.log(
  chalk.cyanBright(
    "\n\tA Simple CLI Based Restaurant Feedback Form Using NodeJS"
  )
);
console.log(
  chalk.cyanBright(
    `\tFor Commands Run ${chalk.greenBright(
      "Just Follow These Instruction\n"
    )} `
  )
);
```

The current output should look like this
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/refn7nezknojmicdwb7k.gif)

Let's add the feedback questions now, create a `questions.js` file at the root. Inside that file we are now going to use `enquirer`, a great module having wonderful & Stylish CLI prompts that are user-friendly, intuitive and easy to create. Few examples of these prompts are shown below:
![](https://raw.githubusercontent.com/enquirer/enquirer/master/media/survey-prompt.gif) ![](https://raw.githubusercontent.com/enquirer/enquirer/master/media/heartbeat.gif)

Inside `questions.js` file, after requiring enquirer, create a function that returns an array of questions like this:

```javascript
const enquirer = require("enquirer");

const feedbackQuestions = () => {
  const questions = [
    {
      type: "input",
      name: "name",
      message: "What is your name ?"
    },
    {
      type: "autocomplete",
      name: "favourite",
      message: "Which dish you liked the most ?",
      limit: 10,
      choices: [
        "Biryani",
        "Butter Chicken",
        "Hamburger",
        "Blackberry",
        "Strawberry Cheesecake",
        "Italian Beef",
        "Red Valvet Cake"
      ]
    },
    {
      type: "multiselect",
      name: "improvement items",
      message: "Which of these dishes you want them to improve ?",
      limit: 7,
      choices: [
        "Biryani",
        "Butter Chicken",
        "Hamburger",
        "Blackberry",
        "Strawberry Cheesecake",
        "Italian Beef",
        "Red Valvet Cake"
      ]
    },
    {
      type: "input",
      name: "suggestion",
      message: "What would you like to suggest ?"
    },
    {
      type: "survey",
      name: "experience",
      message: "Please rate your experience",
      scale: [
        { name: "1", message: "Strongly Disagree" },
        { name: "2", message: "Disagree" },
        { name: "3", message: "Neutral" },
        { name: "4", message: "Agree" },
        { name: "5", message: "Strongly Agree" }
      ],
      margin: [0, 0, 2, 1],
      choices: [
        {
          name: "quality",
          message: "The food quality was well",
          initial: 3
        },
        {
          name: "taste",
          message: "The taste is outclass",
          initial: 3
        },
        {
          name: "environment",
          message: "The environment is wonderful too",
          initial: 3
        },
        {
          name: "service",
          message: "I like their service",
          initial: 3
        }
      ]
    }
  ];
```
Before ending the function, we need to call `prompt` method of enquirer(that's an async method) with passing these `questions` array. It will return a promise like this:
```javascript
  enquirer.prompt(questions).then(ans => {
    clear();
    console.log(
      chalk.yellowBright(
        figlet.textSync("Feedback Form", { horizontalLayout: "full" })
      )
    );
    console.log(
      chalk.cyanBright("\n\t Thanks For Providing Us Your Feedback !\n")
    );
    console.log(ans);
  });
};
```
And at the end we are simply exporting the `feedbackQuestions` function from this module. So the final `questions.js` file should look like this:
```javascript
const enquirer = require("enquirer");
const clear = require("clear");
const chalk = require("chalk");
const figlet = require("figlet");

const feedbackQuestions = () => {
  const questions = [
    {
      type: "input",
      name: "name",
      message: "What is your name ?"
    },
    {
      type: "autocomplete",
      name: "favourite",
      message: "Which dish you liked the most ?",
      limit: 10,
      choices: [
        "Biryani",
        "Butter Chicken",
        "Hamburger",
        "Blackberry",
        "Strawberry Cheesecake",
        "Italian Beef",
        "Red Valvet Cake"
      ]
    },
    {
      type: "multiselect",
      name: "improvement items",
      message: "Which of these dishes you want them to improve ?",
      limit: 7,
      choices: [
        "Biryani",
        "Butter Chicken",
        "Hamburger",
        "Blackberry",
        "Strawberry Cheesecake",
        "Italian Beef",
        "Red Valvet Cake"
      ]
    },
    {
      type: "input",
      name: "suggestion",
      message: "What would you like to suggest ?"
    },
    {
      type: "survey",
      name: "experience",
      message: "Please rate your experience",
      scale: [
        { name: "1", message: "Strongly Disagree" },
        { name: "2", message: "Disagree" },
        { name: "3", message: "Neutral" },
        { name: "4", message: "Agree" },
        { name: "5", message: "Strongly Agree" }
      ],
      margin: [0, 0, 2, 1],
      choices: [
        {
          name: "quality",
          message: "The food quality was well",
          initial: 3
        },
        {
          name: "taste",
          message: "The taste is outclass",
          initial: 3
        },
        {
          name: "environment",
          message: "The environment is wonderful too",
          initial: 3
        },
        {
          name: "service",
          message: "I like their service",
          initial: 3
        }
      ]
    }
  ];

  enquirer.prompt(questions).then(ans => {
    clear();
    console.log(
      chalk.yellowBright(
        figlet.textSync("Feedback Form", { horizontalLayout: "full" })
      )
    );
    console.log(
      chalk.cyanBright("\n\t Thanks For Providing Us Your Feedback !\n")
    );
    console.log(ans);
  });
};

module.exports = feedbackQuestions;

```
Now we just need to import that function inside our `index.js` file & call it at the end. The final `index.js` file should look like this:
```javascript
const clear = require("clear");
const chalk = require("chalk");
const figlet = require("figlet");

const feedbackQuestions = require("./questions");

// Clearing Console On App Starts
clear();

// Create Heading Using Chalk & Figlet
console.log(
  chalk.yellowBright(
    figlet.textSync("Feedback Form", { horizontalLayout: "full" })
  )
);
console.log(
  chalk.cyanBright(
    "\n\tA Simple CLI Based Restaurant Feedback Form Using NodeJS"
  )
);
console.log(
  chalk.cyanBright(
    `\tWelcome To The Feedback Form ${chalk.greenBright(
      "Please Answer The Below Questions\n"
    )} `
  )
);

// Feedback Question
feedbackQuestions();

```

That's all ! Here is the final output :
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wmrbi4ua9jsyqgk9s8e8.gif)

Cheers...... ! You did it :)
![](https://media.giphy.com/media/5JL8b0R6ebRcY/giphy.gif)