### Intro

Bootstrap is a fairly popular frontend “toolkit” that’s very similar to TailwindCSS. In the simplest way to explain it, it’s a list of pre-built CSS classes to use in HTML or libraries that use HTML such as React or Next.js. It uses a grid system of rows and columns to control the layout of your pages. To understand how Bootstrap runs, let’s look at the basics of it.

### Containers, Rows, and Columns

To start using Bootstrap’s grid system, we need to know about containers, rows, and columns. Let’s start with Containers. 

`container` is the starting class to break into Bootstrap’s grid system. It auto-adds margin and padding to your pages as well as sets you up for styling your elements within. So right now we are here:

```html
<div class="container">

</div>
```

> Note: There are two types of containers, `container`  and `container-fluid`. `container`  automatically adds padding and margin to a page, which is really useful for a `main`. `container-fluid`  doesn’t apply margin or padding so the element will always reach the edges of your screen, useful for nav bars.
> 

The next thing to look at is `row`. Pretty self-explanatory, these control the rows, horizontally, inside of your containers. These are great for separating your content into sections. 

Now we are one level down and look like this:

```html
<div class="container">
	<div class="row">
	</div>
</div>
```

The last thing to look at for the grid system is columns or `col`. These vertical columns are the basic way to determine the width of your elements. Bootstrap works off of 12 columns so no matter what the screen size is, the screen will always be 12 columns wide. 

Now we are down to this: container > row > col

```html
<div class="container">
	<div class="row">
		<div class="col">
		</div>
	</div>
</div>
```

### Responsive Layouts

Now that we know the basics, we can start working on our elements being dynamic. The first thing to think about, and where you’ll do most of your coding, is the columns. Since these determine the width of your elements, you’ll decide how many of those 12 columns the elements take up. Bootstrap makes this easy by just adding a `-`  and a number between 1 and 12, `col-1` through `col-12`. 

> Note: If we don’t specify an amount of columns, it will default to 12.
> 

For instance, if we have two elements that we want to take up 6 columns each on the same row, we would write that out like this: 

```html
<div class="container">
	<div class="row">
		<div class="col-6">
		</div>
		<div class="col-6">
		</div>
	</div>
</div>
```

It’s that easy! 

But this may not be practical for smaller screens. This is where breakpoints, or `infix` are used. Bootstrap has a list of pre-determined breakpoints that you can use to decide what you want to happen on what screen size. Here is a table that you can see all of the breakpoints from Bootstrap’s website:

| Breakpoint | Class infix | Dimensions |
| --- | --- | --- |
| X-Small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |


To write how many columns we want our element to span on certain screen sizes, we write it like this: `col-{screen-size}-{column-amount}`. For example, to specify that we only want our element to span 12 columns on small screens and 6 columns on medium screens, we would write that like this: 

```html
<div class="container">
	<div class="row">
		
		<div class="col col-md-6">
		</div>
		<div class="col col-md-6">
		</div>
		
		<div class="col col-md-2">
		</div>
		<div class="col col-md-10">
		</div>
	</div>
</div>
```

> Note: When you specify a screen size, it applies to that screen size and up unless a wider screen size is specified. `sm` applies for small screens and up, `md` doesn’t apply to small screens but applies to medium screens and up.
> 

> Note 2.0: The screen size syntax used on the columns, is exactly how it’s used for other styling choices such as colors - `text-sm-primary` or `text-md-secondary`. This would make our text blue on small screens and gray on medium screens and up.
> 

### Outro

These are what I would consider as the basics of bootstrap. You can mix and match these to place elements exactly how you want on your page on different screen sizes. Below I’ve listed a couple of resources from Bootstrap if you want to learn more about responsive design using Bootstrap. 

### Resources

