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

    • Map function

      FREE PREVIEW

    • More Maps

    • Display Blogs and Portfolios

    • Display images

    • Item Stylings

    • Item header styling

    • Passing data as props
  • 15

    [Project 2]: Api Routes

  • 16

    [Project 2]: Fetching options

  • 17

    [Project 2]: Revalidation

  • 18

    [Project 2]: Markdown Content

    • Markdown Content

      FREE PREVIEW

    • Get content file names

    • Get raw content

    • Detail pages

    • Markdown to Html

    • Generate Static Params

    • Get content by slug

    • Provide slugs to content

    • Use Gray Matter
  • 19

    [Project 2]: Special components

  • 20

    [Project 2]: Tailwind and styling improvements

    • Add Content

    • Tailwind

      FREE PREVIEW

    • Layout Improvement

    • New navigation bar

    • Hero Component

    • Fix images and Titles

    • Content Header

    • Markdown styling

    • Get Content Count

    • Blog list and portfolio list
  • 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

Hey, I'm Filip Jerga! I've been deep in the software engineering world for over 10 years, building all sorts of cool stuff—from software for ultrasound devices with C++ to modern apps with React and Angular. I even grabbed a Master's in AI along the way. What really drives me now isn't just coding; it's making complex programming simple and fun for you. I've poured all my real-world experience and a passion for teaching into these courses. My goal is to help you think like a pro, tackle tough problems, and build practical skills you'll truly use to create amazing things.

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