TL;DR: [Driwwwle](https://driwwwle.com) is an open-source social network to showcase your projects with like, comments, notifications, profiles and real-time chat.

As developers, we like to look out for new and exciting projects or products. However, finding them is not the easiest task out there. Sure, you can scroll through GitHub's trending section to find a lot of awesome products but what if it is closed source?

Things aren't so hard for designers though. They can visit a website like Dribbble or Behance and enjoy the thousands of creative designs easily. What if we had something like Dribbble, but for developers?

## Introducing Driwwwle

{% youtube WVLHpSwEmYE %}

Driwwwle is a social network for developers to showcase their projects or products with other developers across the globe. Just like any other social network out there, you can like posts, save them privately, leave a comment and follow your favorite developers to build your own personal feed.

Some of the other features include:

⚡ Server-side rendering with Next.js
🍪 Cookie-based authorization with JSON web tokens
📜 Infinite scrolling feed with React Query
🖼️ Cloud image upload with Cloudinary
❤️ Like, save, and comment on posts
💬 Realtime chat with Socket.io
🤝 Follow developers and build personal feed

and a lot more..

Sounds interesting? I would love for you to create an account on [Driwwwle](https://driwwwle.com) and post your awesome creations.

Did I mention that Driwwwle is also open-source? You can browse through the code on this GitHub repo:

{% github itsnitinr/driwwwle-v2 %} 

## Some more screenshots

A picture speaks a thousand words but more importantly, I hope it excites you enough to give Driwwwle a try. Here are some screenshots, thanks to [MockupBro](https://mockupbro.com/) for the awesome mockups.

![Landing Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1ylr51nj7q2u3iblrbr.png)![Add New Post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4lrx08hg7a1pk5uta5q.png)![Search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lgifm57m1dpu7qgthjk.png)![Feed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhncxpfe4lk6snn13qmd.png)![Posts & Profile page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wm1iq8yf2gpyqeg0r8e.png)

## Suggestions and feedback welcome!

Driwwwle is in its initial stages at the moment and I would highly appreciate any feedback, suggestions and questions you would like to provide. What features would you like to see? What seems unnecessary or what's causing difficulties? 

Thank you for your time and I await to see your posts on Driwwwle soon. Until then, have a nice day!

TL;DR: Driwwwle is an open-source social network to showcase your projects with like, comments,...

showdev

I built a social network for developers to showcase their projects

Nitin Ranganath

When you start to focus on the performance and security of your backend alongside the other features, you know that you're growing and maturing as a developer. It goes without saying but having some sort of security measure against common attacks is essential, even if it's just a hobby project.

If you're new to security or want to quickly get started with some basic protection, these 5 NPM packages will help you get started in just a few minutes. The best part about these packages is that all you have to do is just install them and use them as middleware. It's that easy! 

In a hurry or just need the list of packages? Here are the 5 NPM packages that I'll be going over:

| Package Name | Package Link |
|--------------|--------------|
| helmet       | [NPM Link](https://www.npmjs.com/package/helmet)|
| xss-clean    | [NPM Link](https://www.npmjs.com/package/xss-clean)|
| hpp          | [NPM Link](https://www.npmjs.com/package/hpp)|
| express-mongo-sanitize   | [NPM Link](https://www.npmjs.com/package/express-mongo-sanitize)|
| express-rate-limit       | [NPM Link](https://www.npmjs.com/package/express-rate-limit)|
----

## Helmet

**What it does:** Sets security-related HTTP response headers to protect against some well-known web vulnerabilities.

**What does it protect against:** Cross-site scripting attacks, cross-site injections, clickjacking, MIME sniffing and targeted attacks towards Express servers by disabling the `X-Powered-By` header.

**How to use it:**

```
npm install helmet
```

```js
const app = require('express')();
const helmet = require('helmet');

// Using helmet middleware
app.use(helmet());

app.listen(1337);
```
{% github helmetjs/helmet %}

## XSS-Clean

**What it does:** Sanitizes user input coming from POST request body (`req.body`), GET request query (`req.query`) and URL parameters (`req.params`).

**What does it protect against:** Cross-site scripting / XSS attacks.

**How to use it:**

```
npm install xss-clean
```

```js
const app = require('express')();
const xssClean = require('xss-clean');

// Protect against XSS attacks, should come before any routes
app.use(xssClean());

app.listen(1337);
```
{% github jsonmaur/xss-clean %}

## HPP

**What it does:** Puts the array parameters in `req.query` and/or `req.body` asides and just selects the last parameter value to avoid HTTP Parameter Pollution attacks.

**What does it protect against:** Bypassing input validations and denial of service (DoS) attacks by uncaught `TypeError` in async code, leading to server crash.  

**How to use it:**

```
npm install hpp
```

```js
const app = require('express')();
const hpp = require('hpp');

// Protect against HPP, should come before any routes
app.use(hpp());

app.listen(1337);
```

{% github analog-nico/hpp %}

## Express Mongo Sanitize

**What it does:** Searches for any keys in objects that begin with a `$` sign or contain a `.` from `req.body`, `req.query` or `req.params` and either removes such keys and data or replaces the prohibited characters with another allowed character.

**What does it protect against:** MongoDB Operator Injection. Malicious users could send an object containing a `$` operator, or including a `.`, which could change the context of a database operation.

**How to use it:**

```
npm install express-mongo-sanitize
```

```js
const app = require('express')();
const mongoSanitize = require('express-mongo-sanitize');

// Remove all keys containing prohibited characters
app.use(mongoSanitize());

app.listen(1337);
```

{% github fiznool/express-mongo-sanitize %}

## Express Rate Limit

**What does it do:** Used to limit IP addresses from making repeated requests to API endpoints. An example would be to rate limit an endpoint that is responsible for sending password reset emails, which can incur additional fees.

**What does it protect against:** Brute force, denial of service (DoS) and distributed denial of service (DDoS) attacks.

**How to use it:**

```
npm install express-rate-limit
```

```js
const app = require('express')();
const rateLimit = require('express-rate-limit');

// Restrict all routes to only 100 requests per IP address every 1o minutes
const limiter = rateLimit({
    windowMs: 10 * 60 * 1000,    // 10 minutes
    max: 100                     // 100 requests per IP
});
app.use(limiter);

app.listen(1337);
```

{% github nfriedly/express-rate-limit %}

----

With these 5 NPM packages, you can make your Node.js + Express.js application much more secure in just 5 minutes. All of the packages above are extremely easy to use, just export and use as a middleware.

What security precautions do you take? Or did I miss any of your favorite packages? Let me know in the discussion below and I'll be happy to hear your thoughts.

When you start to focus on the performance and security of your backend alongside the other features,...

5 NPM Packages to Secure Your Node.js Backend in 5 Minutes

## The Idea & Inspiration

Truth be told, I've lost count of the number of amazing portfolio websites I've visited and been in awe of. I would try to take some inspiration from them and recreate them in my own way for my portfolio. However, after working on it for a few hours, I would come across a different design or idea and hop onto that instead. 

Due to this cycle, I have over 5-6 incomplete portfolio websites on my laptop, each having a different design. I love the creativity of some websites but I just can't make up my mind and stick to one design. So, what caught my eye this time? This amazing [Ubuntu-themed portfolio website](https://vivek9patel.github.io/).

I liked the idea so I thought of what tools do developers use. And what could be a better choice than the text editor most of us write code on: Visual Studio Code.

## VSCode-Themed Portfolio

If you're interested in exploring the project yourself, there's the link to it: http://vscode-portfolio.vercel.app/

{% github itsnitinr/vscode-portfolio %}

This is a responsive and server-side rendered portfolio website built with Next.js, one of the technologies that I mentioned in my "Technologies I'll be Learning in 2021" post.

{% post https://dev.to/itsnitinr/technologies-that-i-ll-be-learning-in-2021-as-a-mern-stack-developer-with-resources-4pci %}

Right from the layout to appearance, I'm aiming to build a portfolio website that looks and feels like Visual Studio Code. This includes adding some cool stuff like themes, extensions, an interactive terminal, and probably more. 

## Can You Help Me?

As you might've noticed, most of the pages are still empty because I wanted some feedback on the layout and VSCode aspects of the design. What type of design would you like to see for the other pages? What other features would you like to see in this project? I would highly appreciate if you leave a feedback, criticism or suggestion of any kind. 

The best part of the project is that since the other pages are yet to be built, you can fork the project and implement your own design which can help you stand out from the original project.

If you're interested in contributing, the project is open-source and I would appreciate any sort of help. Otherwise, you can share it or star the repo, if you want to of course.  

The Idea &amp; Inspiration   Truth be told, I've lost count of the number of amazing portfol...

I Built a VSCode Inspired Developer Portfolio

Getting your first client as a freelancer is usually a giant stepping stone that a lot of the developers, especially the newer ones, look forward to. The satisfaction and confidence you receive after successfully building an actual product that might be used by hundreds or even thousands of users is unmatched and makes all your hard work worth it. I'm grateful to have been on that path recently after building an e-commerce platform for a PCB manufacturing startup and I'd love to share some of my insights and tips that could help you make the most out of your first freelance job. Without further ado, here are five of my key takeaways:

## Don't Underestimate Yourself

While this may also be interpreted as trusting in yourself and the skills you've acquired in the past few months or years, what I really mean to convey is that **don't undersell yourself just because you're new**. It is undeniable that you may lack professional experience as you're beginning but that does not make you any less professional in terms of your code and the efforts you'll be putting in. Yes, you may be paid lesser than an experienced freelance developer and that's totally fine. It may be difficult to strike the perfect deal but make sure the project you're taking on is worth your time and efforts.

From my experience, the excitement of learning and implementing new things was more fruitful to me more than the paycheck. Think over the project requirements, devise a plan, and don't be hesitant in asking for what you feel you deserve. That being said, pay emphasis on the things you'll be learning along the way but don't let yourself be exploited just to get that client you've been waiting for.

## Lay Down the Deliverables

I find it really essential to let your client know exactly what you'll be providing them in the beginning itself to avoid unexpected surprises later. **Create a concise document, write down the features and functionalities you'll be implementing and share them with your client**. This is something I regret not doing. Few weeks into the project, I was asked to implement some features I wasn't expecting. 

Albeit a great learning experience, it helps to know these things in advance to properly plan and execute them to the fullest of your capabilities. Moreover, you can keep this document as a reference for yourself to keep track of the things you've completed and yet to do.

## Break Down The Project Into Milestones

You must've heard quite a lot about breaking down tasks into smaller chunks or subtasks. The same principle applies here. This makes the project less overwhelming and less intimidating, allowing you to focus on a particular task at any given time. A simple example would be to **dissect the project you'll be building into features and functionalities** like authentication and further breaking it down into frontend (pages, components, state management) and backend (routes, controllers, models) tasks.

You can also use a project management tool like Trello or Notion to keep track of tasks to do, in progress, to design, to test, and whatever else feels appropriate. Combine all the related tasks into milestones. If possible, you can structure your payouts in such a way that you get paid a fraction of the total amount after achieving each milestone.

## Communication, really, is the key

The heading seems pretty self-explanatory for this one. However, people tend to undervalue this particular statement. Right from the start, I maintained professional but friendly communication with my client on an instant messaging platform. In case you're skeptical about sharing your phone number, platforms like Discord, Telegram, or Slack are perfect for such use-cases. Even a simple e-mail communication is much better than no or rare communication between you and your client. 

The reason I included this as a key takeaway is that this communication helped me put worth my own ideas, implementations and even revise my client's plans in a better way. This **shows that you have a positive attitude and interest towards the projects and clients will genuinely appreciate this**. Moreover, the chances of getting further opportunities and referrals from them are pretty high too. 

## Don't Shy Away From Asking for a Testimonial

Once you complete the project successfully, I would highly recommend you ask your client for their experience working with you and a small testimonial regarding the same. I'm sure that most of the clients would gladly agree to it. **Having a well-written and genuine testimonial alongside the projects section of your portfolio enhances it by a great margin **and leads to more opportunities in the future. It's also great for identifying the areas in which you can further improve. 

More than adding credibility to your skills and portfolio, receiving positive feedback truly sparks happiness for the hard work you've been putting in for weeks or months. And in the end, being able to help the people around you through your skills and knowledge might just be what truly matters.

----

So that was some of the lessons I've learned from my first freelance project. Did I miss out on anything? Want to share your first freelance experience or leave some feedback? Drop a comment down below or tweet it to me.  

Getting your first client as a freelancer is usually a giant stepping stone that a lot of the develop...

5 Key Takeaways from my First Freelance Project

Discord is one of the best platforms for developers to communicate for multiple reasons: the ability to create your own community (or server), talk to others using voice channels, and overall an amazing instant messaging platform. However, with the help of bots, the experience just becomes way more interesting and easier thanks to the automation and features these bots provide. There's a bot for pretty much everything. May it be for helping you manage your server or just sending you memes.

In this article, we'll be building our own Discord bot using `discord.js` which will allow us to program our own bot using NodeJS. If you're not familiar with NodeJS or JavaScript in general, I'd highly encourage you to check those out first so that you can follow along with ease. Regardless, I'll still be explaining all of the code I write for your understanding. Let's get started!

{% github itsnitinr/crypto-discord-bot %}

## What we're building

Today, we'll be building a simple Discord bot that will fetch the price of various cryptocurrencies to get familiar with `discord.js`. But you can feel free to play around and build something else as well since the concepts will remain the same. I'll be using an API to fetch the prices so you can use a different API for a completely different purpose.

Our aims for today will be:

- Register our bot to Discord and get the bot token
- Add a command to ping our bot and check if it’s working
- Add a command to our bot which will fetch the price of a cryptocurrency with respect to another currency or cryptocurrency
- Add a command to get the latest news related to cryptocurrencies

## Getting Bot Token from Discord

The first step towards creating our own bot is to register it with Discord and get a token to access it. So, let's head on over to the [Discord Developer Portal](https://discord.com/developers/applications) and fill in some details. You'll need to login into your Discord account if you haven’t already.

Once logged in, you'll be greeted with a screen like this:

![Step 1](https://imgur.com/rSwRxPB.png)

To create a bot, press the `New Application` button on the top right corner of your screen and you'll be asked to enter a name for your bot. I'll be naming it 'Crypto Bot' for now.

![Step 2](https://imgur.com/RTMelqX.png)

Now you can customize all the general information such as name, description, and icon as per your liking. Make sure to save your changes. Now, click on the `Bot` tab present in the settings sidebar on the left side.

![Step 3](https://imgur.com/SwygfzM.png)

On the bot page, you will see a screen like this from which you can copy or regenerate your token.

![Step 4](https://imgur.com/NmXIhBW.png)

Copy the token and **make sure you keep it safe and secure.** This is a private token which you should not share with anyone and especially not put it up on GitHub or else people will be able to take actions on behalf of your bot, which you certainly don't want.

Finally, let's authorize our bot and add it to our server. For that, click on the `OAuth2` tab and tick on the bot scope in the scopes section and send messages & embed links permissions in the bot permissions section.

![Authorize](https://imgur.com/vzLqxbO.png) 

Copy the OAuth2 link and open it up on your browser. You'll be asked to select the server in which you want to bot to join. Make sure you have permission to add bots to your server.

![Auth Final](https://imgur.com/1mVtIeD.png)

Awesome, we're ready to get started with programming our bot with NodeJS & Discord.js in the next section.

## Initial Setup

Now that we have our bot token, we can get started with the code. Make a directory for your code and change into that directory on your terminal. 

```bash
mkdir crypto-discord-bot
cd crypto-discord-bot
```

Inside this directory, use the `npm init` command to set up an NPM package and generate the `package.json` file.

![NPM Init](https://imgur.com/TT98SQZ.png)

For this project, we'll be having 2 dependencies: `discord.js`, a library that will help us to interact with the Discord API easily, and `dotenv`, which we'll be using to create environment variables for storing our bot token and other API keys. Let's go ahead and install those using:

```
npm install discord.js dotenv
```

Go ahead and open up the folder using your favorite text editor or IDE and let's begin coding.

Start by creating 3 new files in the project folder: `bot.js`, which will contain the source code for our Discord bot,`.env`, for storing confidential information and API keys, and `.gitignore` to exclude the `.env` and `node_modules` folder from being pushed to our GitHub. If you're not going to initialize Git, you can skip the `.gitignore` file.

Our folder structure looks something like this now:

```
crypto-discord-bot
	- bot.js
	- .env
	- .gitignore
	- node_modules
	- package.json
	- package-lock.json
```

 Inside **`.gitignore`**, add the following lines of code:

```
node_modules/
.env
```

Now, inside the **`.env`** file, let's paste the bot token that we got from Discord. In case you lost the token, you can go back to the [Discord Developer Portal](https://discord.com/developers/applications) and copy your token again. This is how your `.env` file should look like:

```
DISCORD_BOT_TOKEN = ODE2NTk2MTQwOTY2ODA1NTM1.YD9Qaw.uTwkqds9EIapoJ_zJQGX2PAYOWw
```

`DISCORD_BOT_TOKEN` is like a variable whose value can be accessed through `process.env.DISCORD_BOT_TOKEN`. These are known as environment variables. If you’re wondering why we are using environment variables to store our bot token, it’s mainly because we don’t want to reveal the token as others can misuse it. Make sure you do not reveal your bot token to anyone or upload it onto the internet.

Time for some actual JavaScript code.

## Setting Up Our  Bot

If you notice, our bot is currently offline on our server. To make it online, let's write some code which I'll explain shortly. 

```js
// Require dependencies
const { Client } = require('discord.js');
const dotenv = require('dotenv');

// Load environment variables
dotenv.config();

// Create a bot instance
const bot = new Client();

// Log our bot in
bot.login(process.env.DISCORD_BOT_TOKEN);
```

As soon as you run this file using `node bot`, you'll see that our bot becomes online and we have successfully logged in. In case you see an error, please make sure that you've spelled the environment variable just like you did in the `.env` file.

In the first few lines of the code, all I did was just require the dependencies which our bot needs which are the `discord.js` library and `dotenv` . Then, to use environment variables in our file, we need to first load it by calling the `.config()` method on `dotenv`. As you can see, I've only imported the `Client` class from `discord.js` library since that's all we need for our purpose. Our bot will act as the client through which we’ll interact with Discord.

Let's move on to logging in as our bot. To do that, I've made an instance of the `Client` class and assigned it to a constant named bot. We can call several methods on the `bot` instance. For logging in, we use the `.login()` method which takes the bot token as a required parameter. Instead of pasting the bot token directly, we can access it from the `.env` file.

[Commit till this part](https://github.com/itsnitinr/crypto-discord-bot/commit/6afa5c53f2cb0afce28ef19e37f950c3515295e8)

## The Ping Command

Here we go, our first command for our bot: `!ping`. This command is used to check if the bot is working or not. If it is working, the bot will reply back with 'I am working’ to let us know. In case we don't receive any reply from our bot, we can safely assume that there was some kind of error or our bot is down. Let's break this down into small tasks: 

1. Log to the console when the bot is ready
2. Listen for messages and check if it matches any of our commands
3. Check if the message was sent by a user or a bot
4. Respond appropriately to the message

In Discord, every action can be considered an event. So we can listen for messages using the `.on()` method listening for `message` on the client and passing it an async (since we'll be making API calls in the upcoming commands and even `discord.js` returns promises) callback function with message as the parameter, like this: `bot.on('message', async (message) => ...do something)`.

Let us first tackle our first subtask, which is to log to the console when our bot has logged in and is ready to be used. This is pretty simple as we only have to listen for the `ready` event and `console.log()` in our callback function. The code will be somewhat like this:

```js
// Log to console when the bot is ready
bot.on('ready', () => {
  console.log(`${bot.user.username} is up and running!`);
});
```

Now, let's listen for messages and respond to the `!ping` command. 

```js
// Reply to user messages
bot.on('message', async (message) => {
  // Do not reply if message was sent by bot
  if (message.author.bot) return;

  // Reply to !ping
  if (message.content.startsWith('!ping')) {
    return message.reply('I am working!');
  }
});
```

In the above snippet of code, we have an event listener listening for `message` event. Once a message has been sent to the channel, we first check if the message's author is a bot or not. We can do this by accessing `message.author.bot`. This will return true if the message was sent by a bot and false if it was sent by a user.

Then, we check if the message starts with `!ping` which is our command for pinging our bot. Since we're only checking if the message starts with `!ping`, other messages such as !ping 123 or !ping abc will also trigger the ping functionality. You can change the behavior to strictly check for `!ping` only if you want but I'll go with the starts with functionality for now. To reply to the message, we use the `.reply()` method on `message`. And believe it or not, it is as simple as that.

![Ping Demo](https://imgur.com/Qn3xVZ4.png)

You can append the above 2 code snippets below your previous code and we'll be good to go and implement our primary functionality, getting the crypto prices, in the next section.

[Commit till this part](https://github.com/itsnitinr/crypto-discord-bot/commit/de3c7c70fb2e68872ef6723b0d18794f7b23d165)

## The Price Command

 Moving onto one of the core functionalities of our: fetching a price of a cryptocurrency with respect to another currency to compare it with. For this, we'll be using the [CoinGecko API](https://www.coingecko.com/en/api) which is a free API that provides us an endpoint to achieve the functionality we want. Before we move on that, let's once again break our tasks into few subtasks:

1. Check if the message sent by the user starts with `!price` 
2. Check if the user has passed 2 arguments along with it: the crypto and the currency to compare with
3. Get the price from CoinGecko API if the user has passed 2 arguments
4. Check if we have received a proper response with data from the API. If so, reply to the user's message with the price. If not, reply to the user notifying that there was an error.

To tackle our first subtask, we can use the inbuilt `.startsWith()` method to check if the message starts with !price. To check if we have 2 arguments, we can split the string and use the spread (`...`) operator for accumulating the arguments passed by the user in an array. 

If the length of the `args` array is not 2, it means that the user has either passed too few arguments or too many arguments. For fetching the price from the API, we'll use the `axios` package. You can do this by executing the following command:

```bash
npm install axios
```

Once done, import it into the `bot.js` by adding this line below the other require statements: 

```js
// Require dependencies
const { Client } = require('discord.js');
const dotenv = require('dotenv');
const axios = require('axios'); 	// New line that we added
```

The API endpoint that we'll be using to fetch the price will be: `https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd`

The response from this API endpoint looks something like this:

```json
{
  "bitcoin": {
    "usd": 47575
  }
}
```



This API endpoint takes 2 parameters: ids where we'll be passing the name of the crypto that the user sent in the message and vs_currencies where we'll be passing the currency that we want to compare it against, again taken from the user's message.

Here's the final code for all the functionality we discussed above:

```js
// Reply to !price
  if (message.content.startsWith('!price')) {
    // Get the params
    const [command, ...args] = message.content.split(' ');

    // Check if there are two arguments present
    if (args.length !== 2) {
      return message.reply(
        'You must provide the crypto and the currency to compare with!'
      );
    } else {
      const [coin, vsCurrency] = args;
      try {
        // Get crypto price from coingecko API
        const { data } = await axios.get(
          `https://api.coingecko.com/api/v3/simple/price?ids=${coin}&vs_currencies=${vsCurrency}`
        );

        // Check if data exists
        if (!data[coin][vsCurrency]) throw Error();

        return message.reply(
          `The current price of 1 ${coin} = ${data[coin][vsCurrency]} ${vsCurrency}`
        );
      } catch (err) {
        return message.reply(
          'Please check your inputs. For example: !price bitcoin usd'
        );
      }
    }
  }
```

![Price Demo](https://imgur.com/WmI5g7O.png)

You can add this code right below your existing code for the `!ping` command such that your message event listener function. Here's the [GitHub commit](https://github.com/itsnitinr/crypto-discord-bot/commit/328ee0808bdf40cd54277f1925d2249b45f518f0) with the complete code till this section

## The News Command

The next core functionality that we'll be implementing is to get the latest news article related to crypto. As you might have guessed, this is fairly similar to the price command. We'll again be using an API to get the news article. This time, the API will be from [News API](https://newsapi.org/), which is free but you'll have to create an account in order to generate your API key. So head on over to [News API](https://newsapi.org/) and generate your free API key.

Once you're done with the registration, copy your API key and paste it to the `.env` file like this:

```
DISCORD_BOT_TOKEN = ODE2NTk2MTQwOTY2ODA1NTM1.YD9Qaw.uTwkqds9EIapoJ_zJQGX2PAYOWw
NEWS_API_KEY = 6094f663e14952f986c002c636010243
```
Once again, I would like to remind you not to share these API keys or bot tokens with anyone. I’ve shown my bot token for tutorial purposes and will be discarding it shortly.

Now, let's check out the API endpoint that we'll be using and the response structure.

The endpoint for our purpose will be: `https://newsapi.org/v2/everything?q=crypto&apiKey=${process.env.NEWS_API_KEY}&pageSize=1&sortBy=publishedAt`

The `q` parameter stands for the query for which we've passed crypto as the value since we only need those articles that are related to cryptocurrency. We'll also have to send our `apiKey` as a parameter which we can get from the `.env` file. The `pageSize` parameter determines how many articles we'll receive from the API endpoint at a time. Since we need only 1 article, we've set the value to 1. Finally, we can also sort the articles as per rating, publish date, and relevance. Since we need the latest article, we'll set `sortBy` to publishedAt so that we get the latest article.

```json

  "status": "ok",
  "totalResults": 7503,
  "articles": [
    {
      "source": {
        "id": null,
        "name": "Business Wire"
      },
      "author": null,
      "title": "Cipher Mining Inc., a Newly Formed US-based Bitcoin Mining Company, to Become a Publicly Traded Company via a Merger with Good Works Acquisition Corp.",
      "description": "HOUSTON & NEW YORK--(BUSINESS WIRE)--Cipher Mining Technologies Inc. (“Cipher Mining”), a newly formed U.S.-based Bitcoin mining operation, and Good Works Acquisition Corp. (Nasdaq: GWAC) (“Good Works”), a U.S. publicly-traded special purpose acquisition comp…",
      "url": "https://www.businesswire.com/news/home/20210305005234/en/Cipher-Mining-Inc.-a-Newly-Formed-US-based-Bitcoin-Mining-Company-to-Become-a-Publicly-Traded-Company-via-a-Merger-with-Good-Works-Acquisition-Corp.",
      "urlToImage": "http://www.businesswire.com/images/bwlogo_square.png",
      "publishedAt": "2021-03-05T11:51:19Z",
      "content": "HOUSTON &amp; NEW YORK--(BUSINESS WIRE)--Cipher Mining Technologies Inc. (Cipher Mining), a newly formed U.S.-based Bitcoin mining operation, and Good Works Acquisition Corp. (Nasdaq: GWAC) (Good Wor… [+17142 chars]"
    }
  ]
}
```

Following the steps from the last command, here's how the code will look like:

```js
// Reply to !news
  if (message.content.startsWith('!news')) {
    try {
      const { data } = await axios.get(
        `https://newsapi.org/v2/everything?q=crypto&apiKey=${process.env.NEWS_API_KEY}&pageSize=1&sortBy=publishedAt`
      );

      // Destructure useful data from response
      const {
        title,
        source: { name },
        description,
        url,
      } = data.articles[0];

      return message.reply(
        `Latest news related to crypto:\n
        Title: ${title}\n
        Description:${description}\n
        Source: ${name}\n
        Link to full article: ${url}`
      );
    } catch (err) {
      return message.reply('There was an error. Please try again later.');
    }
  }
```

![News demo](https://imgur.com/xWhb08j.png)

All you need to do now is to append the code below your price feature code. And we've successfully implemented the news feature as well. Yay! If you faced any difficulties, you can cross check your code with [this commit](https://github.com/itsnitinr/crypto-discord-bot/commit/2a1ccf288449653668ffb284ecfc9a08ad5f84f5) 

## The Help Command

Alright, time to implement one last feature, an easy one too. The `!help` command can be used by the user to get the list of all the commands that our bots supports and a small description of each command. This is pretty similar to our ping command. All we need to do is to check if the message starts with `!help` and reply accordingly.

```js
// Reply to !help
  if (message.content.startsWith('!help')) {
    return message.reply(
      `I support 4 commands:\n
      !ping - To check if I am working\n
      !price <coin_name> <compare_currency> - To get the price of a coin with respect to another coin or currency\n
      !news - To get the latest news article related to crypto\n
      !help - For checking out what commands are available`
    );
  }
```

![Help demo](https://imgur.com/NxoZpVi.png)

That is pretty much it. We've built all the features that we desired. You can surely add more features to the bot as per your liking. I would highly encourage you to check out the [DiscordJS Documentation](https://discord.js.org/) to explore more features. What we've built is just scratching the surface of the huge pile of features it provides up.

Nevertheless, I'm sure you've learned something of value and I'm excited to see what you come up with. I hope this was a good introduction to `discord.js` and I'll be happy to answer all your queries. Here's the [final commit](https://github.com/itsnitinr/crypto-discord-bot/commit/66c9f05294d847d14b710f81cf68b5b04e0a7a6e) of the complete project.

----

## Resources To Check Out

[Official DiscordJS Documentation](https://discord.js.org)

[Create a Discord Bot With Node.js on YouTube](https://www.youtube.com/watch?v=BmKXBVdEV0g)

[DiscordJS In Depth YouTube Playlist](https://www.youtube.com/playlist?list=PLaxxQQak6D_fxb9_-YsmRwxfw5PH9xALe)

Discord is one of the best platforms for developers to communicate for multiple reasons: the ability...

Build A Crypto Discord Bot using Discord.js

As web developers, we tend to make use of several NPM packages on a daily basis for different reasons, from simple ones like adding colors to the `console.log()` statements on our terminal to fully-fledged front-end libraries such as React. These packages increase our productivity and save us a lot of time by not having to rewrite things that have been implemented several times by tons of users. 

In this post, I'll introduce you to 10 NPM packages that you should check out if you're learning React or already are an experienced user. We'll be going over multiple domains such as UI frameworks to utility-based packages. Without further ado, let's get started.

----

## Material UI

![Material UI](https://imgur.com/CX3G0nA.png)

[Material UI](https://material-ui.com/) is probably one of the best UI frameworks built for React, allowing you to build a consistent design system while leveraging Google's Material Design. Material UI helps you in building and designing by providing over 50+ components such as cards, progress bars, modals, and a lot more, which you can further theme as per your requirements. If I had to recommend a UI framework to a React developer, Material UI would surely be my first choice.

[Link to NPM Package](https://www.npmjs.com/package/@material-ui/core)

## Redux Toolkit

![Redux Toolkit](https://imgur.com/IcoYJoU.png)

Although the `useContext` and `useReducer` hooks have reduced the need of using Redux in modern applications, it's not uncommon to see a lot of codebases still Redux for global state management. Redux is still a valuable skill to learn in my opinion and does have its own use cases. However, the amount of boilerplate it takes to set up Redux in your React application can be overwhelming, especially for beginners.

[Redux Toolkit](https://redux-toolkit.js.org/) aims to solve just that! It is advertised as the official, opinionated, batteries-included toolset for efficient Redux development and is also highly recommended by the official Redux team to write your Redux logic. Do yourself and your codebase a favor by choosing Redux Toolkit over regular Redux next time.

[Link to NPM Package](https://www.npmjs.com/package/@reduxjs/toolkit)

## React Icons

![React Icons](https://imgur.com/ArZU8of.png)

[React Icons](https://react-icons.github.io/react-icons/) is a marvelous package that consolidates icons from over a dozen of popular icon sets such as Font Awesome, Material Icons, Ant Design Icons, and more. This makes it extremely easy to have access to all your favorite icons just by installing a single package without having to install each of them individually. Through ES6 imports, you can make sure that you import only those icons which you intend to use.

[Link to NPM Package](https://www.npmjs.com/package/react-icons)

## React Google Login

![React Google Login](https://imgur.com/gWEg0b7.png)

OAuth or Open Authorization enables users to sign up or log in to your website through other providers such as Google, Facebook, Twitter, GitHub, and more. You must've noticed the 'Login with Google' button on lots of popular websites. [React Google Login](https://anthonyjgrove.github.io/react-google-login/) allows you to accomplish the same functionality and makes the authorization process easy for you. All you need is an API key from Google and you're set to implement Google OAuth in your website using this simple package.

[Link to NPM Package](https://www.npmjs.com/package/react-google-login)

## Formik

![Formik](https://imgur.com/jbXAB0o.png)

[Formik](https://formik.org/) makes the painstaking job of building forms in React easier by taking care of all the repetitive stuff such as keeping track of value state, change handlers, submit handlers, validation, and more. This form library is small, simple and encourages you to spend less time writing form code and focus on building your big thing. It is well documented and has a dedicated tutorial for you to get familiar with it.

[Link to NPM Package](https://www.npmjs.com/package/formik) 

## React Query

![React Query](https://imgur.com/oXQ82Ic.png)

An essential part of a full-stack web application is fetching the data from your backend API or server state and loading them into your component or global state. If you're using Redux, this process might be firing an action in your `useEffect` hook to fetch data from your backend when the component is mounted. Well, what if there could be a better alternative to this approach?

[React Query](https://react-query.tanstack.com/) is an excellent data-fetching library that is the perfect candidate for this use case. Not only fetching, but React Query is also capable of caching, synchronizing, updating server state, paginating, and even lazy loading. Everything you need to make your interactions with the backend more fruitful is baked into this library and I highly encourage you to give it a try. Alongside performance improvements, it will help you make your codebase cleaner and more maintainable.

[Link to NPM Package](https://www.npmjs.com/package/react-query)

## Styled Components

![Styled Components](https://imgur.com/mQx4kBV.png)

[Styled Components](https://styled-components.com/) is a CSS-in-JS library which JavaScipt's [tagged template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to create styled HTML components. Why should you consider this over the regular CSS approach? Good question! Styled Components provides a component-like structure to your custom styled elements and saves you from typing `className` a bunch of times. Furthermore, it has some valuable features like automatic vendor prefixing and automatic critical CSS. Since Styled Components use the regular CSS syntax, you can transition pretty quickly to it.

[Link to NPM Package](https://www.npmjs.com/package/styled-components)

## Axios

![Axios](https://imgur.com/wpnP302.png)

[Axios](https://github.com/axios/axios) is a promise-based HTTP client based on the `XMLHttpRequest` interface which helps you make HTTP requests in order to fetch some data. But wait, isn't that what the native `fetch()` is used for. Well, yes. Just like other packages, the goal of this package is the simplify the process and provide more features such as automatic JSON data transformation, intercept request and response data, protect against XSRF, cancel requests and provide you a simpler API to work with for making HTTP requests. 

[Link to NPM Package](https://www.npmjs.com/package/axios)

## Framer Motion

![Framer Motion](https://imgur.com/dZwFPXJ.png)

[Framer Motion](https://www.framer.com/motion/) is an amazing animation and motion library for React to make your websites more interactive and fun to look at. Just visit their landing page, and you'll be blown off by the sheer ease to use and the number of features they provide ranging from general animations, gesture-based animations, drag animations, scroll animations and so much more.  Let me put it this way: if you were on the lookout for animation libraries, look no further than Framer Motion.

[Link to NPM Package](http://npmjs.com/package/framer-motion)

## Reselect

![Reselect](https://imgur.com/IcoYJoU.png)

This particular package is especially useful if you're Redux and are trying to improve the performance by avoiding unwanted expensive calculations. In a nutshell, [Reselect](https://github.com/reduxjs/reselect) is a selector library that allows you to efficiently compute derived data from the Redux store through [memoization](https://en.wikipedia.org/wiki/Memoization) and by memoized selectors. If performance is key to your React-Redux application, definitely check out Reselect.

[Link to NPM Package](https://www.npmjs.com/package/reselect)

----

So that was my list of 10 NPM packages that I think you should have a look at if you're working with React. Let me what packages do you use to make your workflow simpler and more productive, I'd love to hear them. Until then, happy coding!


As web developers, we tend to make use of several NPM packages on a daily basis for different reasons...

My Articles

I built a social network for developers to showcase their projects

5 NPM Packages to Secure Your Node.js Backend in 5 Minutes

I Built a VSCode Inspired Developer Portfolio

5 Key Takeaways from my First Freelance Project

Build A Crypto Discord Bot using Discord.js

You Need to Try These 10 NPM Packages as a React Developer