287
Lectures
50
Hours
Watch Intro Video

Is this course right for you?

If you plan to start your career as a developer or improve your programming skills, this course is right for you. Learn how to build a fantastic portfolio website you can share with your colleagues or future employers.

Get all you need to start web development in one course! Start with Web Development technologies to more advanced topics until your application is deployed to Heroku or Vercel and accessible online on the internet.

This resource is the only thing you need to start Web Development with Next.js, React, and Node. You will get the confidence and skills required to create your own projects during this course. You will get the right mindset to apply for a developer career and improve modern frameworks like Next.js, React.js, and Node.

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.

Course Structure is the following:

  • [Project 1]: Resource Application (Beginners)

  • [Project 2]: Portfolio Application (Beginners/Intermediate)

  • [Project 3]: Movie Application (Legacy code, Beginners)

  • [Project 4]: Portfolio Application (Legacy code, Beginners/Intermediate)

What are we going to work on?

Resource Project

This project covers basic concepts. You will learn how React and Next JS works. 

You will understand the state and props. 

This project's main point is to understand basic concepts that will prepare you for the second application.

Portfolio Project

First, we are going to integrate the base layout of the application. We will break the layout into small pieces, and we will create lots of reusable components such as a navbar, portfolio card, and many others. I will explain how server-side rendering works, how to use different data fetching techniques, and the differences and benefits of fetching on the server versus the client.

The first big feature we will be working on will be authentication. The Auth0 provider will handle authentication. Nevertheless, there will be a lot's work to handle.

Users will register and login and experience feature only for authenticated users. You will learn how to restrict access to pages and manage authentication state through your application, resulting in UI changes of the application layout.

Next, we will work on portfolio features. We will implement functionality to create a portfolio, and I will explain how to manage forms easily. Then we will look at update functionality, where I will show you how to populate inputs with existing data. At the end of the section, we will work on delete functionality. All of the features will be reactive and updating view in real-time, and You will learn how to create fast static pages with new Next.js functions.

The blog feature will be the biggest one. Users will create blogs using a slate editor that offers different formatting options. Each blog will be saved initially as a draft blog, and it will be a user's responsibility to publish it. For this purpose, we will create a dashboard page displaying all user blogs to publish or make a draft from the blog. All Published blogs will be highlighted on the blogs page and created as static pages assuring better performance. We will create delete and update functionality as well.

Next, we will work on SEO(search engine optimization) improvements. I will explain the basics of SEO and how to get it working with Next.js.

The last section will cover deployment. Express API server will be deployed to Heroku. Next.js portfolio application will be deployed to the serverless Vercel platform, making our application super fast on the internet.

Requirements

  • No Next js previous knowledge is required!

  • Basic ES6 and Javascript knowledge is required

  • Fundamentals in React, HTML and CSS

