Learn Discord, React-router and Reactfire

We can use the Discord API to build bots, integrations, and extensions for the platform.

discord

The final step we need to take is to deploy our Discord bot to production. We'll be using using GitHub and Railway.app. 

[Railway.app](https://railway.app/) is a deployment platform that allows us to deploy our bot to the cloud. They give you $5 or 500 hours of free usage per month, which probably won't last you the full month, but it's a great way to get started.

Deploy a Discord.js Bot for Production

Disabling buttons can be useful in Discord servers to prevent users from clicking on buttons that are no longer relevant. By disabling a button, you can inform users why the button is no longer clickable and avoid confusion or frustration.

By the end of this lesson, you will be able to create a button that will disable itself when a submissions for a book-club have closed.

Conditionally Disable a Custom Discord Button

Now, let's learn how to add roles to users in a Discord server using a Discord.js collector.

By the end of this lesson, you will be able to create a collector to gather users who click on a specific button, filter out users who do not have a certain role, and add a specific role to the users who meet the filter criteria.

Add Roles to Users using a Discord.js Collector

Let's now learn how to create dynamic channels and roles with our Discord bot.

We want to be able to create new roles and channels for the book clubs and their attendants that we create in our server.

We'll be using methods from the `interaction` object to create the role and channel. And, we'll make sure to create both the role and channel each with the correct permissions.

Create Dynamic Channels and Roles with a Discord Bot

In this lesson, you will learn how to create custom buttons in Discord.js using `ActionRowBuilder` and `ButtonBuilder`. You will also learn how to style and add text to the button using `ButtonStyle` and the `setEmoji` method.

We'll need to make these buttons for our book-club message to give users the ability to let us know that they want to be a part of the club. 

`ActionRowBuilder` and `ButtonBuilder` are important, here's what they do:

`ActionRowBuilder` is used to create a row of buttons or other action components in a Discord message. This class provides methods for adding buttons, text, and other components to the row, as well as methods for formatting the row.

`ButtonBuilder` is used to create individual buttons within the `ActionRowBuilder`. This class provides methods for setting the text, emoji, style, and other properties of the button.

By using them both, we are able to create a row of buttons exactly how we want them to look!

Create Custom Discord Buttons with ActionRowBuilder and ButtonBuilder

In this lesson, you will be learning how to display relative time in a Discord embedded message using the Unix timestamp. 

We'll be adding a countdown timer to an embedded message to show the time remaining until submissions to a book-club close.

By the end of this lesson, you will have the ability to convert hours into seconds, add it to the current time in the Unix timestamp, and create a variable to store the wait time in seconds to display the short date time and relative time in Discord.

Display Relative Time in a Discord Embedded Message

Let's convert our Discord bot to respond with embedded messages.

Embedded messages in Discord are a great way to make your bot's responses look a lot more visually appealing!

We'll create a new command called `/bookclub` that will take in a book title, an author, and the number of hours until the submission deadline from the user. Then, it will `reply` with an object that Discord will automatically convert into an embedded message.

Have a Discord Bot Respond with Embedded Messages

In this lesson, you will learn how to build custom commands that can receive user input.

As a Discord user, you may have noticed that many servers use custom commands to provide information, moderate the chat, or enhance the overall user experience. By learning how to build these custom commands, you'll be able to create a more interactive and dynamic Discord server for your community!

We'll start by introducing the basics of slash commands and how they can be used in a Discord app. You'll then learn how to create a simple command that sends a response back to the user who triggered the command. 

We'll also cover how to make your commands more dynamic by adding arguments.

By the end of the lesson, you'll understand how to receive and respond to input from users and be able to build more sophisticated bots that can interact with your users in meaningful ways.

Receive and Respond to Input From Users with Discord.js Slash Commands

Now that our files are set up, we can now write our first Discord.js slash command.

By create custom commands, we extend the functionality of our Discord bot and can make it much more fun and interesting. 

We'll start by creating a new file in the commands folder, importing the slash command builder, and defining the data and execute sections of the command. We'll then register the command and test it in the Discord application.

By the end of this lesson, you'll have a solid understanding of how to create custom slash commands in Discord.js. So get ready to dive in and start building!

Create Your First Discord.js Slash Command

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

In this lesson, you will be setting up the necessary files for your first Discord.js slash command. The goal of this lesson is to give you a solid foundation to build upon as you create your own custom commands for Discord.

We will be importing and using `fs` and `path` to read from the command and events directories, using `Collection` from Discord to store and retrieve your commands, and creating the `Client` using the `GatewayIntentBits. 

Also, we are going to deploy your commands and set up events to execute them properly once they're written.

Setup for Discord.js Slash Commands

Using the Discord.js library, we're going to send our first message command! 

Let's create a classic "hello world" message command and learn how to create a new client instance, enable the necessary gateway intents, listen for specific events, and respond to those events by accessing a "message object" and then sending a message back.

Create your first Discord.js Bot Message Command

Now that we've set up a bot on our Discord server, let's write some code to get it do some fun stuff.

We're going to set up a new project and use the `Discord.js` library. While setting up this project you'll learn how to properly configure the client and log in to your bot by passing a Discord API token to `client.login`.

Once the project is set up we'll send our first event using the `client.once` and event, and set up some scripts so that we can start the bot using yarn.

Throughout the lesson, you will be introduced to important concepts and best practices for building Discord bots. By the end of the lesson, you will have a basic understanding of how to create a simple bot and be ready to continue building

Send your first Discord.js Bot Event 

In this lesson, you'll learn how to create and configure a Discord bot.

You will see how to create the bot, select the options you will need, give it the correct amount of permissions, and add it to your server.

Here is the link to the Discord Developer Portal: [https://discord.com/developers/applications](https://discord.com/developers/applications)

Create and Configure a Bot using the Discord Developer Portal

You'll be learning about collectors, sending custom messages, creating channels and roles, all dynamically. All of the different topics I cover in this course will be a guide for you to use each of these concepts individually so I highly encourage you to take what you learn to build something new and tell me what you build! 

I'll cover how to setup your bot in the discord developer portal then we'll set it up locally. I'll go over how to create a simple chat bot then go into much more detail on how to create slash commands. There is a break on lesson 5 where I'll go over some files that I've copy over from the Discord.js guide. There will be a template you can clone if you don't want to copy the files over yourself but I'll be running through each of them individually so you can understand what's going on.

The Discord.js guide is a super helpful resource when you need more information on specific topics you're struggling with. Discord.js also has a massive Discord channel that's a great place to ask questions that you just can't figure out yourself. The last resource is the Discord status page to check for things like api outages and other issues on Discord's side. All three of these resources will be linked down in the description. 

With that said, thank you for taking my course and let's get to it. 

Resources: 
- Discord.js Guide
    - [https://discordjs.guide/](https://discordjs.guide/)
- Discord Channel
    - [https://discord.com/invite/djs](https://discord.com/invite/djs)
- Discord Status Page
    - [https://discordstatus.com/](https://discordstatus.com/)

Introduction to Build a Book Club Bot with Discord.js

Build a Book Club Bot with Discord.js

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Restricting access to content that is delivered client-side in a Gatsby site takes a few steps. We use Netlify Identity to handle user authentication and reach router to build our auth-restricted client-side application.

Using Netlify Identity to control access to a Gatsby client-side dashboard route

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Routes are some times better served as a modal. If you have a modal (like a login modal) that needs to be routeable and appear on all pages you may need to use query params. Will explore how to render a route all the time and use query params to control when it's content renders

Create a Query Parameter Modal Route with React Router

In this lesson we'll explore how to test that an async form submission successfully happened using Jest. We'll also take advantage of react-testing-library to render our react components to a fake dom. We'll use `MemoryRouter` to mock what a browser would normally do in the event of a transition, and create a fake component route to confirm that the submission successfully redirected us to the url we wanted.

Test Successful Async Form Submissions with React Router

In this lesson we'll use the `matchPath` function exported by react-router to find active nested routes inside of a parent component. This technique can be used for comparing routes outside of a React component, or even inside of life cycle methods to do data loading.

Use matchPath to Match Nested Route Paths in Parent Routes with React-Router

In this lesson we'll show how the Link component `to` prop can receive an object. This allows  us to pass `state` to the route. With the nav state we destructure off of location we can determine if a user wants to open a modal or on a cold visit show an image embedded in the page.

Create a Modal Route with Link and Nav State in React Router

In this lesson we'll create a protected route just for logged in users. We'll combine a Route with a render prop and use a loggedIn prop to determine if the route should be allowed to be accessed. Finally we'll use nav state to preserve the location the user visited and redirect them back to the protected route once they login.

Create a ProtectedRoute Component in React Router

In this lesson, you'll learn how to enhance the accuracy of components generated by Cursor Composer by aligning your project's package.json with Cursor's rules. We'll guide you through extracting the list of installed packages from your package.json and incorporating them into your .cursorrules file, along with brief descriptions of their functionalities. By providing Cursor with this contextual information, you'll enable it to generate components that are more precise and functional on the first attempt. The lesson includes demonstrations of component generation both with and without these enhancements, highlighting the improvements in accuracy and efficiency.

Boost Cursor Composer Accuracy: Integrating package.json with Cursor Rules

Speed up your bug-fixing process dramatically with Cursors Composer. Take a warning from your logs, search for relevant terms, then seamlessly import both the warning and search results into Composer. Add documentation and apply fixes to all search results in one go. This streamlined workflow resolves multiple issues rapidly, saving valuable development time.

Batch Fix Every File in Search Results with Cursor's Composer

 We map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the table. This allows us to add more columns to our pokemon table.

Fetch and display row details with Promise.all in Tanstack Table

map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the tanstack table

Create a custom hook to fetch remote data by passing a promise to the React 19 `use` hook. Then render this data in Tanstack Table by memoizing the results and passing them to `useReactTable`.

Render remote data in a Tanstack Table with React 19's use hook and a promise

Create a custom hook using React 19’s use to fetch data with a promise. Render it in a Tanstack Table by memoizing and using useReactTable.

You know when you're deep in the code trenches and need someone to challenge your assumptions? That's exactly what this is about.

Instead of waiting for someone to poke holes in your master plan, you can paste that strategy straight into AI Studio and let it pressure test your ideas. We're talking about using this tool to validate everything from your feature proposals to your ambitious refactoring strategies.

The real magic happens when you hit that microphone button. Now you're in a real-time verbal sparring match. It's like rubber duck debugging but the duck actually pushes back and makes you defend every architectural decision you've made.

Here's the workflow:
1. Drop your master plan into the system instructions
2. Tell the AI to challenge every assumption
3. Hit that mic and defend your choices like you mean it
4. Watch your plan either emerge stronger or get rightfully dismantled

This approach is perfect when you're:
- Stuck in your own head with a complex problem
- Need to validate if your approach holds water
- Want to catch edge cases before they catch you
- Looking for opportunities you might have missed because you're too close to the code

It's like having a senior dev on call 24/7, ready to challenge your ideas and push you to think deeper about your solutions.

Now go forth and get your ideas challenged. Your projects will thank you for it.


An Uncomfortable and Challenging Conversation with AI Studio

In this lesson, you'll learn how to effectively brainstorm your project ideas before working with AI agents. We'll cover:

1. The importance of having a clear plan before starting work with AI agents
2. Using traditional brainstorming techniques to gather your thoughts
3. Leveraging video recording to capture your brainstorming session
4. How to review and analyze websites for inspiration
5. Documenting likes, dislikes, and potential features for your project
6. Using AI tools (like AI Studio) to organize and process your recorded brainstorming session

The lesson emphasizes a modern approach to brainstorming that combines traditional techniques with video recording, making it easier to later process your ideas through AI tools. This method helps ensure that no ideas are lost and that your thoughts can be effectively organized by AI for future reference.

How to Brainstorm Your Project Features to Prepare for AI Agents

fast-check allows us to create composite generators that suit our testing needs. We'll generate two numbers to create a point simulating an X and Y and assert that the distance should always be greater than or equal to 0.

Generate composite objects with fast-check fc.record

Just using fast-check by itself can make you tests verbose and tough to read. Lucky for us there are many integrations with fast-check such as the `@fast-check/jest` package that will help remove some boilerplate from our test.

Tidy up your test with @fast-check/jest

Many people share .cursorrules files, but trying to craft your own from scratch is a huge pain. Instead, this lesson shows you how to grab ALL community-created .cursorrules files to build a custom rule set for your projects. We'll use Gitingest and Google AI Studio to gather these examples and generate an awesome starting point customized to your specific project.

Generate Custom .cursorrules for Your Project Based on Community Examples

The GitHub CLI allows you to search issues and filter on different criteria like amount of comments. This allows you to search for real-world situations and pains/solutions people have using different technology. 

With the GitHub CLI in hand we'll drop 100s of issues as context in Googles AI Studio and have Gemini determine the 10 most frequently asked questions. This will give us a sense of how people use a library and where people get hung up.