Learn Discord, Ngrx and Storybook

Beginner’s Guide to Storybook 7 with React

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

A Beginner’s Guide to Storybook 7 with React

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

discord

Build a Book Club Bot with Discord.js

***Note: RxJS imports have changed since the publication of this course. The concepts being taught on RxJS are still applicable.**

Angular has many built-in features for working closely with RxJS to help you build entirely reactive applications. This course will teach you how to use Angular with RxJS. We will learn how to use the ngrx/store library to manage state in a clean, reactive "Redux style."

This course assumes you've got a working knowledge of Angular and reactive programming with RxJS. If you don't, you might want to watch the following courses to get you up to speed! 
- [Get Started with Angular](https://egghead.io/courses/get-started-with-angular) 
- [Introduction to Reactive Programming with RxJS](
https://egghead.io/series/introduction-to-reactive-programming). 
- [Step by Step Async Programming with RxJS](https://egghead.io/series/step-by-step-async-javascript-with-rxjs) 
- [Getting Started With Redux](https://egghead.io/series/getting-started-with-redux), a course by Redux's, Dan Abramov.

We also have Intermediary Angular courses if you'd like to acquire more in-depth knowledge. 
- [Dependency Injection](https://egghead.io/courses/angular-2-dependency-injection-di-explained
- [Components, Directives](https://egghead.io/courses/building-angular-components)
- [Forms](https://egghead.io/courses/intro-to-angular-forms)
- [Router](https://egghead.io/courses/intro-to-angular-router)
- [Animating Web Apps](https://egghead.io/courses/animate-angular-web-applications)



Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Build Redux Style Applications with Angular, RxJS, and ngrx/store

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

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 

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

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

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

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

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 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

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

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

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

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

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

Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.

Storybook helps you document components for reuse and automatically visually test your components to prevent bugs. Extend Storybook with an ecosystem of addons that help you do things like fine-tune responsive layouts or verify accessibility.

Storybook integrates with most popular JavaScript UI frameworks and (experimentally) supports server-rendered component frameworks such as Ruby on Rails.

storybook

Discover Storybook 7's revolutionary approach to UI design and development in collaborative environments. Discover why it's the top choice for teams crafting high-quality user interfaces.

Get Started with Storybook 7 — Course Introduction

> **NOTE: There is a bug in the sandbox command that may result in Storybook@8 (beta) to be installed.**
>
>To bypass this issue, use this command instead: `npx storybook@latest sandbox --branch=main`
>
>This version of the command uses the main branch, which is currently the latest v7. My hope is that the versioned sandbox command is fixed by the time v8 goes out. Once resolved, the command in the video is preferred.

Launch into Storybook with a one-command setup using npx storybook sandbox. Instantly create a Storybook environment tailored to your preferred framework and language, perfect for immersive learning and exploration.

Create a Storybook Sandbox (Starter project)

Navigate your component library with ease using Storybook's intuitive sidebar. Understand its hierarchical organization of categories, folders, and components. And filter components quickly with global search.

Navigate Storybook Sidebar

The Storybook Addons Toolbar provides one-click access to essential visual debugging tools. Discover how Essential Addons — zoom, background color, measure, outline, and viewport — help you debug and refine components.

Manipulate the Storybook Canvas with the Addon Toolbar

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

After this course, you should be able to leverage SolidStart to build your Solid applications.

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

Getting Started with SolidStart

Bootstrap is an incredibly popular CSS framework designed to make your website look great on mobile and desktop.

By the end of this course, you'll be familiar with many of the popular classes and components that Bootstrap uses to apply in your own projects.

For each feature you build in the course, you'll get a sense for what the relevant classes do for those components and links to documentation for further exploration.

For the course demo application, we will analyze the landing pages of Microsoft and Apple to identify common components that are implemented. When these are identified, you'll implement these components yourself with Bootstrap.

You'll build several common UI elements such as a nav bar, a carousel of images, Cards, and Forms.

Through building these components, you'll understand what is behind the different classes Bootstrap gives you and get familiar with how it exposes flex and grid layout for you.

Cascading Style Sheets bring order and beauty to our applications.

Create Professional Responsive Websites using Bootstrap

This course is perfect for those looking for a lightweight alternative to NgRx Store that scales effortlessly.

Scalable Signals Angular Architecture with NGRX Signal Store

Learn how the latest JavaScript features can help you improve your codebase. 

Learn the Latest ECMAScript Features (ES2024, ES2023, ...)

course repository: https://github.com/ducin/egghead-typescript/tree/brand-types-value-objects

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Domain Data Modelling using TypeScript Aliases, Brand Types and Value Objects

**Note:** This course is being actively developed and more lessons will be added in the future.

Cursor is an AI-enhnaced code editor that allows you to call upon the robots to refactor or stub out functions for you with natural language. 

In this course, John will show you workflows that will save you time and effort by utilizing the features such as its mult-line editing and context.

In particular, by giving Cursor's AI the proper context, whether that's lines of code or multiple files, you'll get better output when trying to extend or refactor logic that's present.


Bite-size video tutorials for badass web developers.

egghead

Productive Developer Workflows with AI Enhanced Cursor IDE

Learn the fundamentals of React Query by going through the basic API and then implementing search in an employee tracking app.

Simplify State Management with React Query

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Create Interactive 3D Experiences with TresJS

You've seen that Angular signals are here, and know that signal-components are coming up.

This marks a paradigm-shift towards reactive programming in Angular.

Are you ready?

What if you could start learning signals and feel pleased with your progress? And reach a point where you feel confident when using signals in production?

And feel ready when signal-based components come?

Changes are coming, and you can get ahead of them.

By taking this cousre you will learn how to:

- Create computed signals
- Share your signals in services
- Use and cleanup signal effects
- Turn signals into observables and vice versa
- ... and more

In 52 minutes over the course of 20 bite-sized lessons, you'll learn everything you need to know to take advantage of signals now and be prepared for signal-based components!

Modernize State Management in Angular with Signals

Get started with Supabase on your machine

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

Search

Search Results