Create Chatbot for Website with React and Nodejs

Create a chatbot for webpage with React and Node.js. Teach chatbot to sell products, give recommendation, measure demand
Create Chatbot for Website with React and Nodejs
File Size :
5.23 GB
Total length :
10h 11m



Jana Bergant


Last update




Create Chatbot for Website with React and Nodejs

What you’ll 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

Create Chatbot for Website with React and Nodejs


You need a basic knowledge of nodejs, react and GIT
IDE for writing code (Visual Studio code or Webstorm or Sublime or any editor you prefer and are used to)


In this course, you will build a chatbot for a Webpage. We’ll use Node.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 is store information into a database or connect to other API services. I’ll show you different 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, we set 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 to connect 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 2020I added DialogFlow mega agents


Section 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

Section 2: DialogFlow introduction

Lecture 9 DialogFlow Introduction / Create an agent

Lecture 10 Google project / service accounts / agent settings

Lecture 11 DialogFLow Intents Basics – Fallback and Welcome intent

Lecture 12 DialogFLow Intents Basics – Developer defined Intents

Lecture 13 DialogFlow Entities

Lecture 14 Intents with parameters

Lecture 15 Prebuild agents

Lecture 16 Smalltalk

Lecture 17 DialogFlow tutorial FREE ebook

Section 3: Server Side App

Lecture 18 Architecture Introduction

Lecture 19 Install Express & Generate Express App

Lecture 20 Heroku deployment configuration

Lecture 21 Heroku deployment

Lecture 22 Nodemon setup

Section 4: Connect Server Side app & DialogFlow

Lecture 23 Introduction

Lecture 24 Routes

Lecture 25 DialogFlow module Authentication setup part 1

Lecture 26 DialogFlow module Authentication setup part 2

Lecture 27 Setting environment variables in Windows

Lecture 28 Text query to DialogFlow with Async await

Lecture 29 Chatbot module

Lecture 30 Event query to DialogFlow

Lecture 31 Encoding parameters

Lecture 32 Config local & server / Heroku env variables

Lecture 33 Deploy to Heroku / Test endpoints

Lecture 34 Common errors when first deploying to Heroku

Lecture 35 GRPC not working with node v12 WARNING!

Section 5: FrontEnd – Client Side – React setup

Lecture 36 FrontEnd – Client Side Introduction

Lecture 37 React app Generation

Lecture 38 Two servers for development

Lecture 39 Proxy

Lecture 40 Proxy upgrade

Lecture 41 Components for the page – part 1

Lecture 42 Components for the page – part 2

Lecture 43 HTML & CSS with Materialize

Lecture 44 Connect Server and Client

Lecture 45 Add API calls to backend APP

Lecture 46 Simple Message component

Lecture 47 Welcome message

Lecture 48 Enable text input from user

Lecture 49 Scroll to last message rendered

Lecture 50 Unique Session for visitors

Section 6: Developing Frontend

Lecture 51 Introduction

Lecture 52 Cards Message in DialogFlow

Lecture 53 Cards response from DialogFlow in React App

Lecture 54 Card component

Lecture 55 Render card galleries part 1

Lecture 56 Render card galleries part 2

Lecture 57 QuickReplies Message in DialogFlow

Lecture 58 Quick replies components

Lecture 59 Quick replies components implementation

Lecture 60 Follow up intents

Lecture 61 DialogFlow contexts

Lecture 62 Quick replies test

Lecture 63 DialogFlow events

Lecture 64 Slot filling

Lecture 65 Person Entity

Lecture 66 Show / hide bot

Lecture 67 Welcome on Shop – DialogFlow setup

Lecture 68 Welcome on Shop – listen to navigation history

Lecture 69 Chatbot – a pause between messages

Section 7: Save data from conversation to database

Lecture 70 Mongo db introduction

Lecture 71 Mongo db setup

Lecture 72 Mongoose Introduction

Lecture 73 Add Mongoose to code

Lecture 74 Where to catch and save registration

Lecture 75 Mongoose model Classes

Lecture 76 Saving registration

Section 8: Fulfillment

Lecture 77 Introduction to fulfillment

Lecture 78 Ngrok for local fulfillment

Lecture 79 Fulfilment setup

Lecture 80 Fullfilment write to database

Lecture 81 Fullfilment read from database

Section 9: Deploying to Heroku

Lecture 82 Dev vs Prod environment

Lecture 83 FrontEnd routing on Server

Lecture 84 Build script for client – postbuild script

Lecture 85 Code optimisation before deployment

Lecture 86 Deploying on Heroku

Section 10: JavaScript client

Lecture 87 JavaScript client introduction

Lecture 88 JavaScript token generation

Lecture 89 Call DialogFlow from FrontEnd

Lecture 90 Response format

Lecture 91 Token and extra configuration to environment variables

Lecture 92 Generate token in nodejs

Lecture 93 Registration via fulfillment

Lecture 94 Publish the code

Section 11: Extra content – DialogFlow Q&A

Lecture 95 How to validate a parameter in DialogFlow

Lecture 96 How to call another intent from DialogFlow fulfillment

Lecture 97 How to prevent parameter validation loop in bots

Lecture 98 REGEXP entities

Lecture 99 Regex cheat sheet

Lecture 100 Allow automated expansion

Lecture 101 Fuzzy matching

Lecture 102 DialogFlow Mega Agents

Section 12: Sentiment analysis

Lecture 103 Sentiment analysis in a nutshell

Lecture 104 Sentiment analysis for a chatbot

Lecture 105 Common implementation scenarios in chatbot

Lecture 106 More about sentiment analysis

Section 13: Platforms, NLP & Libraries for Voice Bots & Chatbots

Lecture 107 Tools for chatbot and voice bot developers

Section 14: Conclusion

Lecture 108 Conclusion

Section 15: BONUS section

Lecture 109 Bonus Lecture: Coupons for my other course and email list

everyone who want’s to build a chatbot for the page,has at least a basic programming skills (nodejs & react),everyone who is interested in conversational commerce

Course Information:

Udemy | English | 10h 11m | 5.23 GB
Created by: Jana Bergant

You Can See More Courses in the Developer >> Greetings from

New Courses

Scroll to Top