Course Introduction

Introduction

Introduction to GraphQL

Introduction to Hasura

Creating the comments table

Storing comments with Hasura

Sample blog introduction

Creating a React hook and fetching the comments

Implementing UI for comments and a new comment form

Adding new comments with a GraphQL mutation

Testing React hooks and components

Implementing a comments system

Optimistic updates

Adding pagination

Extending the comments system functionality

Publishing useComments hook to NPM

Require manual approval before displaying comments

Bonus

Summary

react

next.js

### The newline Guide to Full Stack Comments with Hasura and React

Build and implement a comprehensive commenting system for your website using Hasura and React.  We’ll use the commenting feature to teach technology concepts like Hasura with appropriate authorization, optimistic updates for a more responsive UI, pagination, and publication of library in NPM.

### Why this course

Many developers would like to add a comments section to their website or blog for users to post comments or hold discussions. While it's possible to use existing hosted solutions such as Disqus or Facebook Comments, they often charge a fee and impose their UI leaving little to no control for modifications or customization. 

Another option is to build your own from scratch — which is what we'll do in this course. We’ll use Hasura, which generates GraphQL API from a database so that the backend part is as easy and the least time-consuming as possible. Along the way, we’re going to learn about databases, GraphQL, building UI components with React and TypeScript, and more.
By the end of this course, you’ll have a commenting system added to a website we’ve called, Why comments?, with all comments stored by Hasura. We'll also publish the fetching and adding comments logic as a library to NPM.

This course focuses on building a commenting widget, however, the skills you’ll acquire will allow you to build any fullstack widget you can think up for your application.  You’ll be able to contribute to fullstack React, GraphQL, and Hasura projects at work, in open source, or your own projects. You'll discover that this stack not only eliminates the need for having large teams of backend developers, but it lets your projects move faster.

### Your Instructors

Hi, I'm Aleksandra, and I'm your instructor for this course. I’m the former tech lead of Hasura console and lead maintainer of Bliz.js. This course combines my knowledge in a few areas such as TypeScript, React, Hasura, GraphQL, and general application development.

Build and implement a comprehensive commenting system for your website using Hasura and React.  We’ll use the commenting feature to teach technology concepts like Hasura with appropriate authorization, optimistic updates for a more responsive UI, pagination, and publication of library in NPM.

The newline Guide to Full Stack Comments with Hasura and React

Implementing pagination and optimistic updates

Importance of tests, and how to test React components

Welcome to Newline Guide to Fullstack Comments with React and Hasura! In this
course, we'll explore how to implement a commenting system and add it to a
website. Along the way, we're going to learn about databases, GraphQL, Hasura,
building UI components with React and TypeScript, and a few other things.

Why comments? Many developers would like to add a comments section for their
websites or blogs to gather feedback from their visitors. While it's possible to
use existing, hosted solutions, they are mostly paid and impose fixed UI. We
also have little to no control over it.

Another option is building it from scratch — and this is what we're going to do
in this course. By the end, we'll have a commenting system added to a website
and comments stored in a database managed by Hasura. We'll also publish the
fetching and adding comments logic as a library to NPM.

The goal of this course is to empower you, a frontend developer, to build your own
full-stack solutions. By teaching how to add a comments widget to a website,
we'll strive to make this knowledge transferable to other similar problems that
require a database and integration from a frontend application.

---
title: Course Introduction
description:
  What are we going to build? During this lesson, you'll get to know more about
  the course, the tech stack, and what you're going to learn.
role: "INTRODUCTION"
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/k3no5bmtcp
---

Welcome to Newline Guide to Fullstack Comments with React and Hasura! In this
course, we'll explore how to implement a commenting system and add it to a
website. Along the way, we're going to learn about databases, GraphQL, Hasura,
building UI components with React and TypeScript, and a few other things.

Why comments? Many developers would like to add a comments section for their
websites or blogs to gather feedback from their visitors. While it's possible to
use existing, hosted solutions, they are mostly paid and impose fixed UI. We
also have little to no control over it.

Another option is building it from scratch — and this is what we're going to do
in this course. By the end, we'll have a commenting system added to a website
and comments stored in a database managed by Hasura. We'll also publish the
fetching and adding comments logic as a library to NPM.

What are we going to build? During this lesson, you'll get to know more about the course, the tech stack, and what you're going to learn.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

The newline Guide to Full Stack Comments with Hasura and React

Welcome: Introduction

Introduction:

Start Here

Introduction: (3:03)

Course Introduction

Module 0: Storing comments with Hasura

Lesson 1: (9:21)

Introduction to GraphQL

Lesson 2: (10:35)

Introduction to Hasura

Lesson 3: (6:03)

Creating the comments table

Module 1: Implementing a comments system

Lesson 1: (4:56)

Sample blog introduction

Lesson 2: (9:32)

Creating a React hook and fetching the comments

Lesson 3: (5:43)

Implementing UI for comments and a new comment form

Lesson 4: (3:51)

Adding new comments with a GraphQL mutation

Lesson 5: (9:20)

Testing React hooks and components

Module 2: Extending the comments system functionality

Lesson 1: (3:16)

Optimistic updates

Lesson 2: (4:18)

Adding pagination

Module 3: Bonus

Lesson 1: (3:55)

Publishing useComments hook to NPM

Lesson 2: (2:52)

Require manual approval before displaying comments

Module 4: Summary

Lesson 1: (2:35)

Summary

Course Introduction

This course mission#

Outline#