Strongly Typed Next.js

Strongly Typed Next.js

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 6.5 Hours | 2.04 GB


Create a full stack web application with Next.js, TypeScript and GraphQL

Welcome to Strongly Typed Next.js!

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Here is why you should join:

Everything covered is up-to-date and relevant in today’s web developer industry.

Along with the videos, I wrote a step-by-step guide to follow along on my website.

Course highlights:

Create a full stack GraphQL API and web client

User authentication with the React Context API

Style JSX components with Material UI themes

Build a monorepo server with yarn workspaces

How long is this course?

The entire course should take between two to four weeks to complete.

By the end, you’ll have plenty of new skills for building full stack web applications.

What are we building?

We are building a simple streaming service called “Stream-me”

Our app will feature the following functionality:

Users can login or signup and create streams.

Dark mode switch to dim the lights.

Embed music, videos or social media content.

Share streaming content with embedded links.

We are not building a “live streaming” service like twitch.

We are building a service which supports sharing embedded post content.

What you’ll learn

  • Next
  • TypeScript
  • TypeGraphQL
  • Typegoose
  • React
  • Authentication


+ Table of Contents

Next.js
1 Installation
2 TypeScript Config
3 Git Config
4 Routing Pages
5 Custom Document
6 Material UI
7 Theme Provider
8 Using useEffect
9 Server Stylesheets
10 Linking Pages
11 Bonus Challenge Landing Page

TypeGraphQL
12 Introduction
13 Installation
14 User Entity
15 Decorators
16 Ref Type
17 Stream Entity
18 ObjectID Scalar
19 MyContext Middleware
20 isAuth Middleware
21 Typegoose Middleware
22 User Resolver
23 Bonus Challenge Query Complexity

Typegoose
24 Introduction
25 Auth Input
26 Register Mutation
27 Login Mutation
28 Stream Input
29 Stream Query
30 Stream Mutation
31 Stream Add
32 Stream Edit
33 Stream Delete
34 Field Resolver
35 Bonus Challenge Lean Queries

Apollo Server
36 Introduction
37 Installation
38 Schema
39 MongoDB
40 Environment Config
41 Create Session
42 Express App
43 Create Schema
44 Create Server
45 Test Mutations
46 Test Queries
47 Bonus Challenge Serverless GraphQL

Apollo Client
48 Introduction
49 Installation
50 Schema
51 Next Environment
52 Next Config
53 Generate Queries
54 Generate Mutations
55 Apollo Client
56 Initialize Apollo
57 Using useApollo
58 Apollo Provider
59 Test Apollo Client
60 Bonus Challenge Mocked Provider

Authentication
61 Auth Context
62 SignIn Mutation
63 SignUp and SignOut
64 Auth Provider
65 Header Component
66 Header Styles
67 Header Import
68 SignIn Screen
69 SignUp and SignOut Screens
70 Bonus Challenge Persist Token

Streaming
71 Posts Component
72 Posts Styles
73 Posts Content
74 Hero Component
75 Hero Styles
76 Hero Content
77 Content Component
78 Streams Page
79 Stream Detail Page
80 Stream Create Page
81 Stream Create Content
82 Edit Stream Hooks
83 Edit Stream Methods
84 Edit Stream Content
85 Test Streams
86 Bonus Challenge Share Streams

Deployment
87 Introduction
88 Installation
89 App Updates
90 Next Custom Server
91 Test Custom Server
92 Heroku Deployment