Mô tả

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 is designed to provide a comprehensive understanding of fundamental concepts in web development.

  • You will grasp the concept of state, which represents the dynamic data within a React component, and learn how to manage it effectively.

  • Understanding props, which pass data from one component to another, is a key part of this project.

  • You will understand comprehensively what a component is in the context of React and how to create and use them in your applications.

  • The primary focus is on React and Next JS, two popular JavaScript libraries/frameworks for building modern web applications.


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.


Project 3 - Extensive 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.

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

Develop web applications with the latest Next JS & React

Understand web concepts clearly by creating real-world applications

Create SEO (Search Engine Optimisation) and Isomorphic Friendly Applications

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

Yêu cầu

  • Fundamentals in HTML and CSS
  • Basic Javascript knowledge is required

Nội dung khoá học

28 sections

Introduction

4 lectures
Project Overview
03:59
How to resolve issues + Project structure
05:51
Update Announcement
01:02
Page vs App Init
01:15

[Project 1]: Init the Project

8 lectures
Project Introduction
04:06
Project initialisation
09:32
Folder Structure
09:00
_app Component
08:14
Components
12:29
Class components
03:28
JSX
09:18
Arrow Functions
05:59

[Project 1]: State & Props

9 lectures
State
09:41
Increment state
06:50
Change state
05:57
Class state
09:36
Props
07:21
Use effect
06:35
Class props
02:28
How web apps work
27:02
More about props
09:35

[Project 1]: Layout

7 lectures
Bulma css
09:08
Separation into components
08:16
Absolute path
04:22
Layout
07:42
Resource data
06:52
Highlight list
06:07
Resource list
10:17

[Project 1]: Data fetching

8 lectures
Api functions
08:54
Get static props
09:14
Get static vs get server side props
20:22
[Server] Api app
09:18
[Server] Api endpoints
09:12
[Server] Get resources from API
07:12
Get data from 3001
06:58
Cors and Proxy
07:12

[Project 1]: Forms & Create Resource

8 lectures
Important! Next 13 Updates
00:49
Resource new page
08:02
Resource form
07:06
More inputs
08:39
Form values
05:01
Form Submit
03:42
Handle title change
07:43
Handle all inputs change
07:42

[Project 1]: Post Request

9 lectures
Send a post request
06:47
Attach data in the request
06:03
Axios
03:32
Validate data
04:42
Catching error
07:07
[Server] post endpoint
05:27
[Server] finishing post endpoint
08:32
Handling post request in API
03:33
Redirect after create
02:21

[Project 1]: Resource Details

8 lectures
[Server] get resource by ID endpoint
06:38
Resource detail page
05:34
Resource page fetch data
08:43
Link to detail page
04:52
Get Initial Props
05:49
Get static paths
09:16
Fallback true
09:13
Revalidate
06:34

[Project 1]: Resource Edit

5 lectures
Resource edit page
07:21
Resource Form Component
10:06
Resource Edit Form
07:05
Resource Patch API endpoint
10:29
[Server] Patch Endpoint
06:21

[Project 1]: Active Resource

7 lectures
Active resource component
08:19
Active resource patch request
08:43
[Server] Activate resource
08:56
[Server] Active resource endpoint
05:34
Fetch active resource in next
09:02
Time to finish in seconds
10:02
Seconds state
07:05

[Project 1]: UX Improvements

7 lectures
UX improvements
13:22
Complete resource
06:45
[Server] Forbid update of not complete resource
03:33
Resource Status
08:19
Resource status color
08:05
Display buttons on inactive ones
07:02
Env variables
09:34

[Project 1]: Deployment

5 lectures
Git & Heroku
09:10
Pushing Code to Github
06:16
Deploying to Heroku
12:00
Production env file
06:16
Deployment To Vercel
07:55

[Project 2]: Init the Project

5 lectures
Init the project
08:25
File Removal
05:21
More pages
06:47
Server Components
15:44
Blogs and portfolios json
08:52

[Project 2]: Get and Display the Data

7 lectures
Map function
14:12
More Maps
06:53
Display Blogs and Portfolios
04:33
Display Images
09:10
Item Stylings
15:36
Item Header Stylings
07:05
Passing data as props
09:45

[Project 2]: Api Routes

5 lectures
Api routes
09:29
Delay Function
05:23
Fetching data with API route
17:25
Bonus Info about Request
12:14
Fetch Portfolios
07:04

[Project 2]: Fetching Options

8 lectures
Simple express server
06:54
Get data from Node JS server
07:15
Server side vs static
19:21
Build vs Dev
16:07
Paralel vs Sequence
09:04
Suspense
07:15
Read files on Server
09:17
Randomizer
11:28

[Project 2]: Revalidation

7 lectures
Timed Revalidation
09:49
Starting Tag Revalidation
10:18
Tag Revalidation Finish
13:33
Path Revalidation
09:21
Client fetching + CORS
08:03
Fixing CORS
05:31
Remove api server
06:23

[Project 2]: Markdown Content

9 lectures
Markdown Content
08:20
Get content file names
07:37
Get raw content
05:55
Use Gray Matter
08:57
Detail pages
05:14
Provide slugs to content
06:09
Get content by slug
06:36
Generate Static Params
10:14
Markdown to Html
09:00

[Project 2]: Special Components

