157
Lectures
28
Hours
Watch Intro Video

What is GraphQL?

GraphQL is a query language for your API and a server-side runtime for executing queries using a system you define for your data. GraphQL isn't tied to any specific database or storage engine and is 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) applications.

  • 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 client and server data 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 functionality to create a portfolio, and I will explain how to manage forms efficiently. Then we will look at an update functionality where I will show you how to populate inputs with existing data. After that, works on a delete functionality. All of the features will be reactive and updating views in real-time. You will learn the basics of data fetching and data mutations with Apollo.

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

The forum feature will be the biggest one. You will learn how to create a fully working forum consisting of topics and posts. We will integrate a component used for topic and posts creation. Users will be able to develop various topics, posts, and replies to other posts, all updated in real-time and 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 randomized data for the home page, and I will talk about re-usability. We will finish the CV page, and we will get into deploying. After all production improvements are applied, we will deploy our application to Heroku so anyone on the internet can access our portfolio.

Requirements

  • Basics of React Framework!

  • Fundamentals in HTML and CSS, but isn't must have

Course Curriculum

  • 1

    Introduction

  • 2

    Base Project Setup

    • Setion Introduction

      FREE PREVIEW

    • Creating the project

    • Create pages

    • Creating components

    • Get Initial Props

    • More Pages

    • Absolute Path

    • Root App Component

    • Get Initial Props of _app

    • SSR Explanation

    • SSR Debugging

    • Navbar Component

    • Navigation to pages
  • 3

    GraphQL BeginningsUntitled chapter

    • Section Intro

      FREE PREVIEW

    • GraphQL Explanations

    • GraphQL First Steps

    • Portfolio Resolvers

    • Data Rework

    • Fetch Portfolios on Client

    • Portfolio Card Component

    • Provide Parameters in Query

    • Portfolio Detail Page

    • Links to Portfolios

    • Server Refactoring

    • Portfolio Mutations

    • Apollo Server

    • Update Portfolio - Server

    • Create Portfolio

    • Update Portfolio

    • Delete Portfolio
  • 4

    Apollo for React

    • Section Intro

      FREE PREVIEW

    • Apollo Client

    • Get Portfolio with Apollo

    • Get Portfolios Improvements

    • Create Portfolio Improvements

    • Create Portfolio Cache

    • Apollo High Order Component(HOC)

    • Apollo HOC with SSR

    • Update Portfolio Improvements

    • Delete Portfolio Improvements

    • Refactoring Queries and Mutations

    • Apollo Dev Tools

    • Mongo Atlas

    • Gitignore

    • Mongo DB + Mongoose

    • Portfolio Model + Fake DB

    • Populate DB

    • Get Portfolio from DB

    • Portfolio create, update, delete in DB

    • GraphQL Portfolio Model

    • Separating Apollo Functions on Server
  • 5

    Authentication on Server

    • Section Introduction

      FREE PREVIEW

    • User Infrastructure

    • Mongoose User Model

    • Signup User

    • Password Hashing

    • FakeDB Populate Users

    • Auth Context

    • Sessions

    • GraphQL Strategy

    • Register Strategy and Debug

    • Promise in Auth

    • Find User in DB

    • Return User from Sign In

    • Password Validation

    • Middlewares

    • Store Sessions with Passport

    • Add Sign Out

    • Check if User is Authenticated
  • 6

    Authentication on Client

    • Section Introduction

      FREE PREVIEW

    • Signup Form

    • React Hook Form

    • Signup User Success

    • Redirect

    • Handle Errors

    • Handle Errors on Server

    • Sign In Form

    • SignIn Done

    • Fetch User from Server

    • Display Username in Navbar

    • Fix User after Sign In

    • Sign Out

    • HOC to check if User is Authenticated

    • Check User Role
  • 7

    Portfolio Create

    • Section Introduction

      FREE PREVIEW

    • Portfolio New Page

    • Dropdown Links + withAuth Improvements

    • Datepicker Component

    • Set dates in datepicker

    • Disable End Date

    • Finishing Create Portfolio

    • Base Layout

    • Handle Errors

    • Check for User Role
  • 8

    Update & Delete Features

    • Section Introduction

      FREE PREVIEW

    • Instructor Dashboard

    • User Portfolio Resolver

    • Fetch User Portfolios

    • Add Controls to Dashboard

    • Remove Portfolio Mutation

    • Pre-fill Form

    • Update Portfolio Mutation
  • 9

    UX Improvements

  • 10

    Forum Feature

    • Section Introduction

      FREE PREVIEW

    • Add Categories to FakeDB

    • Populate Topics Data

    • Forum Categories Resolver

    • Fetch Topics by Category Resolver

    • Fetch Topics by Slug Changes

    • Display Forum Categories

    • Fetch and Display Topics

    • Create Topic Resolver

    • Slugify Topic

    • Unique Slug

    • Replier Component

    • Replier Improvements

    • Create Topic Functionality

    • Add Topic to Cache

    • Fetch Topic by Slug

    • Prepare Posts Data

    • Fetch Posts Resolver

    • Fetch Posts

    • Display Posts

    • Posts Improvements

    • Create Post Resolver

    • Create Post Client Side
  • 11

    Pagination

    • Section Introduction

      FREE PREVIEW

    • Pagination Component

    • Fetch More Function

    • Get Posts Count

    • Get Paginated Data from Server

    • Display Data for Specific Page

    • Persistent Pagination

    • Create Post with Pagination

    • Re-pooling Data
  • 12

    Highlight Feature

  • 13

    Deployment

Software Engineer

Filip Jerga

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.

FAQ

  • How to get help when I am stuck with the course?

    Every video contains discussion where you can create a post describing an issue. Instructor responds usually within 1 business day.

  • What to do when I am unhappy with the course ?

    Within 30 days from the purchase you can ask for a full refund. No questions asked. Your happiness is our priority.

  • Do I need to watch every lecture of really extensive course?

    Of course not! Every lecture is committed (explained in introduction section). You can start watching at any lecture, just download correct version of project attached to lecture resources.

Eincode Access Options

  • Single Course Access

    • Lifetime and unlimited Access to "Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)"

    $29.00

    Access to this course only.

    Get started now

  • Monthly Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $19.00 / month

    Cancel Anytime!

    Get started now

  • Annual Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $190.00 / year

    Cancel Anytime!

    Get started now