Mô tả

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.

Bạn sẽ học được gì

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

Establish yourself in field of the exciting Next and React web development environment

Yêu cầu

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

Nội dung khoá học

13 sections

Introduction

2 lectures
Project Preview
02:33
How to resolve issues
08:28

Base Project Setup

13 lectures
Section Introduction
02: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
SSR Explanation
23:39
SSR Debugging
22:49
Navbar component
12:35
Navigation to pages
15:27

GraphQL Beginnings

17 lectures
Section Introduction
02: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

Apollo for React

21 lectures
Section Introduction
02: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

Authentication on Server

18 lectures
Section introduction
02: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

Authentication on Client

15 lectures
Section introduction
02: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

Portfolio Create

10 lectures
Section introduction
02: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

Update & Delete Features

8 lectures
Section introduction
01: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

UX Improvements

8 lectures
Section Introduction
02: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

Forum Feature

23 lectures
Section Introduction
04: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

Pagination

9 lectures
Section introduction
02:54
Pagination component
11:27
Fetch more function
14:40
Get posts count
11:04
Get paginated data from server
14:34
Display data for specific page
08:18
Persistent pagination
13:22
Create post with pagination
20:19
Re-pooling data
07:05

Highlight Feature

6 lectures
Section Introduction
01:27
Highlight data
19:16
Reusable "random" function
08:47
Display highlight portfolios
12:52
Display topics
17:30
CV Page
05:59

Deployment

7 lectures
Section Introduction
01:48
Prod base URL
07:53
Prod database changes
09:32
Prod session setup
06:06
Heroku and Git CLI
06:22
Deployment to Heroku
13:18
Course End + Testing
17:11

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.