[Bootstrap Containers](https://getbootstrap.com/docs/5.0/layout/containers/)

[Bootstrap Grid](https://getbootstrap.com/docs/5.0/layout/grid/)

[Bootstrap Breakpoints](https://getbootstrap.com/docs/5.0/layout/breakpoints/)

Use Bootstrap's grid system to create responsive web pages.

Create Responsive Web Pages using Bootstrap

Next.js, gives us `localFont` to make using local or custom fonts easy. Fonts can be leveraged to draw your user's attention to specific parts of the page or help build your brand by making it more recognizable. A couple different font types generally used are .TTF and .woff2.

In the root of your app, create a `fonts` folder to store your font. Then, with the font you’ve downloaded, drop it into that `fonts` folder. To set the font as my default font throughout the site,  add it to our `layout.js` file, `_app.js` if you’re using the `pages`  directory. `import localFont from 'next/font/local'` . 

Now create a variable to store your font value, set it to `localFont` and set the value of `src` to the path of the font file:

```JavaScript
const rsfont = localFont({ 
	src: '../../fonts/{font-file-name}.ttf'
})
```

Now replace the default font in the `className` of the body element with my new font. `<body className={rsfont.className}>`

```html
<html lang="en">
  <body className={rsfont.className}>{children}</body>
</html>
```

Start the server and the font should be showing on your site! To dive deeper into `localFont` and learn more about fonts and Next.js, [click here](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#local-fonts) to view Next’s documentation.

Add Local or Custom Fonts to Next.js

### **Intro**

Watermarks are an essential tool for safeguarding your visual content from unauthorized use. They are unique images or patterns that you embed into your files to establish ownership. In today's digital age, where sharing and accessing visual content has become effortless, ensuring the protection of your creative work is of paramount importance. This is where watermarks step in as a reliable solution. By seamlessly integrating identifying images or text overlays, watermarks not only establish your content's authenticity but also discourage unauthorized distribution. 

This blog post goes over the material covered in this [YouTube video](https://www.youtube.com/watch?v=5tOyDWNuPF0). For a better experience, watch there.

But for now, let's dive into the functionality of Cloudinary's JavaScript SDK.

### **Tutorial**

We'll be working on two distinct images. We'll apply an image overlay to the top image and a text overlay to the bottom image. Let's start by focusing on the image overlay for the top image.

The image is initially set at 300px by 300px for better visibility. To incorporate the overlay, Cloudinary provides the **`overlay`** method, to which we attach the **`source`**. The source can be an image or text. In this instance, we're choosing an **`image`** from our Cloudinary account, specifically the Cloudinary icon located in the **`samples`** folder.

```jsx
myImage
  .resize(fill(300, 300))
  .format('auto')
  .overlay(
    source(
      image('samples/cloudinary-icon')
```

However, the icon is a bit large for a watermark, so we need to resize it to fit snugly in the bottom-right corner. We'll initiate a **`new Transformation`** and use the **`scale`** option to resize it, setting the **`height`** to 55 pixels. To position it, we'll create a **`new Position()`**, determining its location through the `compass` direction in **`gravity`**. We've opted for **`south_east`**, placing it in the lower-right corner. 

```jsx
myImage
  .resize(fill(300, 300))
  .format('auto')
  .overlay(
    source(
      image('samples/cloudinary-icon')
        .transformation(new Transformation()
          .resize(scale().height(55))
        )
    )
      .position(new Position().gravity(compass('south_east')))
  )
```

Now, let's explore adding text as an overlay. Similarly, we'll use the **`overlay`** method and designate **`text`** as the `source`. We can input our preferred text; for this example, I'll use the word **`PREVIEW`**. To refine its appearance, we'll select a font and text size: **`'arial', 60`**. For a more stylized look reminiscent of stock images, we'll `bold` the text using the **`fontWeight`** property and adjust the **`textColor`** to a subdued gray tone.

```jsx
mySecondImage
  .resize(fill(300, 300))
  .format('auto')
  .overlay(
    source(
      text('PREVIEW', new TextStyle('arial', 60)
        .fontWeight('bold'))
        .textColor('gray')
    )
  )
```

To ensure a degree of transparency, allowing the underlying image to show through, we'll introduce the **`opacity`** attribute. We'll create a **`new Transformation()`** to control this opacity, where we will `adjust` this `opacity` and set it to 70%. And just like that, you've successfully applied watermarks to your images.

```jsx
mySecondImage
  .resize(fill(300, 300))
  .format('auto')
  .overlay(
    source(
      text('PREVIEW', new TextStyle('arial', 60)
        .fontWeight('bold'))
        .textColor('gray')
        .transformation(new Transformation().adjust(opacity(70)))
    )
  )
```

Incorporating watermarks into your images is a breeze using the **`overlay`** method from Cloudinary's Javascript SDK. We were able to use either **`text`** or **`image`** as the source. When utilizing **`image`**, we provided the path to be a chosen Cloudinary image, resized it, and positioned the watermark at the bottom-right corner of the image.

For **`text`**, we used `PREVIEW` as our text and adjusted it’s presentation with **`fontWeight`** and **`textColor`,** a subtle transparency effect.

Add watermarks to images using Cloudinary and their URL Generator

Add Watermarks to Images using Cloudinary

Anxiety can be a touchy subject for a lot of people. There is a stigma around it as if it’s a bad thing to be anxious or nervous about something. Everyone deals with it and it manifests in many different ways that can be very debilitating. Dealing with some anxiety myself, I see a mental health counselor on a weekly basis, and below is a list of ways I lower/deal with my anxiety. 

## Starting off the day right

One of the best ways of dealing with anxiety is to get ahead of it before it shows up. Anxiety tends to compound for me. If I’m stuck dealing with an episode of anxiety during a high-pressure situation, it means I’m going to have even more anxiety trying to deal with it which in turn, makes it harder to deal with. It’s a great thing my mind does to itself 😅. I use three main things to help reduce anxiety before it manifests: Daily Meditation, Words of Affirmation, and Radical Acceptance.

### Daily Meditation

Being ahead of anxiety means it’s going to take less time to deal with it during an episode of anxiety. One way I get ahead of it is through Daily Meditation. I take around 20 minutes every morning to sit, listen to calming instrumental music, control my breathing, and empty my mind. If any thoughts come into my mind, I acknowledge them and then dismiss them. You can write them down if you feel they are important. It calms me down and allows me to focus on the important things to start off my day.

According to the Anxiety and Phobia Workbook, meditation has been linked to: 

- A decrease in heart rate
- A decrease in blood pressure
- A decrease in oxygen consumption
- A decrease in metabolic rate
- A decrease in the concentration of lactic acid in the blood (associated with anxiety reduction)
- An increase in forearm blood flow and hand temperature
- An increase in electrical resistance of the skin (associated with deep relaxation)
- An increase in alpha brain wave activity (also associated with relaxation)

### Words of Affirmation

The other way to get ahead of anxiety is through Words of Affirmation or just non-negative self-talk. Words have power, especially when said out loud. Every morning, when I sit down at my computer to work, I say nice things about myself. It definitely felt weird at first, but after a while, I start to believe those things. 

An example of non-negative self-talk I use every morning: 

*I’m going to have a good day today.*

*If I encounter a problem, I can solve it.*

*If I can’t solve the particular problem, I’ll just ask for help.* 

*One way or another, I’m going to have a good day!*

It honestly helps me to have a good day and when I can encounter a roadblock, I can deal with the roadblock, one way or another.

### Radical Acceptance

The last way I prepare for anxiety ahead of time is through Radical Acceptance. 

*“Radical acceptance means accepting things for the way they are in the present.”* - [uwmedicine.org](https://rightasrain.uwmedicine.org/mind/mental-health/radical-acceptance) 

It doesn’t mean that if you are in a bad situation just accept it and not do anything about it. It means understanding that bad things happen to everyone, accepting that bad things happen, and having the ability to continue moving forward with your life. A saying I like to stick to is “Hope for the best but prepare for the worst.” 

If you’re doing meditation and words of affirmation already, then you should be prepared to come at these situations with a clear and logical mind. Think about what, truly, the worst situation is and how you would deal with it. 

## Anxiety in the moment

Now, getting ahead of anxiety drastically helps but doesn’t eliminate it. There are a few tools that I use to help deal with anxiety in the moment when I don’t have time to spend 20 minutes of meditation or work my way through radical acceptance. I use Backward Counting, Progressive Muscle Relaxation and Deep Breaths, and Setting Boundaries. 

### Backward Counting

To be more specific, counting backward by sevens. You might be thinking, “How would counting backward help with my anxiety?” Anxiety is an emotional response centered in the limbic system of your mind. Counting backward gets you out of the limbic system and puts you into your prefrontal cortex which “*intelligently regulates our thoughts, actions and emotions*” - [ncbi.nlm.nih.gov](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2907136/#:~:text=The%20prefrontal%20cortex%20(PFC)%20intelligently,brain%20regions%20(BOX%201)). It helps you to think logically instead of emotionally. 

### Progressive Muscle Relaxation and Deep Breaths

These two go hand in hand. Both are good techniques for relaxing your body when dealing with anxiety. I feel anxiety in my shoulders more than anywhere else. Deep breaths help to relax the tension that I feel in my shoulders. Try it yourself. Take a very big deep breath, hold it for a few seconds, and slowly release it. I literally feel the tension leaving my shoulders

I use progressive muscle relaxation when I’m dealing with anxiety when trying to sleep. Progressive muscle relaxation is tensing up different parts of my body and then relaxing them, starting from my toes and then working my way up to my forehead or the other direction. When I lay down at night, I tend to go over my day and I can focus on negative things and then get in a loop of self-pity.  This technique helps me to focus on relaxing my body instead of whatever happened throughout the day. I recommend following along with a YouTube video that will walk you through it. 

### Setting Boundaries

It’s very easy for me to be drawn to negative things, especially when browsing social media. There is a lot happening in the world and there always will be. Pinpointing things that induce my anxiety, helps me to prevent it. I don’t use Facebook, except for Messenger, and I only use Twitter for work. You’ll see that I don’t follow thousands of Twitter accounts, and those that I do follow, are mostly developers, writers, and streamers. Most of these accounts post either informative or fairly positive content. I also have a list of words blocked so I can avoid content that I don’t want to see. 

Now there are times when things fall through the cracks or major events that happen I should spend some attention to that aren’t necessarily positive things. It’s important to know the major things that are happening around me and not completely live inside a bubble. Setting time limits or setting time aside in my day are the main things that help me to regulate viewing this type of content. It’s all about setting boundaries for myself so that I have the best chance to succeed. 

### Conclusion

Anxiety happens to everyone, it’s impossible to avoid it, and it’s a completely normal response to extreme situations. **YOU** are an amazing person and your feelings are valid. It’s important to tell yourself that. Bad things happen. It’s important to keep your head up and keep on moving. Lean on your support systems. This too shall pass. Have a wonderful day. 

### Resources:

[The Limbic System](https://qbi.uq.edu.au/brain/brain-anatomy/limbic-system)

[The Prefrontal Cortex](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2907136/#:~:text=The%20prefrontal%20cortex%20(PFC)%20intelligently,brain%20regions%20(BOX%201))

[The Anxiety and Phobia Workbook (PDF)](https://www.academia.edu/36879275/The_Anxiety_and_Phobia_Workbook_5th_Edition)

[Radical Acceptance](https://rightasrain.uwmedicine.org/mind/mental-health/radical-acceptance)

A list of actions I take to help lower my anxiety

Dealing with Anxiety

As someone passionate about web development, I find it essential to understand what it's like to work in this field. While between jobs, I had the opportunity to speak with several people in the web development industry, including developens about their workdays, what they found most challenging and enjoyable, the number of hours they worked, and whether there was a season that was toughest n their job. Additionally, we talked about the state of the industry, the effects of mass layoffs on the industry, and the future of web development.


## What Is Their Work Like? 
One of the most enlightening parts of my conversations with these web developers was learning about their typical workdays. The freelance trainer, for example, spends his days training developers, building functional prototypes for startups, and coding most of the time. For him, the biggest challenge is wearing many hats, including business development, but he enjoys the freedom and control that comes with freelancing.

One Developer Advocate spends his time doing daily standups to get feedback and ask questions, breaking down work, and working on implementing tasks and conducting code reviews. The other I caught in the middle of working on launching some new integrations. He has a lot of autonomy to work on his tasks, which include reviewing copies, docs, and blog posts, documenting confusing subjects, making outlines, and recording/reviewing videos.

The web developer I spoke with mentioned that he has a lot of tasks, from strategizing projects to writing tests, and that there is always variety in his work. He goes through all of his notifications a couple of times a day and works on PRs and merges.


All of these developers work about 30-45 hours per week, with varying levels of difficulty throughout the year. The freelancer struggles around the holidays as companies tend to focus on saving money and spending time with their families. Developer Advocates can see the Spring or Summer since kids are out of school, life gets in the way, and there are a lot of conferences to go to. It varies for the Web Developer as their main focus is on products. Whenever a new product is getting released, it's usually a push for the deadline.


## Opinion on the State of the Industry
When it comes to the state of the industry, the developers had different opinions. The Web Dev said the biggest change he has seen is the rise of ChatGPT, which he uses for rubber ducking and pair programming. Meanwhile, a developer advocate said there are still many traditional methods in use, such as Next.js, PHP, and WordPress being very popular.

I also got to see how they were each affected by the recent mass layoffs in the industry. The freelancer and one of the Developer Advocates felt that the recent mass layoffs are worrying, and the focus on money over fun could hurt society. Things felt more driven by fear. On the other hand, the other Developer Advocate sees it as an opportunity for smaller companies to rise up, and the result of quick growth throughout COVID was a direct cause of the mass layoffs. All of them agree that networking is essential during times like these.

Regarding the future of web development, the topic of AI came up, and they all agreed that it will have a significant impact on the industry. However, AI won't replace jobs but instead create/supplement different ones, such as delivering results faster or creating Twitter threads. One did raise concerns about AI making it more difficult to get into the development industry.

When asked the question about why they think people leave the Web Dev field, I got two main answers, the people and the work. The people can be super judgmental if you're not in the "boys club." People can seem really underhanded and only look out only for themselves, regardless of how it affects others. The work can be very demanding and time-consuming. There is a lot more out in the world than just work. People want to live their lives and being stuck in an office all day can be very taxing.

## Approaches to Job Searching and Hiring
When it comes to finding jobs throughout the years, they had different approaches. Early on in their careers, they spammed various job boards and emails, prioritizing quantity over quality as the main way. But as they gained experience under their belt, they were able to be more selective. With more experience and connections, they were able to reach out for referrals, and people came to them with job opportunities through mediums like Twitter.

When considering new hires, they value basic fundamental skills, such as JavaScript, HTML, and CSS. They also look for a willingness to learn, motivation, and the ability to find ways to stand out, such as having a strong Github profile or demo sites. Additionally, they prioritize candidates who stay on top of industry developments and trends. They also seek candidates who demonstrate a desire to learn, show humility, take ownership of their mistakes and treat them as learning opportunities, have an eagerness to build but are not overbearing about it, are good team players, collaborate well, are open to feedback, and have strong communication skills. They also value candidates who are flexible and take ownership of their own responsibilities.

## Conclusion
All in all, speaking with these web developers provided me with a wealth of information about the industry. I learned that web development is a diverse field with many different roles, from freelancing to working for companies. The recent changes to the industry have brought both excitement and worry, but there is always the promise of new technology and job opportunities.


### Credits
I would like to express my gratitude to [Joe Previte](https://twitter.com/jsjoeio), [Colby Fayock](https://twitter.com/colbyfayock), [Kevin Cunningham](https://twitter.com/dolearning), and [Will Johnson](https://twitter.com/willjohnsonio) for taking the time out of their day to participate in these interviews with me. It was an eye-opening experience, and I am certain it will be a valuable asset for me moving forward.

A summary of notes from interviewing well established developers

Informational Interview with Web Developers

This tutorial is based off of my course released on [egghead.io](https://egghead.io/courses/build-a-book-club-bot-with-discord-js-501f5be9?af=bfqdmx).

In this tutorial, I will guide you through creating your first Discord bot. We will begin by setting up our bot in the Discord developer portal, followed by setting up the bot locally. I will teach you how to develop a basic chatbot, and then we will dive into creating slash commands with more detail. Finally, we will deploy the bot to ensure it runs continuously.

I have found the following resources to be helpful while developing:

- [Discord.js' guide](https://discordjs.guide/) on their website is an excellent resource for learning more about each topic covered in this tutorial.
- If you have any questions you can't figure out, I highly encourage you to check out the [Discord.js discord channel](https://discord.com/invite/djs). However, please try to solve the problem yourself first. Accurately describing the issue and the attempted solutions is a great way to get a quick answer.
- The [Discord status page](https://discordstatus.com/) is a useful tool to check for any Discord outages. If your bot isn't working and you can't find the issue, verifying that everything is running on Discord's end is a great debugging step.
- 

## Create and Configure a Bot using the Discord Developer Portal

To get started, go to **[https://discord.com/developers/applications](https://discord.com/developers/applications)**. If you do not have an account, you will need to sign up for one. Once you're in, click "New Application" and name your bot.

In the navigation column on the left, click "Bot," then click "Add Bot." This will convert your application into a bot.

Next, click on "OAuth2," then "URL Generator," and select "bot" to set the necessary permissions. The specific permissions required will depend on what you want your bot to do. Since we're creating a book club event bot, we need to grant it the following permissions: manage roles, manage channels, read messages/view channels, moderate members, send messages, manage messages, add reactions, and use slash commands. Copy the generated URL and add it to your Discord channel.


## Send your first Discord.js Bot Event

To begin, create a directory and navigate to it using the command line. Then, run **`yarn init -y`** to generate the initial files. We will also need to install the following dependencies: discord.js, dotenv, and nodemon.

After that, create a **`.env`** file to save some variables. In the Discord developer portal, we will need two variables: **`application id`**, which will be saved as **`CLIENT_ID`**, and a token that can be found by clicking "Reset Token" in the "Bot" section. Save the token in your **`.env`** file as **`TOKEN`**.

Next, create a **`main.js`** file in the root of your directory and import the necessary packages:

```jsx
const { Client, Intents } = require('discord.js');
require('dotenv').config();
```

We will then create a new client instance:

```jsx
const client = new Client({ intents: [Intents.FLAGS.GUILDS] });
```

Once we have created the client, it is common practice to log in to make sure the bot is working as intended:

```jsx
client.once('ready', () => {
  console.log(`Ready! Logged in as ${client.user.tag}`);
});
```

We can then log in to Discord with our client's token:

```jsx
client.login(process.env.TOKEN);
```

Lastly, in **`package.json`**, create a development script using nodemon:

```json
"scripts": {
  "dev": "nodemon main.js"
},
```

Run **`yarn dev`** to start your bot!


## Create your first Discord.js Bot Message Command

To create your first message command, you need to add the necessary permissions via the **`GatewayIntentBits`**. Here is an example of how to set up the client with the required intents:

```jsx
const client = new Client({ intents: [ GatewayIntentBits.Guilds, GatewayIntentBits.GuildMessages, GatewayIntentBits.MessageContent ]});
```

Using **`client.on`**, the bot will check the messages sent in the server to see if they match up with the desired command name, and then reply to that command with some text. Here is an example:

```jsx
client.on('messageCreate', (message) => {
  if(message.content === 'hello'){
    message.reply('world');
  }
});
```

If you want to create a simple chatbot, you can keep checking the messages in your server with if/else statements and reply accordingly. However, if you want to create a more intricate bot, you'll want to use slash commands.


## What are Slash Commands

Using if/else blocks to create a bot can become cluttered and hard to read as it becomes more complex. However, Slash Commands offer a solution by allowing you to separate commands into individual files and providing helpful configurations.

According to the **[Discord.js tutorial](https://discordjs.guide/creating-your-bot/slash-commands.html)**, here are some advantages of using Slash Commands:

- Integration with the Discord client interface.
- Automatic command detection and parsing of associated options/arguments.
- Typed argument inputs for command options, such as "String", "User", or "Role".
- Validated or dynamic choices for command options.
- In-channel private responses (ephemeral messages).
- Pop-up form-style inputs for capturing additional information.

Therefore, if you plan on creating a more complex bot, it is recommended to use Slash Commands to keep your code organized and manageable.


## Setup Files for your first Discord.js Slash Command

Thanks to the Discord.js guide, we can use some of their files to set up our project completely for slash commands. While you can have these functions set up in your **`main.js`** file, it's much more readable to extract them into their own folder and files.

Here are five files that I grabbed from the **[Discord.js guide](https://discordjs.guide/creating-your-bot/)** to run slash commands. I won't go into detail here, so you can either go through their documentation or watch my course on **[egghead.io](https://egghead.io/courses/build-a-book-club-bot-with-discord-js-501f5be9)**.

You can manually add the files listed, or you can **[clone the template](https://github.com/lsminter/discord-bot-template)** I created, fill out the **`.env`** file, and be ready for the next section.

### Main.js

```jsx
const fs = require('node:fs')
const path = require('node:path')

const { Client, GatewayIntentBits, Collection } = require('discord.js');
require('dotenv').config()

const client = new Client({ intents: [ GatewayIntentBits.Guilds ]});

client.commands = new Collection();

const commandsPath = path.join(__dirname, 'commands');
const commandFiles = fs.readdirSync(commandsPath).filter(file => file.endsWith('.js'));

for (const file of commandFiles) {
	const filePath = path.join(commandsPath, file);
	const command = require(filePath);
	if ('data' in command && 'execute' in command) {
		client.commands.set(command.data.name, command);
	} else {
		console.log(`[WARNING] The command at ${filePath} is missing a required "data" or "execute" property.`);
	}
}

const eventsPath = path.join(__dirname, 'events');
const eventFiles = fs.readdirSync(eventsPath).filter(file => file.endsWith('.js'));

for (const file of eventFiles) {
	const filePath = path.join(eventsPath, file);
	const event = require(filePath);
	if (event.once) {
		client.once(event.name, (...args) => event.execute(...args));
	} else {
		client.on(event.name, (...args) => event.execute(...args));
  }
}

client.login(process.env.TOKEN);
```

### events/interactionCreate.js

```jsx
const { Events } = require('discord.js');

module.exports = {
	name: Events.InteractionCreate,
	async execute(interaction) {
		if (!interaction.isChatInputCommand()) return;

		const command = interaction.client.commands.get(interaction.commandName);

		if (!command) {
			console.error(`No command matching ${interaction.commandName} was found.`);
			return;
		}

		try {
			await command.execute(interaction);
		} catch (error) {
			console.error(`Error executing ${interaction.commandName}`);
			console.error(error);
		}
	},
};
```

### events/ready.js

```jsx
const { Events } = require('discord.js');

module.exports = {
	name: Events.ClientReady,
	once: true,
	execute(client) {
		console.log(`Ready! Logged in as ${client.user.tag}`);
	},
};
```

### deploy-commands.js

```jsx
const { REST, Routes } = require('discord.js');
require('dotenv').config()
const fs = require('node:fs');

const commands = [];
// Grab all the command files from the commands directory you created earlier
const commandFiles = fs.readdirSync('./commands').filter(file => file.endsWith('.js'));

// Grab the SlashCommandBuilder#toJSON() output of each command's data for deployment
for (const file of commandFiles) {
	const command = require(`./commands/${file}`);
	commands.push(command.data.toJSON());
}

// Construct and prepare an instance of the REST module
const rest = new REST({ version: '10' }).setToken(process.env.TOKEN);

// and deploy your commands!
(async () => {
	try {
		console.log(`Started refreshing ${commands.length} application (/) commands.`);

		// The put method is used to fully refresh all commands in the guild with the current set
		const data = await rest.put(
			Routes.applicationGuildCommands(process.env.CLIENT_ID, process.env.GUILD_ID),
			{ body: commands },
		);

		console.log(`Successfully reloaded ${data.length} application (/) commands.`);
	} catch (error) {
		// And of course, make sure you catch and log any errors!
		console.error(error);
	}
})();
```

### commands/ping.js

```jsx

const { SlashCommandBuilder } = require('discord.js');

module.exports = {
	data: new SlashCommandBuilder()
		.setName('ping')
		.setDescription('Replies with Pong'),
	async execute(interaction) {
		await interaction.reply(`Pong!`);
	},
};
```


If you're looking to learn more about building a bot using Discord.js, head on over to [egghead.io](https://egghead.io/courses/build-a-book-club-bot-with-discord-js-501f5be9?af=bfqdmx) where I've created a whole video course on the subject!

How to create a discord bot from scratch.

Create a Book Club Bot using Discord.js v14

Highlights from Sam Julien's book Getting Started in Develop Relations

All Posts

Create Responsive Web Pages using Bootstrap
Feb 04 2024
Use Bootstrap's grid system to create responsive web pages.

Add Local or Custom Fonts to Next.js
Feb 04 2024

Add Watermarks to Images using Cloudinary
Jan 07 2024
Add watermarks to images using Cloudinary and their URL Generator

Dealing with Anxiety
Apr 21 2023
A list of actions I take to help lower my anxiety

Informational Interview with Web Developers
Apr 13 2023
A summary of notes from interviewing well established developers

Create a Book Club Bot using Discord.js v14
Mar 22 2023
How to create a discord bot from scratch.

Getting Started in Develop Relations Notes
Jan 21 2023
Highlights from Sam Julien's book Getting Started in Develop Relations

All Posts

Create Responsive Web Pages using BootstrapFeb 04 2024Use Bootstrap's grid system to create responsive web pages.

Add Local or Custom Fonts to Next.jsFeb 04 2024

Add Watermarks to Images using CloudinaryJan 07 2024Add watermarks to images using Cloudinary and their URL Generator

Dealing with AnxietyApr 21 2023A list of actions I take to help lower my anxiety

Informational Interview with Web DevelopersApr 13 2023A summary of notes from interviewing well established developers

Create a Book Club Bot using Discord.js v14Mar 22 2023How to create a discord bot from scratch.