HOME > Development > Create Chatbot for Website with React and Node.js

Create Chatbot for Website with React and Node.js

  • Development
  • Apr 30, 2025
SynopsisCreate Chatbot for Website with React and Node.js, available...
Create Chatbot for Website with React and Node.js  No.1

Create Chatbot for Website with React and Node.js, available at $64.99, has an average rating of 4.35, with 111 lectures, based on 668 reviews, and has 5557 subscribers.

You will learn about Have an intelligent chatbot build in a website Have a demo chatbot that they can tweak and suit to their needs Learn t use DialogFlow Create a custom chatbot This course is ideal for individuals who are everyone who wants to build a chatbot for the page or has at least a basic programming skills (nodejs & react) or everyone who is interested in conversational commerce It is particularly useful for everyone who wants to build a chatbot for the page or has at least a basic programming skills (nodejs & react) or everyone who is interested in conversational commerce.

Enroll now: Create Chatbot for Website with React and Node.js

Summary

Title: Create Chatbot for Website with React and Node.js

Price: $64.99

Average Rating: 4.35

Number of Lectures: 111

Number of Published Lectures: 109

Number of Curriculum Items: 113

Number of Published Curriculum Objects: 111

Original Price: 149.99

Quality Status: approved

Status: Live

What You Will Learn

  • Have an intelligent chatbot build in a website
  • Have a demo chatbot that they can tweak and suit to their needs
  • Learn t use DialogFlow
  • Create a custom chatbot
  • Who Should Attend

  • everyone who wants to build a chatbot for the page
  • has at least a basic programming skills (nodejs & react)
  • everyone who is interested in conversational commerce
  • Target Audiences

  • everyone who wants to build a chatbot for the page
  • has at least a basic programming skills (nodejs & react)
  • everyone who is interested in conversational commerce
  • In this course, you will build a chatbot for a Webpage. We’ll useNode.js and React for programming and GIT for deploying and version control. The bot will be hosted on Heroku, but you can simply host it anywhere else where they support Node.js. We’ll use DialogFlow to process natural language.DialogFlow will help us understand what users want.

    In the course, we’ll be building a sample chatbot. Its purpose is only to show you how things work. Our bot on the page will help us sell products. It will give recommendations and measure demand.

    In the process of building this chatbot, you’ll learn all that is needed to build a great bot. To get the most out of the course, you can work on this sample bot, and in the end, tweak it to suit your needs.

    You need to have at least basic knowledge of Node.js and React to start with this course. For versioning, we use GIT; therefore, you need to be familiar at least with basic git commands.

    To make it easier for you, I’ve added git commits with changes to every video that has a change in the code. This way, you can compare your code to mine. And you won’t lose time debugging. And remember for any questions I’m available in the Questions and answers. You are not alone.

    And remember, I’LL BE THERE FOR YOU.

    The bot will be able to remember things, that isstore information into a databaseor connect to other API services. I’ll show youdifferent implementations so that you can play and find out what suits you most.

    At the end of the course, you’ll have a demo chatbot that you can tweak and tailor to your needs.

    My name is Jana Bergant, and I’m a developer with over 20 years of experience. I’m an IT instructor teaching people new tech skills. Over 17000 people are already taking my course.

    I help all my students at every step of development. And I’ll be here for you!

    Let me tell you a bit about every section of this course.

    In the first section, we’ll take an overview of the app and get familiar with the tech stack, which is the technology used in this course. We’ll look at application architecture and different ways we can implement it. We’ll go through every implementation. And I’ll take you through the development stages.

    The second section will introduce you to DialogFlow, a natural language processor, that we’ll use to understand what our visitors want from the chatbot. We’ll go through building blocks of DialogFlow. You’ll learn about agents, intents, entities, parameters, prebuild agents, and more.

    Then in the third section, we start building the server-side app for the chatbot. We’ll install the Express library and generate an express app. After we are trough with configuration, we deploy it to Heroku. To speed up the development process, we’ll set up a local development server called Nodemon.

    When you have a basic server-side app created, you’ll be able to connect it to DialogFlow. And that is what we’ll do in section 4.

    And frontend will be the next step. In the fifth section, weset up React, configure local servers, create a proxy for communicating with the backend. And we’ll develop components. Components for the page and for the chatbot. Our chatbot will begin to look like a chatbot in the 5th section.

    But we’ll polish it in the 6th section, where we’ll create rich messages for the chatbot like cards and quick replies. And also, we’ll go deeper into DialogFlow’s features, like follow up intents, contexts, events, and slot feelings. Features that make bot creation much easier and much friendlier!

    When our bot is polished, we can make it smarter. We want our bot to remember what the user says. Therefore we need to store information that we get from the user. In the 7th section, we’ll be saving to the database and also use what we know about the user in a conversation. To make the bot friendlier. We like if people remember our preferences, it is the same with bots.

    In the 8th section, I’ll show you a different way to implement handling actions. We’ll be using DialogFlow’s fulfillment. I’ll show you how to call fulfillment only for intents that need extra code to be run. Only for intents that need to get information from a database, or that need to call some other API, or maybe connect to a device.

    When we master fulfillment, we’ll deploy to Heroku. In the 9th section, we’ll take care of some extra configuration like routing, postbuild scripts for generating frontend; we’ll also go through the code and make sure all is as needed before we deploy.

    And finally, in the 10th section, I’ll show you how toconnect to DialogFlow straight from FrontEnd. To do that, we’ll need to make some changes to the architecture. I’ll tell you the benefits of every decision.

    After the course, you’ll have a demo bot that you can tweak and tailor to your needs. And you’ll have the knowledge to upgrade it.

    See you on the course!

    Jana

    -

    The last update of the course was on 27th February 2020

    I added DialogFlow mega agents

    Course Curriculum

    Chapter 1: Introduction / Course Overview

    Lecture 1: Introduction

    Lecture 2: App OverView

    Lecture 3: Tech-Stack

    Lecture 4: Behind the scenes – application architecture

    Lecture 5: Fulfillment Flow

    Lecture 6: Development stages

    Lecture 7: How to get help

    Lecture 8: Additional resources

    Chapter 2: DialogFlow introduction

    Lecture 1: DialogFlow Introduction / Create an agent

    Lecture 2: Google project / service accounts / agent settings

    Lecture 3: DialogFLow Intents Basics – Fallback and Welcome intent

    Lecture 4: DialogFLow Intents Basics – Developer defined Intents

    Lecture 5: DialogFlow Entities

    Lecture 6: Intents with parameters

    Lecture 7: Prebuild agents

    Lecture 8: Smalltalk

    Lecture 9: DialogFlow tutorial FREE ebook

    Chapter 3: Server Side App

    Lecture 1: Architecture Introduction

    Lecture 2: Install Express & Generate Express App

    Lecture 3: Heroku deployment configuration

    Lecture 4: Heroku deployment

    Lecture 5: Nodemon setup

    Chapter 4: Connect Server Side app & DialogFlow

    Lecture 1: Introduction

    Lecture 2: Routes

    Lecture 3: DialogFlow module Authentication setup part 1

    Lecture 4: DialogFlow module Authentication setup part 2

    Lecture 5: Setting environment variables in Windows

    Lecture 6: Text query to DialogFlow with Async await

    Lecture 7: Chatbot module

    Lecture 8: Event query to DialogFlow

    Lecture 9: Encoding parameters

    Lecture 10: Config local & server / Heroku env variables

    Lecture 11: Deploy to Heroku / Test endpoints

    Lecture 12: Common errors when first deploying to Heroku

    Lecture 13: GRPC not working with node v12 WARNING!

    Chapter 5: FrontEnd – Client Side – React setup

    Lecture 1: FrontEnd – Client Side Introduction

    Lecture 2: React app Generation

    Lecture 3: Two servers for development

    Lecture 4: Proxy

    Lecture 5: Proxy upgrade

    Lecture 6: Components for the page – part 1

    Lecture 7: Components for the page – part 2

    Lecture 8: HTML & CSS with Materialize

    Lecture 9: Connect Server and Client

    Lecture 10: Add API calls to backend APP

    Lecture 11: Simple Message component

    Lecture 12: Welcome message

    Lecture 13: Enable text input from user

    Lecture 14: Scroll to last message rendered

    Lecture 15: Unique Session for visitors

    Chapter 6: Developing Frontend

    Lecture 1: Introduction

    Lecture 2: Cards Message in DialogFlow

    Lecture 3: Cards response from DialogFlow in React App

    Lecture 4: Card component

    Lecture 5: Render card galleries part 1

    Lecture 6: Render card galleries part 2

    Lecture 7: QuickReplies Message in DialogFlow

    Lecture 8: Quick replies components

    Lecture 9: Quick replies components implementation

    Lecture 10: Follow up intents

    Lecture 11: DialogFlow contexts

    Lecture 12: Quick replies test

    Lecture 13: DialogFlow events

    Lecture 14: Slot filling

    Lecture 15: Person Entity

    Lecture 16: Show / hide bot

    Lecture 17: Welcome on Shop – DialogFlow setup

    Lecture 18: Welcome on Shop – listen to navigation history

    Lecture 19: Chatbot – a pause between messages

    Chapter 7: Save data from conversation to database

    Lecture 1: Mongo db introduction

    Lecture 2: Mongo db setup

    Lecture 3: Mongoose Introduction

    Lecture 4: Add Mongoose to code

    Lecture 5: Where to catch and save registration

    Lecture 6: Mongoose model Classes

    Lecture 7: Saving registration

    Chapter 8: Fulfillment

    Lecture 1: Introduction to fulfillment

    Lecture 2: Ngrok for local fulfillment

    Lecture 3: Fulfilment setup

    Lecture 4: Fullfilment write to database

    Lecture 5: Fullfilment read from database

    Chapter 9: Deploying to Heroku

    Lecture 1: Dev vs Prod environment

    Lecture 2: FrontEnd routing on Server

    Lecture 3: Build script for client – postbuild script

    Lecture 4: Code optimisation before deployment

    Lecture 5: Deploying on Heroku

    Chapter 10: JavaScript client

    Lecture 1: JavaScript client introduction

    Lecture 2: JavaScript token generation

    Instructors

  • Create Chatbot for Website with React and Node.js  No.2
    Jana Bergant
    Web developer, IT instructor
  • Rating Distribution

  • 1 stars: 16 votes
  • 2 stars: 9 votes
  • 3 stars: 57 votes
  • 4 stars: 217 votes
  • 5 stars: 369 votes
  • Frequently Asked Questions

    How long do I have access to the course materials?

    You can view and review the lecture materials indefinitely, like an on-demand channel.

    Can I take my courses with me wherever I go?

    Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!