Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Next.js

Strongly Typed Next.js

Create a full stack web application with Next.js, TypeScript and GraphQL
Rating: 4.2 out of 54.2 (48 ratings)
466 students
Created by Michael Stromer
Last updated 11/2020
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • Next
  • TypeScript
  • TypeGraphQL
  • Typegoose
  • React
  • Authentication
Curated for the Udemy for Business collection

Course content

8 sections • 92 lectures • 6h 34m total length

  • Preview03:15
  • TypeScript Config
    04:15
  • Git Config
    01:02
  • Routing Pages
    06:03
  • Custom Document
    03:49
  • Material UI
    04:58
  • Theme Provider
    04:11
  • Using useEffect
    03:07
  • Server Stylesheets
    05:14
  • Linking Pages
    05:58
  • Bonus Challenge: Landing Page
    00:23

  • Preview02:45
  • Installation
    05:50
  • User Entity
    05:27
  • Decorators
    04:43
  • Ref Type
    02:32
  • Stream Entity
    04:28
  • ObjectID Scalar
    05:45
  • MyContext Middleware
    02:21
  • isAuth Middleware
    06:11
  • Typegoose Middleware
    05:29
  • User Resolver
    06:32
  • Bonus Challenge: Query Complexity
    00:17

  • Preview01:40
  • Auth Input
    04:38
  • Register Mutation
    08:51
  • Login Mutation
    03:35
  • Stream Input
    03:58
  • Stream Query
    05:31
  • Stream Mutation
    05:58
  • Stream Add
    02:50
  • Stream Edit
    04:54
  • Stream Delete
    03:20
  • Field Resolver
    02:59
  • Bonus Challenge: Lean Queries
    00:10

  • Preview01:29
  • Installation
    03:19
  • Schema
    07:36
  • MongoDB
    02:18
  • Environment Config
    05:05
  • Create Session
    03:30
  • Express App
    03:40
  • Create Schema
    02:54
  • Create Server
    05:35
  • Test Mutations
    09:26
  • Test Queries
    03:34
  • Bonus Challenge: Serverless GraphQL
    00:26

  • Preview02:30
  • Installation
    04:04
  • Schema
    05:24
  • Next Environment
    03:41
  • Next Config
    05:02
  • Generate Queries
    03:28
  • Generate Mutations
    05:18
  • Apollo Client
    06:25
  • Initialize Apollo
    06:36
  • Using useApollo
    02:59
  • Apollo Provider
    03:44
  • Test Apollo Client
    02:03
  • Bonus Challenge: Mocked Provider
    00:19

  • Auth Context
    06:34
  • SignIn Mutation
    07:40
  • SignUp and SignOut
    03:39
  • Auth Provider
    04:01
  • Header Component
    03:38
  • Header Styles
    06:19
  • Header Import
    04:32
  • SignIn Screen
    07:31
  • SignUp and SignOut Screens
    05:51
  • Bonus Challenge: Persist Token
    00:09

  • Posts Component
    03:41
  • Posts Styles
    04:20
  • Posts Content
    05:12
  • Hero Component
    02:59
  • Hero Styles
    05:22
  • Hero Content
    05:16
  • Content Component
    05:50
  • Streams Page
    04:51
  • Stream Detail Page
    06:28
  • Stream Create Page
    05:18
  • Stream Create Content
    04:04
  • Edit Stream Hooks
    10:01
  • Edit Stream Methods
    03:26
  • Edit Stream Content
    05:17
  • Test Streams
    04:04
  • Bonus Challenge: Share Streams
    00:08

  • Introduction
    01:02
  • Installation
    06:34
  • App Updates
    05:16
  • Next Custom Server
    03:37
  • Test Custom Server
    01:51
  • Heroku Deployment
    06:41

Requirements

  • Basic knowledge of GraphQL
  • Basic knowledge of React
  • Basic knowledge of Node

Description

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.

Pre-requisites

Before we dive into the implementation, here are a few things you’ll need to follow along.

  • Node 6 or higher

  • Yarn

  • NPM

  • Basic Knowledge of GraphQL and Node.js

Who this course is for:

  • Developers looking to learn GraphQL
  • Developers looking to learn NextJS

Instructor

Michael Stromer
Mobile Developer
Michael Stromer
  • 4.1 Instructor Rating
  • 113 Reviews
  • 801 Students
  • 4 Courses

Michael is a Full Stack Software Engineer at CLEAR in New York City. Developing apps has become one of his creative avenues, with a focus on front-end design. When he’s not making apps and exploring the city, Michael enjoys going to concerts, reading, writing, playing guitar and piano.

As a self-taught developer, Michael is thrilled to be recording new digital content for Udemy's online community.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.