Graphql With Nextjs – Build A Fullstack App From Scratch

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 jаvascript 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 gethttp 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 errorhttp monitor methods
Lecture 69 HTTP monitor error method
Lecture 70 Testhttp monitor method
Lecture 71 Gethttp 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 Accesshttp edit route
Lecture 193 Edithttp 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
Homepage

https://www.udemy.com/course/graphql-with-nextjs-build-a-fullstack-app-from-scratch/