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
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.
Basics of React Framework!
Fundamentals in HTML and CSS, but isn't must have
Setion Introduction
FREE PREVIEWCreating 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
Section Intro
FREE PREVIEWGraphQL 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
Section Intro
FREE PREVIEWApollo 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
Section Introduction
FREE PREVIEWUser 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
Section Introduction
FREE PREVIEWSignup 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
Section Introduction
FREE PREVIEWPortfolio 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
Section Introduction
FREE PREVIEWInstructor Dashboard
User Portfolio Resolver
Fetch User Portfolios
Add Controls to Dashboard
Remove Portfolio Mutation
Pre-fill Form
Update Portfolio Mutation
Section Introduction
FREE PREVIEWToast Messages
Format Dates
Client Side Fields
Server Redirect
Display Message on Redirect
Dispose Message on Login
Spinner Component
Section Introduction
FREE PREVIEWAdd 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
Section Introduction
FREE PREVIEWPagination 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
Section Introduction
FREE PREVIEWHighlight Data
Reusable random function
Display Highlight Portfolios
Display Topics
CV Page
Section Introduction
FREE PREVIEWProd Base URL
Prod Database Changes
Prod Session Setup
Heroku and Git CLI
Deployment to Heroku
App Testing and Course Ending
Filip Jerga
Every video contains discussion where you can create a post describing an issue. Instructor responds usually within 1 business day.
Within 30 days from the purchase you can ask for a full refund. No questions asked. Your happiness is our priority.
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.
Single Course Access
$29.00
Access to this course only.
Get started nowMonthly Membership
$19.00 / month
Cancel Anytime!
Get started nowAnnual Membership
$190.00 / year
Cancel Anytime!
Get started now