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.
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.
What You Will Learn
Building GraphQL APIs with Hasura
Database modeling with PostgresSQL
How to implement a custom React hook
Optimistic updates for responsive UI
Implementing pagination and optimistic updates
Building comments UI with Tailwind
Importance of tests, and how to test React components
How to publish a library to NPM
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.
Course Content
Introduction
Course Introduction
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.
INTRODUCTION
3:03 minutes
Storing comments with Hasura
Introduction to GraphQL
In this lesson, we'll cover the basics of GraphQL; what it is and how to use it. We'll also understand how it fits the course's subject.
LESSON
9:21 minutes
Introduction to Hasura
We'll learn about Hasura and play a bit with its features and writing GraphQL queries. This knowledge will let us move on to the commenting system!
LESSON
10:35 minutes
Creating the comments table
In this lesson, we'll create a comments table and learn a bit about databases along the way.
LESSON
6:03 minutes
Implementing a comments system
Sample blog introduction
We'll get to know a sample blog application that we'll be adding a comments section to. We'll also go over the setup and explain the directory structure.
LESSON
4:56 minutes
Creating a React hook and fetching the comments
In this lesson, we'll create a React hook that will fetch the comments from the database. We'll cover how to create a custom hook as well as how to integrate with Hasura.
LESSON
9:32 minutes
Implementing UI for comments and a new comment form
In this lesson, we'll add a UI for the comments section and a new comment form. We'll also display the comments that we get from the React hook.
LESSON
5:43 minutes
Adding new comments with a GraphQL mutation
This lesson will show how to extend the hook to handle adding new comment logic. It will cover adding a new GraphQL mutation and using it from the frontend application.
LESSON
3:51 minutes
Testing React hooks and components
This lesson introduces many things — React Testing Library, Jest, MSW, and we'll get a sneak peek of testing React Components and React hooks.
LESSON
9:20 minutes
Extending the comments system functionality
Optimistic updates
We'll learn about optimistic updates and add them to our hook's implementation to improve the user experience.
LESSON
3:16 minutes
Bonus
Publishing useComments hook to NPM
This lesson will teach you how to publish a React hook as an NPM library.
LESSON
3:55 minutes
Require manual approval before displaying comments
Right now, all the comments are public instantly. However, we may want to review the comments before showing them to other users. This is what we'll cover in this lesson.
LESSON
2:52 minutes
Summary
Summary
We just completed the course! Let's see what's next and how you can use the new knowledge.
LESSON
2:35 minutes
Your Instructors
Aleksandra Sikora
Frequently Asked Questions
Who is this course for?
This course is for React developers who want to learn how to add fullstack components to their websites.
Are there any prerequisites?
Yes. This course assumes a basic React knowledge — you should know what a React component is and be reasonably confident in implementing one. You should also be familiar with useState, and useEffect React hooks.
What if I need help?
You can ask us questions through the commenting section in the course, or anytime through the community Discord channel #fullstack-comments-with-hasura or by sending us a direct message.
