Graphql With Nextjs - Build A Fullstack App From Scratch

Learn GraphQL and Next.js by building a full-stack application with NodeJS, Express, Apollo Server, Apollo Client.

What you'll learn

Learn GraphQL by building real-world NodeJS and NextJS application

Build a GraphQL server based on NodeJS, Express and Apollo Server

Handle authentication/authorization with JWT

Build flexible data schemas with GraphQL

Connect NextJS client application with Apollo Client to GraphQL server

Use GraphQL WebSocket Subscriptions to publish and consume messages in real time

Use TailwindCSS to style elements in a NextJS application

Learn how to build React apps with NextJS 14 and the App Router

Easily deploy NextJs app and GraphQL server

Requirements

Basic knowledge of Javascript and Express is required

No prior GraphQL knowledge is required

No prior NextJS knowledge is required

Description

This full-stack course focuses on developing backend APIs with GraphQL and connecting them to client web applications built with NextJS. It follows a hands-on, 'learn-by-doing' approach, with the entire course structured around building a full-stack web application. Concepts will be thoroughly explained as they are introduced.In this course, you'll learn to utilize GraphQL on both the server side and in client applications with practical examples featuring full-stack Typescript application. You'll be introduced to key GraphQL concepts, including schema definition, Queries, Mutations, and Subscriptions, as well as solutions to common requirements like handling authentication/authorization and client-side caching.In this course, we will cover and utilize key concepts of Next.js. You will learn how to connect a Next.js client application to a GraphQL server using the Apollo ecosystem.This course will cover:GraphQL concepts like schemas and resolvers.Creating and using GraphQL types, queries, mutations and subscriptions.Use Apollo GraphQL ecosystem on both server and client.Creating NextJS projects from the ground up & understanding these projects.Working with file-based routing in NextJS.Adding dynamic routes and catch-all routes in NextJS.TailwindCSS support for styling components.Deployment of NextJS client application and GraphQL server.By the end of this course, you will be capable of building a robust API with GraphQL, connecting it to a client application created with NextJS or another framework, and deploying your applications.

Overview

Section 1: Introduction

Lecture 1 Walkthrough of complete application

Section 2: Backend: GraphQL Fundamentals

Lecture 2 What is GraphQL?

Lecture 3 GraphQL schemes and types

Lecture 4 GraphQL resolvers

Lecture 5 GraphQL query

Lecture 6 Setup sample graphQL server

Lecture 7 GraphQL mutations

Lecture 8 GraphQL field resolvers

Section 3: Backend: Project Setup

Lecture 9 Setup postgres DB

Lecture 10 Connect to database using a DB tool

Lecture 11 Setup server project

Lecture 12 Database connection

Lecture 13 Setup express server

Lecture 14 Apollo server - Part 1

Lecture 15 Apollo server - Part 2

Lecture 16 Health route

Lecture 17 Install pino logger

Section 4: Backend: User Authentication

Lecture 18 User inteface

Lecture 19 User model - Part 1

Lecture 20 User model - Part 2

Lecture 21 Notification model

Lecture 22 User service

Lecture 23 Notification service

Lecture 24 User graphQL schema

Lecture 25 Add merged schemes to server

Lecture 26 Register user mutation - Part 1

Lecture 27 Register user mutation - Part 2

Lecture 28 Create new user

Lecture 29 Fix createdAt issue

Lecture 30 Login user mutation

Lecture 31 Social auth mutation

Lecture 32 Logout mutation

Lecture 33 GraphQL authentication route method

Lecture 34 Validate auth data

Section 5: Backend: Notification Feature

Lecture 35 Notification schema

Lecture 36 GraphQL get notification query

Lecture 37 GraphQL create notification mutation

Lecture 38 GraphQL update notification mutation

Lecture 39 GraphQL delete notification mutation

Section 6: Backend: Monitor Models and Services

Lecture 40 Section introduction

Lecture 41 Monitor model - Part 1

Lecture 42 Monitor model - Part 2

Lecture 43 Monitor create and get service methods

Lecture 44 Monitor update service method

Lecture 45 Monitor delete service method

Section 7: Backend: Monitor GraphQL Schemes and Resolvers

Lecture 46 Monitor graphQL scheme - Part 1

Lecture 47 Monitor graphQL scheme - Part 2

Lecture 48 Create monitor mutation resolver

Lecture 49 Create cron jobs methods

Lecture 50 Toggle monitor mutation resolver

Lecture 51 Update and delete monitor mutation resolvers