9 lectures
Catch all segments
05:59
Not Found Page
02:27
Loading UI
13:41
Navigation and Todos List
11:55
Active Link
10:05
Use router
03:05
Specific Layout
05:30
Route Group
04:57
Parallel Routes
07:48

[Project 2]: Tailwind & Style Improvements

10 lectures
Tailwind
06:59
Layout Improvement
03:35
New navigation bar
03:35
Hero Component
03:16
Blog list and portfolio list
02:22
Fix images and Titles
05:47
Content Header
09:00
Markdown styling
06:20
Get Content Count
07:22
Add Content
06:41

[Project 2]: Deployment

2 lectures
Github
11:37
Deployment to Vercel
09:59

[Project 3]: Starter(Serverless)

25 lectures
Section Intro
02:11
Init Next Portfolio
04:13
Pages and Header
06:58
Base layout
05:05
Fetch posts
09:05
Portfolio detail page
06:57
Get post by id
04:42
Debug
14:02
Reactstrap
07:06
Fonts
05:42
Scss styling
16:01
Layout Improvement
10:09
Header
11:01
Self Typed
10:22
Base Page
07:26
Note Before Watching
00:15
Absolute path
06:08
Login button
04:13
Api functions - part 1
17:33
Api functions - part 2
10:12
Api functions - part 3
14:08
Loading state
03:36
Fetch post by ID
16:02
useSWR
17:12
useSWR by ID
07:59

[Project 3]: Authentication

24 lectures
Section Intro
02:07
Auth0 Registration
08:39
New Auth0 Updates!
15:10
Login API Route
07:49
Webpack Dotenv package
00:09
Env Variables
12:33
Login Screen
09:47
Get login working
08:58
Get User
08:56
Pass user to layout
09:34
Logout
03:01
Secret page
09:49
Redirect
04:23
HOC Start
10:58
withAuth HOC
10:08
Server side props
11:17
Rework server side
04:23
withAuth Server side
21:30
Create Roles New Way!
18:26
[DEPRECATED!] About Roles
11:08
Admin Rights
16:49
[Update]: Admin SSR
00:41
Admin SSR
07:53
ENV Variables
04:29

[Project 3]: Portfolio Feature

45 lectures
Section Intro
03:25
API Server
13:23
Git Ignore
00:52
Routes and Controllers
11:09
Mongo DB
17:43
Structural changes in DB
05:39
Create portfolio data
16:12
Populate DB
17:15
Get portfolio by ID
07:18
Get Portfolios
11:02
Portfolio Card
10:05
Base Page Stylings
11:02
Get portfolio server side
10:19
Get static paths
12:44
SSR vs Static
11:53
Portfolio "new" page
08:49
Submit form
08:22
Datepicker
06:04
Handle Dates
13:28
Disable end date
09:25
Api route to create portfolio
11:40
Create portfolio endpoint
09:29
Testing create portfolio
13:36
JWT Middleware
16:39
Get access token
09:18
Create portfolio from App
07:03
Hook function to create portfolio
12:10
Hook creator - Api handler
06:27
Handle Errors
10:19
Portfolio edit page
11:51
Pre-fill form with data
07:05
Update portfolio on Server
08:27
Update on client
14:31
Toast messages
06:51
Handle errors
08:13
Edit and Delete buttons
11:13
Delete on server
04:18
Delete on client
07:57
Delete from state
06:46
Check role on server
10:43
Dropdown menu
10:47
Dropdown menu done
12:53
Next 9.4 Updates - part 1
10:37
Note: Revalidate
00:15
Next 9.4 Updates - part 2
06:41

[Project 3]: Blog Feature

25 lectures
Section Intro
03:07
Blog Editor
08:55
Blog Server implementation
11:14
Blog endpoints
10:33
Create blog on server
06:59
Create blog from client
10:44
Redirect to blog update
07:47
Get initial content to blog update
09:59
Update blog on server
09:52
Update blog from client
11:44
Base API
09:38
Dashboard page
14:23
Fetch blogs by user
08:17
Filter blogs
07:59
Dropdown in dashboard
12:10
Generate options
04:45
Slugify title
05:29
Update blog
08:22
Mutate function
11:36
Unique slugs
13:23
Delete blog
06:11
Blog index page
07:34
Display blogs
10:12
Link to blog detail + Dates
08:56
Blog detail page
13:28

[Project 3]: UX Improvements

13 lectures
Section Intro
02:33
Flip the card
18:03
About page
16:23
Dropdown resizing
12:48
Home screen improvements
08:03
Active Links
12:11
CV Page
03:28
Try to get an access token
17:39
Get an access token
10:07
Get a user
13:03
Fix blog by slug
03:41
Get blogs with user
06:56
Display user
15:07

[Project 3]: SEO

11 lectures
Section Intro
02:15
Head title
14:01
Index page type
06:14
Meta description
10:29
Open graph
11:51
Canonical
08:35
Fonts, images, favicon
11:42
More about fonts
03:45
Portfolio detail
12:01
Portfolio detail data
09:34
Change images
12:42

[Project 3]: Deployment

10 lectures
Section Intro
03:08
Deploying start
16:39
API to heroku
15:18
Deployment to Heroku
14:19
Respond with html page
07:39
Testing with PROD api
16:21
Small fixes
07:27
Deployment to Vercel
16:46
Testing Next.js app
09:22
Course Ending
11:58

Đá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.