Graphql With Nextjs - Build A Fullstack App From Scratch - Printable Version +- Softwarez.Info - Software's World! (https://softwarez.info) +-- Forum: Library Zone (https://softwarez.info/Forum-Library-Zone) +--- Forum: Video Tutorials (https://softwarez.info/Forum-Video-Tutorials) +--- Thread: Graphql With Nextjs - Build A Fullstack App From Scratch (/Thread-Graphql-With-Nextjs-Build-A-Fullstack-App-From-Scratch--503197)

Graphql With Nextjs - Build A Fullstack App From Scratch - OneDDL - 08-08-2024 Free Download Graphql With Nextjs - Build A Fullstack App From Scratch Published 7/2024 MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz Language: English | Size: 19.58 GB | Duration: 34h 37m 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 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 [To see links please register or login] Recommend Download Link Hight Speed | Please Say Thanks Keep Topic Live [To see links please register or login] No Password - Links are Interchangeable