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 CompTIA Security+ Amazon AWS 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 React

Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)

Learn GraphQL and Apollo! Create a fast portfolio application in Next.js(Next 9+) / React backed with Apollo + Node.js
Rating: 4.6 out of 54.6 (105 ratings)
1,129 students
Created by Eincode by Filip Jerga, Filip Jerga
Last updated 5/2020
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • Develop Real-world web application with Next JS, Apollo and Node
  • Create your own portfolio application in most demanded frameworks on the market
  • Grasp full power of GraphQL

Course content

13 sections • 157 lectures • 28h 35m total length

  • Preview02:33
  • How to resolve issues
    08:28

  • Preview02:20
  • Creating the project
    27:57
  • Create pages
    11:59
  • Creating components!
    09:17
  • Get initial props
    12:25
  • More pages
    09:54
  • Alias for absolute path
    06:11
  • Root app component
    12:03
  • Get initial props of _app
    13:30
  • Preview23:39
  • Preview22:49
  • Navbar component
    12:35
  • Navigation to pages
    15:27

  • Preview02:34
  • GraphQL explanation
    14:04
  • GraphQL integration
    13:33
  • Portfolio resolvers
    15:08
  • Data rework
    09:13
  • Fetch portfolios on client
    17:15
  • Portfolio card component
    06:39
  • Provide parameters in query
    04:36
  • Portfolio detail page
    08:23
  • Links to portfolios
    06:28
  • Server refactoring
    04:39
  • Portfolio mutations
    13:09
  • Apollo server
    09:38
  • Update portfolio - server
    13:20
  • Create portfolio
    10:35
  • Update portfolio
    12:05
  • Delete portfolio
    08:23

  • Preview02:39
  • Apollo client
    19:14
  • Get portfolio with Apollo
    14:09
  • Get portfolios improvements
    07:55
  • Create portfolio improvements
    06:22
  • Create portfolio cache
    20:40
  • Apollo high order component(HOC)
    13:06
  • Apollo HOC with SSR
    07:30
  • Update portfolio improvements
    06:06
  • Delete portfolio improvements
    08:47
  • Refactoring queries and mutations
    07:30
  • Apollo dev tools
    03:19
  • Mongo Atlas
    08:58
  • Gitignore
    01:54
  • Mongo DB + Mongoose
    07:16
  • Portfolio Model + Fake DB
    15:31
  • Populate DB
    09:14
  • Get portfolio from DB
    03:43
  • Portfolio create, update, delete in DB
    16:49
  • GraphQL portfolio model
    15:25
  • Separating apollo functions on server
    06:11

  • Preview02:26
  • User infrastructure
    08:26
  • User mongoose model
    11:15
  • Sign Up user
    15:00
  • Password hashing
    11:41
  • FakeDB populate users
    09:38
  • Auth context
    15:44
  • Sessions
    15:48
  • GraphQL Strategy
    13:27
  • Register strategy and debug
    22:10
  • Promise in Auth
    08:55
  • Find user in DB
    13:58
  • Return user from sign in
    04:28
  • Password validation
    07:43
  • Middlewares
    07:52
  • Store sessions with passport
    15:40
  • Add sign out
    05:23
  • Check if user is authenticated
    14:13

  • Preview02:43
  • Sign Up form
    15:58
  • React hook form
    04:08
  • Sign up user success
    15:44
  • Redirect
    09:51
  • Handle errors
    06:51
  • Handle errors on server
    09:43
  • Sign in form
    05:01
  • Sign in done
    11:33
  • Fetch user from server
    07:07
  • Display username in navbar
    14:23
  • Fix user after sign in
    09:27
  • Sign out
    16:17
  • HOC to check if user is authenticated
    15:52
  • Check user role
    05:16

  • Preview02:33
  • Portfolio new page
    08:25
  • Dropdown links + withAuth improvements
    12:11
  • Datepicker component
    06:10
  • Set dates in datepicker
    12:07
  • Disable end date
    11:32
  • Finishing create portfolio
    14:38
  • Base layout
    13:48
  • Handle errors
    12:07
  • Check for user role
    06:04

  • Preview01:42
  • Instructor dashboard
    06:46
  • User portfolio resolver
    09:03
  • Fetch user portfolios
    14:21
  • Add controls to dashboard
    11:33
  • Remove portfolio mutation
    09:30
  • Portfolio update form
    13:40
  • Update portfolio mutation
    11:24

  • Preview02:13
  • Toast messages
    07:35
  • Format dates
    11:56
  • Client side fields
    12:42
  • Server redirect
    16:08
  • Display message on redirect
    15:00
  • Dispose message on login
    13:29
  • Spinner component
    10:29

  • Preview04:35
  • Add categories to FakeDB
    08:19
  • Populate Topics data
    07:29
  • Forum categories resolver
    09:28
  • Fetch topics by category resolver
    13:20
  • Fetch topics by slug changes
    06:16
  • Display forum categories
    10:18
  • Fetch and display topics
    09:38
  • Create topic resolver
    16:04
  • Slugify topic
    06:17
  • Unique slug
    10:31
  • Replier component
    15:29
  • Replier improvements
    15:06
  • Create topic functionality
    10:40
  • Add topic to cache
    11:09
  • Fetch topic by slug
    17:54
  • Prepare posts data
    24:16
  • Fetch posts resolver
    14:53
  • Fetch posts
    11:05
  • Display posts
    18:58
  • Posts improvements
    27:38
  • Create post resolver
    17:19
  • Create post client side
    13:22