Lecture 52 Monitor result field resolver

Lecture 53 Monitor query resolvers

Lecture 54 Auto refresh query resolver

Lecture 55 Start monitor method

Lecture 56 Stop auto refresh

Section 8: Backend: GraphQL Subscriptions and Websockets

Lecture 57 Setup websocket server

Lecture 58 GraphQL subscription type

Lecture 59 Monitor subscription resolver

Lecture 60 Test subscriptions on dev tool

Lecture 61 Enable auto refresh - Part 1

Lecture 62 Enable auto refresh - Part 2

Section 9: Backend: HTTP Uptime Monitor

Lecture 63 HTTP monitor model

Lecture 64 Create and get http heartbeats

Lecture 65 HTTP status cron job method

Lecture 66 HTTP monitor heartbeat method - Part 1

Lecture 67 HTTP monitor heartbeat method - Part 2

Lecture 68 Success and error http monitor methods

Lecture 69 HTTP monitor error method

Lecture 70 Test http monitor method

Lecture 71 Get http heartbeats method

Lecture 72 Calculate monitor uptime

Lecture 73 Delete heartbeats

Lecture 74 GraphQL heartbeat schema

Lecture 75 GraphQL heartbeat resolver

Section 10: Backend: MongoDB Uptime Monitor

Lecture 76 MongoDB monitor model

Lecture 77 MongoDB connection method

Lecture 78 MongoDB monitor heartbeat start method

Lecture 79 MongoDB service methods

Lecture 80 Test mongodb monitor

Section 11: Backend: Redis Uptime Monitor

Lecture 81 Redis monitor heartbeat model and service

Lecture 82 Redis ping method

Lecture 83 Redis monitor assertion method

Lecture 84 Redis monitor success method fix

Lecture 85 Redis monitor error method

Lecture 86 Test redis monitor

Section 12: Backend: TCP Uptime Monitor

Lecture 87 TCP monitor heartbeat model and service

Lecture 88 TCP ping method

Lecture 89 TCP monitor heartbeat start method

Lecture 90 TCP monitor success method fix

Lecture 91 Test tcp monitor

Section 13: Backend: Email Service

Lecture 92 Create email templates method

Lecture 93 Email sender method

Lecture 94 Use email sender method

Section 14: Backend: SSL Monitor

Lecture 95 SSL model

Lecture 96 SSL monitor service

Lecture 97 Update ssl info method

Lecture 98 Start ssl monitor method

Lecture 99 Get days remaining method

Lecture 100 Get certificate info

Lecture 101 Certification info reject unauthorized

Lecture 102 Setup ssl info

Lecture 103 Test certificate ssl info method

Lecture 104 SSL monitor start method

Lecture 105 SSL monitor graphQL schema

Lecture 106 SSL monitor graphQL resolver

Lecture 107 Update ssl interface

Lecture 108 SSL monitor issue

Lecture 109 Test ssl monitor

Lecture 110 Copy email templates to build

Section 15: Frontend: Next.js Introduction

Lecture 111 What is Next.js?

Lecture 112 Next.js routing introduction

Lecture 113 Next.js documentation

Lecture 114 Create a sample Next.js application

Lecture 115 Defining Next.js routes

Lecture 116 Next.js route layouts

Lecture 117 Next.js dynamic routes

Lecture 118 Server and client components

Section 16: Frontend: Setup Uptimer Monitor Next.js Project

Lecture 119 Uptimer Next.js project setup

Lecture 120 Folder structure

Lecture 121 Next.js features to be used

Lecture 122 Index header component

Lecture 123 Next.js turbo command

Lecture 124 Resize observer

Lecture 125 Responsive index header component

Lecture 126 Index page content

Section 17: Frontend: Setup GraphQL Apollo Client

Lecture 127 Install graphQL apollo client library

Lecture 128 Setup websocket connection

Lecture 129 Setup apollo client persistor

Lecture 130 Convert ApolloProvider to a client component

Section 18: Frontend: User Authentication

Lecture 131 Add button and input components

Lecture 132 Signup component

Lecture 133 Signup form validation

Lecture 134 useRegister hook

Lecture 135 GraphQL register user mutation

Lecture 136 Use the apollo client useMutation hook

Lecture 137 Register user method

Lecture 138 Page loader component

Lecture 139 Toggle password input

Lecture 140 Install React toastify

Lecture 141 Create a new react context

Lecture 142 React context state reducer (Record video again)

Lecture 143 Fix monitor provider issue