Course Curriculum

  • 1

    Introduction

  • 2

    [Project 1]: Init the Project

  • 3

    [Project 1]: State & Props

    • State

    • Increment State

    • Change state

    • Class state

    • Props

    • Use Effect

    • Class props

    • How Web apps work

    • More about props
  • 4

    [Project 1]: Layout

    • Bulma CSS

    • Separation into component

    • Absolute path

    • Layout

    • Resources Data

    • Highlight List

    • Resource List
  • 5

    [Project 1]: Data fetching

    • Api functions

    • Get static props

    • GetStaticProps vs Server side

    • [Server] Api app

    • [Server] Api endpoints

    • [Server] Get resources from API

    • Get data from 3001

    • Cors and Proxy
  • 6

    [Project 1]: Forms & Create Resource

    • Resource new page

    • Resource form

    • More inputs

    • Form values

    • Form Submit

    • Handle title change

    • Handle all inputs change
  • 7

    [Project 1]: Post Request

    • Send a post request

    • Attach data in the request

    • Axios

    • Validate data

    • Catching error

    • [Server] post endpoint

    • [Server] finishing post endpoint

    • Handling post request in API

    • Redirect after create
  • 8

    [Project 1]: Resource Details

    • [Server] get resource by ID endpoint

    • Resource detail page

    • Resource page fetch data

    • Link to detail page

    • Get Initial Props

    • Get static paths

    • Fallback true

    • Revalidate
  • 9

    [Project 1]: Resource Edit

    • Resource edit page

    • Resource Form Component

    • Resource Edit Form

    • Resource Patch API endpoint

    • [Server] Patch Endpoint
  • 10

    [Project 1]: Active Resource

    • Active resource component

    • Active resource patch request

    • [Server] Activate resource

    • [Server] Active resource endpoint

    • Fetch active resource in next

    • Time to finish in seconds

    • Seconds state
  • 11

    [Project 1]: UX Improvements

    • UX improvements

    • Complete resource

    • [Server] Foirbid update of not complete resource

    • Resource Status

    • Resource status color

    • Display buttons on inactive ones

    • Env variables
  • 12

    [Project 1]: Deployment

    • Git & Heroku

    • Pushing Code to Github

    • Deploying to Heroku

    • Production env file

    • Deployment To Vercel
  • 13

    [Project 2]: Starter(Serverless)

    • Section Introduction

      FREE PREVIEW

    • Project Init

    • More pages and header

    • Base layout

    • Styles

    • Post data

    • Portfolio detail

    • Get portfolio by Id

    • Custom server

    • Next routes

    • Reactstrap

    • Fonts

    • Next JS - Debugger Update

    • Cleaning and debugging

    • Proper layout

    • Typed JS

    • Header rework - part 1

    • Header rework - part 2

    • Base page

    • Change to functional components

    • Remove _app

    • Absolute path

    • Login button

    • Api functions - part 1

    • Api functions - part 2

    • Api function - part 3

    • Loading state

    • Fetch post by Id

    • useSWR

    • useSWR by Id

  • 14

    [Project 2]: Authentication

    • Section Introduction

      FREE PREVIEW

    • Auth0 Registration

    • Login Api route

    • Env variables

    • Login Screen

    • Get login working

    • Get user

    • Pass user to layout

    • Logout

    • Secret page

    • Redirect

    • HOC Start

    • withAuth HOC

    • Get server side props

    • Rework server side

    • withAuth server side

    • About roles

    • Admin rights

    • Admin SSR

    • Env Variables
  • 15

    [Project 2]: Portfolio Feature

    • Section Introduction

      FREE PREVIEW

    • Api Server

    • gitignore

    • Routes and controllers

    • Mongo Atlas

    • Structural changes in DB

    • Create portfolio data

    • Populate DB

    • Get portfolio by Id

    • Get portfolios

    • Portfolio Card

    • Base page styling

    • Get portfolio server side

    • Get static paths

    • SSR vs static

    • Portfolio new page

    • Submit form

    • Datepicker

    • Handle dates

    • Disable end date

    • Api route to create portfolio

    • Create portfolio endpoint

    • Testing create portfolio

    • JWT middleware

    • Get access token

    • Create portfolio from app

    • Hook function to create portfolio

    • Hook creator - api handler

    • Handle errors

    • Portfolio edit page

    • Pre-fill form with data

    • Update portfolio on server

    • Update on client

    • Toast messages

    • Handle errors

    • Edit and delete buttons

    • Delete on server

    • Delete on client

    • Delete from state

    • Check role on server

    • Dropdown menu

    • Dropdown menu done

    • Next JS 9.4 updates - part 1

    • Next JS 9.4 updates - part 2
  • 16

    [Project 2]: Blog Feature

    • Section Introduction

      FREE PREVIEW

    • Blog Editor

    • Blog server implementation

    • Blog endpoints

    • Create blog on server

    • Create blog from client

    • Redirect to blog update

    • Get initial content to blog update

    • Update blog on server

    • Update blog from client

    • Base Api

    • Dashboard page

    • Fetch blogs by user

    • Filter blogs

    • Dropdown in dashboard

    • Generate options

    • Slugify title

    • Update blog

    • Mutate function

    • Unique slugs

    • Delete blog

    • Blog index page

    • Display blogs

    • Link to blog detail and dates

    • Blog detail page
  • 17

    [Project 2]: UX Improvements

    • Section Introduction

      FREE PREVIEW

    • Flip the card

    • About page

    • Dropdown resizing

    • Home screen improvements

    • Active links

    • CV page

    • Try to get an access token

    • Get an access token

    • Get a user

    • Fix blog by slug

    • Get blogs with user

    • Display user
  • 18

    [Project 2]: SEO

    • Section Introduction

      FREE PREVIEW

    • Head title

    • Index page type

    • Meta description

    • Open graph

    • Cannonical

    • Fonts, images and favicon

    • More about fonts

    • Portfolio detail

    • Portfolio detail data

    • Change images
  • 19

    [Project 2]: Deployment

    • Section Introduction

      FREE PREVIEW

    • Deploying start

    • Api to Heroku

    • Deployment to Heroku

    • Testing with prod api

    • Respond with html page

    • Small fixes

    • Deployment to Vercel

    • Testing Next JS app

    • Course Ending
  • 20

    [Project 3]: Movie App, Basics

    • Application initialization

      FREE PREVIEW

    • Create index page

    • Functional components

    • Class components

    • Reusable components

    • Some basics styles

    • What is state

    • Lets mutate state

    • Common mistakes with state

    • State of functional component

    • What are props

    • How web app works

    • Iterate over list of data

    • Shorten function

    • Move movie data to store

    • Get movie data and promises

    • Use effect

    • Get movies in class component

    • Catch error in promise

    • Get initial props

    • More pages, more links

    • App container

    • App container props

    • Detail page of movie

    • Get movie by id

    • Fix link in detail page

    • Finished detail page

    • Get images from movies

    • Display cover images

    • Get categories

    • Modal implementation and close modal

    • Form to create movie and containment

    • Get values from the form

    • Handle genre changes

    • Handle form submit

    • Close modal and uncontrolled data

    • Provide id of movie

    • Base server implementation

    • More about server

    • Getting movies from server

    • Get movie by id

    • Saving movies

    • Delete movie

    • Edit page for movie

    • Provide data to edit page

    • Finishing update movie feature

    • Navigation fixes

    • Starting with filtering

    • Filtering finished

    • Styling improvements

    • Api endpoints

    • Post endpoint

Instructor(s)

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 a discussion where you can create a post describing an issue. The instructor usually responds within 1 business day.

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

    Within 30 days of 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 the introduction section). You can start watching at any lecture. Just download the correct version of the project attached to lecture resources.

Eincode Access Options

  • Single Course Access

    • Lifetime and unlimited Access to "Complete Next.js with React & Node - Beautiful Portfolio App"

    $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