Requirements

  • Basics of React Framework!
  • Fundamentals in HTML and CSS, but isn't must have

Description

What is GraphQL ?

GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data.

What is Apollo ?

Apollo is the industry-standard GraphQL implementation, providing the data graph layer that connects modern apps to the cloud. Apollo will handle data fetching, caching and state management of out the box!

What is Next.js ?

Next.js is React framework that provides infrastructure and simple development experience  for server side rendered(SSR) application.

  • An intuitive page-based routing system (with support for dynamic routes)

  • Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis

What are we going to build ?

We will work mainly on portfolios features. You will learn how to manage data on the client and the server with Apollo and Graphql. Data will be stored in Mongo Atlas Database to which we will be communicating through the Node JS Server. We will create a functionality to create a portfolio and I will explain you how to easily manage forms. Then we will take a look on an update functionality where I will show you how to populate inputs with existing data. After that will work on a delete functionality. All of the features will be reactive and updating view in real time. You will learn the basics of data fetching and data mutations with Apollo.

Another big feature we will be working on will be session based authentication. We will prepare login and register forms. Users will be able to register, login and experience features only for authenticated users. You will learn how to manage sessions, how to protect the pages, and manage an authentication state through your application.

Forum feature will be the biggest one. You are going to learn how to create fully working forum consisting of topics and posts. We will integrate a component that will be used for topic and posts creation. Users will be able to create various topics, posts and also replies to other posts, all updated in real time and also across the browsers. After that you will learn how to create a fully working pagination!

Later in the course we will create features to get randomised data for home page and I will talk about re-usability. We will finish CV page and we will get into deploying. After all production improvements will be applied we will deploy our application to heroku so anyone on internet can access our portfolio.

Who this course is for:

  • Starting as well as experienced developers interested in Next JS, GraphQL, Apollo
  • This course is for everyone eager to create apps with modern tech stack

Featured review

Liviu Damian
Liviu Damian
272 courses
58 reviews
Rating: 5.0 out of 510 months ago
Amazing. Very well and very detailed explained. Instructor is very helpful when running into errors difficult to fix. Couple more things can be added but nothing essential is missing. Very good! This is not easy stuff by all means.

Instructors

Eincode by Filip Jerga
Online Education
Eincode by Filip Jerga
  • 4.6 Instructor Rating
  • 1,764 Reviews
  • 13,069 Students
  • 12 Courses

Eincode ensures to provide the best online learning experience for its audience.

High quality content and programming concepts explained in real-life projects are fields where Eincode shines!

Eincode is covering mainly courses focusing on programming guides for web and mobile development. If you are looking for complete and comprehensive guides then Eincode is the right choice for you.

Courses are also published by instructor Filip Jerga.

Cheers & Keep Coding!

Filip Jerga
Software Engineer
Filip Jerga
  • 4.6 Instructor Rating
  • 3,172 Reviews
  • 28,826 Students
  • 16 Courses

My name is Filip Jerga and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on a wide range of technologies and projects from C++ development for ultrasound devices to modern mobile and web applications in React and Angular.

Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort to explain web and software engineering concepts in a detailed, hands-on and understandable way.

  • 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.