301
Lectures
44
Hours

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 and move to more advanced topics until your application is deployed to Heroku or Vercel and accessible online on the internet. This course covers the latest topics and React JS and Next JS versions.


Course Structure is the following:

  • [Project 1]: Resource Application (Beginners)

  • [Project 2]: Content Application (Beginners)

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


What is Next.js?

Next.js is a 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 work on?

Project 1 - Resource Project

This project covers basic concepts. You will learn how React and Next JS work in the background. You will learn all topics on the practical examples.

You will understand the state and props, what a component is, and how the content is rendered out in the browser.


Project 2 - Content Application

  • Covering basic concepts of React and Next JS "Page Architecture."

  • Learning the inner workings of React and Next JS.

  • Exploring topics through practical examples.

  • Understanding state and props.

  • Defining what a component is.

  • Learning how content is rendered in the browser.


What are we going to work on?

Project 1 - Resource Project

This project covers basic concepts. You will learn how React and Next JS work in the background. You will learn all topics on the practical examples.

You will understand the state and props, what a component is, and how the content is rendered out in the browser.


Project 2 - Content Application

  • Learn the latest Next.js 13's "App Architecture."

  • Explore recent changes in React and Next.js.

  • Build a content application for managing portfolios and blogs in markdown format.

  • Discover new API functions.

  • Understand project organization.

  • Gain insight into how these frameworks work.


Portfolio Project

  1. Building the Layout:

    • Creating reusable components like navbar and portfolio cards.

    • Explaining server-side rendering and data fetching techniques.

  2. Authentication:

    • Using Auth0 for authentication.

    • User registration, login, and access control.

    • Managing authentication state and making UI changes.

  3. Portfolio Features:

    • Implementing create, update, and delete functionality.

    • Real-time updates and fast static pages with Next.js.

  4. Blogging:

    • Creating blogs with a rich text editor.

    • Drafting and publishing blogs.

    • Managing user blogs and SEO.

  5. SEO (Search Engine Optimization):

    • Basics of SEO and integrating it with Next.js.

  6. Deployment:

    • Deploying Express API server to Heroku.

    • Deploying Next.js portfolio app to Vercel to be accessible 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]: Init the project

  • 14

    [Project 2]: Get and display the data

    • Passing data as props

    • Item header styling

    • Item Stylings

    • Display images

    • Display Blogs and Portfolios

    • More Maps

    • Map function

      FREE PREVIEW
  • 15

    [Project 2]: Api Routes

  • 16

    [Project 2]: Fetching options

  • 17

    [Project 2]: Revalidation

  • 18

    [Project 2]: Markdown Content

    • Get raw content

    • Get content file names

    • Markdown Content

      FREE PREVIEW

    • Get content by slug

    • Use Gray Matter

    • Markdown to Html

    • Generate Static Params

    • Detail pages

    • Provide slugs to content
  • 19

    [Project 2]: Special components

  • 20

    [Project 2]: Tailwind and styling improvements

    • Blog list and portfolio list

    • Get Content Count

    • Markdown styling

    • Content Header

    • Fix images and Titles

    • Hero Component

    • New navigation bar

    • Layout Improvement

    • Tailwind

      FREE PREVIEW

    • Add Content
  • 21

    [Project 2]: Deployment

    • Github

    • Deployment to Vercel
  • 22

    [Project 3]: 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

  • 23

    [Project 3]: 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

    • Create Roles New Way!

    • [Deprecated!] About roles

    • Admin rights

    • [Update]: Admin SSR

    • Admin SSR

    • Env Variables
  • 24

    [Project 3]: 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
  • 25

    [Project 3]: 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
  • 26

    [Project 3]: 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
  • 27

    [Project 3]: 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
  • 28

    [Project 3]: 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

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 - Portfolio Apps [2023]"

    $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