Lecture 144 Login page html

Lecture 145 GraphQL login user mutation

Lecture 146 Test login feature

Section 19: Frontend: Social Authentication

Lecture 147 Create firebase project

Lecture 148 Initialize firebase app

Lecture 149 Register with google feature - Part 1

Lecture 150 Register with google feature - Part 2

Lecture 151 Create a resuable method

Lecture 152 Facebook app setup

Lecture 153 Register with facebook feature

Lecture 154 Login with google and facebook

Lecture 155 Create graphQL fragments

Section 20: Frontend: Next.js Home Route

Lecture 156 Home page structure

Lecture 157 Create status route

Lecture 158 Layout body component

Lecture 159 Sidebar component

Lecture 160 Sidebar menu component

Lecture 161 Toggle sidebar

Lecture 162 Home header component

Lecture 163 Create protected route component

Lecture 164 Navigate component

Lecture 165 GraphQL logout mutation

Lecture 166 Read current user data from apollo client cache

Lecture 167 Home group buttons

Lecture 168 Home buttons count method

Lecture 169 Render refresh buttons

Lecture 170 Home table and grid components

Lecture 171 useHomeHook - Part 1

Lecture 172 useHomeHook - Part 2

Lecture 173 useHomeHook - Part 3

Lecture 174 Update render buttons method

Lecture 175 Create heartbeats display component

Lecture 176 Create chart component

Section 21: Frontend: Apollo Client Subscription

Lecture 177 Setup apollo client subscription type

Lecture 178 Apollo client useSubscription onData callback

Lecture 179 Update apollo cache with useSubscription response data

Section 22: Frontend: HTTP Monitor

Lecture 180 Uptime monitor create button

Lecture 181 Uptime group buttons

Lecture 182 Monitor selection modal

Lecture 183 Open modal from sidebar

Lecture 184 HTTP monitor create route

Lecture 185 useHttpCreate hook

Lecture 186 HTTP monitor authentication fields

Lecture 187 Assertion component

Lecture 188 HTTP monitor validation

Lecture 189 React useTransition hook

Lecture 190 Update cache after mutation

Lecture 191 useHomeTableBtnGroup hook

Lecture 192 Access http edit route

Lecture 193 Edit http monitor

Section 23: Frontend: MongoDB, Redis and TCP Monitors

Lecture 194 useMongoDBCreate and useMongoDBEdit hooks

Lecture 195 MongoDB monitor create route

Lecture 196 MongoDB monitor edit route

Lecture 197 Redis monitor create and edit routes

Lecture 198 useTCPCreate and useTCPEdit hooks

Lecture 199 TCP monitor create and edit routes

Lecture 200 Paginate component

Lecture 201 View monitor route

Lecture 202 Add monitor to React context

Lecture 203 Monitor heartbeat graphQL query

Lecture 204 Change auto refresh button if no active monitor

Section 24: Frontend: SSL/TLS Monitor

Lecture 205 Add home component skeleton

Lecture 206 useSSLCreate hook

Lecture 207 useSSLEdit hook

Lecture 208 useSSLTable and useSSLHome hooks

Lecture 209 SSL route

Lecture 210 SSL home component

Lecture 211 SSL button group

Lecture 212 SSL create route

Lecture 213 Test ssl create

Lecture 214 SSL edit route

Lecture 215 Fix ssl edit issue

Lecture 216 useSSLInfoModal hook

Lecture 217 SSL information modal

Lecture 218 Fix ssl information modal overflow

Section 25: Frontend: Notification Contacts Group

Lecture 219 useViewContact hook

Lecture 220 View contact group route

Lecture 221 Contact group table body

Lecture 222 useContactGroupCreate hook

Lecture 223 useContactGroupEdit hook

Lecture 224 Create contact group route

Lecture 225 Add emails to list

Lecture 226 Edit contact group route

Section 26: Deployment: Deploy Apollo Server and Next.js Client to Render.com

Lecture 227 Create postgres database on render

Lecture 228 Create github repo for server project

Lecture 229 Deploy uptimer server to render

Lecture 230 Check deployed service

Lecture 231 Update apollo client component

Lecture 232 Fix Next.js build issue

Lecture 233 Push Next.js code to github

Lecture 234 Fix monitor delete bug

Lecture 235 Deploy Next.js app to render.com

Lecture 236 Add client domain to firebase authentication

Lecture 237 Show issue with pm2 on server

Lecture 238 Show bug fix change

Developers looking to learn GraphQL and NextJS