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.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the The newline Guide to Full Stack Comments with Hasura and React course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to The newline Guide to Full Stack Comments with Hasura and React, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course The newline Guide to Full Stack Comments with Hasura and React

  • [00:00 - 00:11] Hello and welcome to the new line guide to first-act comments with Hasura and GraphQL. I'm Alexandra and I was previously a tech leader at Hasura and currently I'm leading the development of Beats.js.

    [00:12 - 00:19] So what is the course about? In this course we're going to explore how to implement a commenting system and add it to a website.

    [00:20 - 00:31] Along the way we're going to learn about databases, GraphQL, Hasura, building UI components with React and TypeScript and a few other things. You may wonder why comments.

    [00:32 - 00:45] Many developers would like to add a comment section for their website or blogs to gather feedback from their visitors. While it's possible to use existing hosted solutions, they are mostly paid and imposed their fixed UI.

    [00:46 - 00:53] 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.

    [00:54 - 01:06] By the end we'll have a commenting system added to a website and comment stored in a database managed by Hasura. We'll also publish the fetching and adding comments logic as a library to NPM.

    [01:07 - 01:13] What is this course mission? The goal of this course is to empower front-end developers to build their own full-stack solutions.

    [01:14 - 01:26] By teaching how to add a comment switch to a website, we strive to make this knowledge transferable to other similar problems that require a database and integration from a front-end application. This course is paid into four modules.

    [01:27 - 01:42] In the first module, we're going to explore how to add a Gatsura instance, how to work with GraphQL and how to integrate with Hasura from the front-end application. In the second module, we're going to implement a comment system in the front- end application.

    [01:43 - 01:56] In the third module, we're going to extend our implementation and add more functionalities. In the last fourth module, we're going to publish a library to NPM and we're going also to add various customization.

    [01:57 - 02:01] Our text tag is as follows. On the front-end, we have React and TypeScript.

    [02:02 - 02:11] We'll be implementing comments UI and backend integration logic in a React application written in TypeScript. For the database, we're going to use Postgres.

    [02:12 - 02:20] And this is where we'll be storing our comments. For the backend, we're going to use Hasura, which will generate GraphQL APIs from the database.

    [02:21 - 02:31] And GraphQL, so as I mentioned before, Hasura generates GraphQL APIs, so we're also going to use GraphQL from the front-end to communicate with Hasura. Who is this course for?

    [02:32 - 02:40] This course is for React developers who want to learn how to add full stack components to their websites. This course assumes a basic React knowledge.

    [02:41 - 02:51] You should be fairly familiar with React components and be confident in implementing them. You also should be familiar with U-State and U-C effect React hooks.

    [02:52 - 02:54] So let's get started. See you in the next lesson.

    [02:55 - 03:01] And in the meantime, if you have any questions or if you want to leave us some feedback, please join us on Discord in the new line channel.