使用 React 和 Node 完成 Next.js - 精美的 Portfolio 应用
上次更新时间：2024-11-10
课程售价: 2.9 元
联系右侧微信客服充值或购买课程
课程内容
01 - Introduction
02 - [Project 1] Init the Project
03 - [Project 1] State & Props
04 - [Project 1] Layout
05 - [Project 1] Data fetching
06 - [Project 1] Forms & Create Resource
07 - [Project 1] Post Request
08 - [Project 1] Resource Details
09 - [Project 1] Resource Edit
10 - [Project 1] Active Resource
11 - [Project 1] UX Improvements
12 - [Project 1] Deployment
13 - [Project 2] Starter(Serverless)
- 001 Section Intro
- 002 Init Next Portfolio
- 003 Pages and Header
- 004 Base layout
- 005 Fetch posts
- 006 Portfolio detail page
- 007 Get post by id
- 008 Debug
- 009 Reactstrap
- 010 Fonts
- 011 Scss styling
- 012 Layout Improvement
- 013 Header
- 014 Self Typed
- 015 Base Page
- 017 Absolute path
- 018 Login button
- 019 Api functions - part 1
- 020 Api functions - part 2
- 021 Api functions - part 3
- 022 Loading state
- 023 Fetch post by ID
- 024 useSWR
- 025 useSWR by ID
14 - [Project 2] Authentication
- 001 Section Intro
- 002 Auth0 Registration
- 003 New Auth0 Updates!
- 004 Login API Route
- 006 Env Variables
- 007 Login Screen
- 008 Get login working
- 009 Get User
- 010 Pass user to layout
- 011 Logout
- 012 Secret page
- 013 Redirect
- 014 HOC Start
- 015 withAuth HOC
- 016 Server side props
- 017 Rework server side
- 018 withAuth Server side
- 019 About Roles
- 020 Admin Rights
- 021 Admin SSR
- 022 ENV Variables
15 - [Project 2] Portfolio Feature
- 001 Section Intro
- 002 API Server
- 003 Git Ignore
- 004 Routes and Controllers
- 005 Mongo DB
- 006 Structural changes in DB
- 007 Create portfolio data
- 008 Populate DB
- 009 Get portfolio by ID
- 010 Get Portfolios
- 011 Portfolio Card
- 012 Base Page Stylings
- 013 Get portfolio server side
- 014 Get static paths
- 015 SSR vs Static
- 016 Portfolio new page
- 017 Submit form
- 018 Datepicker
- 019 Handle Dates
- 020 Disable end date
- 021 Api route to create portfolio
- 022 Create portfolio endpoint
- 023 Testing create portfolio
- 024 JWT Middleware
- 025 Get access token
- 026 Create portfolio from App
- 027 Hook function to create portfolio
- 028 Hook creator - Api handler
- 029 Handle Errors
- 030 Portfolio edit page
- 031 Pre-fill form with data
- 032 Update portfolio on Server
- 033 Update on client
- 034 Toast messages
- 035 Handle errors
- 036 Edit and Delete buttons
- 037 Delete on server
- 038 Delete on client
- 039 Delete from state
- 040 Check role on server
- 041 Dropdown menu
- 042 Dropdown menu done
- 043 Next 9.4 Updates - part 1
- 045 Next 9.4 Updates - part 2
16 - [Project 2] Blog Feature
- 001 Section Intro
- 002 Blog Editor
- 003 Blog Server implementation
- 004 Blog endpoints
- 005 Create blog on server
- 006 Create blog from client
- 007 Redirect to blog update
- 008 Get initial content to blog update
- 009 Update blog on server
- 010 Update blog from client
- 011 Base API
- 012 Dashboard page
- 013 Fetch blogs by user
- 014 Filter blogs
- 015 Dropdown in dashboard
- 016 Generate options
- 017 Slugify title
- 018 Update blog
- 019 Mutate function
- 020 Unique slugs
- 021 Delete blog
- 022 Blog index page
- 023 Display blogs
- 024 Link to blog detail + Dates
- 025 Blog detail page
17 - [Project 2] UX Improvements
18 - [Project 2] SEO
19 - [Project 2] Deployment
20 - [Project 3] Movie App, Basics
- 001 Application Initialization
- 002 Create index page
- 003 Functional Components
- 004 Class Components
- 005 Reusable Components
- 006 Some basics styles
- 007 What is the State
- 008 Let's mutate State
- 009 Common mistakes with State
- 010 State of functional component
- 011 What are props
- 012 How web app works
- 013 Iterate over list of data
- 014 Shorten Function
- 015 Move movie data to Store
- 016 Get movie data + Promises
- 017 Use Effect
- 018 Get movies in class component
- 019 Catch error in Promise
- 020 Get initial props
- 021 More pages, more links
- 022 App container
- 023 App container props
- 024 Detail page of movie
- 025 Get movie by id
- 026 Fix links in detail page
- 027 Finishes detail page
- 028 Get images from movies
- 029 Display cover images
- 030 Get categories
- 031 Modal implementation + Close Modal
- 032 Form to create movie & Containment
- 033 Get values from the form
- 034 Handle genre changes
- 035 Handle form submit
- 036 Close Modal & Uncontrolled data functionality
- 037 Provide ID of movie
- 038 Base server implementation
- 039 More about Server
- 040 Getting movies from server
- 041 Get movie by ID
- 042 Saving movies
- 043 Delete movie
- 044 Edit page for movie
- 045 Provide data to Edit page
- 046 Final touches on Update movies functionality
- 047 Navigation fixes
- 048 Starting with filtering
- 049 Filtering finished
- 050 Styling improvements
- 051 API Endpoints
- 052 Post endpoint
21 - [Project 4] Starter(Legacy)
- 002 Project Init
- 003 More pages + Header
- 004 Base Layout
- 005 Styles
- 006 Post Data
- 007 Portfolio Detail
- 008 Get portfolio by ID
- 009 Custom server
- 010 Next routes
- 011 Reactstrap
- 012 Fonts
- 013 Cleanup + Debugging
- 014 Proper layout
- 015 Typed.js Library
- 016 Header Integration part 1
- 017 Header Integration part 2
- 018 Base Page Component and Default Props
22 - [Project 4] Authentication with Auth0
- 001 Auth Start, Login and Logout Buttons
- 002 Auth0 App Creation and Service
- 003 Handle Authentication and Callback Page
- 004 Callback Page and Redirect User
- 005 Google Setup Auth0
- 006 Save Tokens in Cookies
- 007 DisplayHide Login Buttons
- 008 Get Cookies from Server Client
- 009 Inform Header About Authentication
- 010 Verify Token Expiration Time Improvement
- 011 Auth Debugging & Display User
- 012 JWKS verify token signature
- 013 JWKS Debugging and Explanation
- 014 Decoded Token Fix!
- 015 Secret Protected Page
- 016 (HOC) High Order Components - Start
- 017 withAuth HOC - getInitialProps
- 018 Secret Endpoint Server
- 019 CheckJWT Intro to Middlewares
- 020 CheckJWT Real Middleware part 1
- 021 CheckJWT Real Middleware part 2
- 022 Axios Auth Headers
- 023 Authorise Request in Get Initial Props
- 024 Roles in Auth0
- 025 HOC to check a Role
- 026 Server Side Role Authorization
23 - [Project 4] Portfolio Feature
- 001 Different Headers
- 002 Portfolio Card Styling
- 003 React Simple Form
- 004 More Input Types
- 005 Formik Intro
- 006 Formik Specific Inputs
- 007 Formik + Bootstrap
- 008 Formik Separate Component
- 009 Validate Form with Formik
- 010 Date Picker Component
- 011 Style Date Picker
- 012 On Change Event Explanation
- 013 Date Validation
- 014 Disable End Date
- 015 Portfolio Styling Changes + Small Refactor
- 016 Database Changes
- 017 MongoDB Intro
- 018 Config Folder Dev.js
- 019 Book Model + Post Route
- 020 Books More Endpoints
- 021 Books Routes & Controllers
- 022 Portfolio Model
- 023 Portfolios Controllers & Routes
- 024 Portfolio Update & Delete Endpoint
- 025 Get Portfolios on Client Side
- 026 Create Portfolio from Client App
- 027 Handle Error in Create Form
- 028 Fix Validation + Redirect
- 029 Portfolio Update Page, Get Portfolio By Id
- 030 Initial Values in Portfolio Form
- 031 Update Portfolio on Client
- 032 Testing Update Functionality
- 033 UI Buttons Navigation
- 034 Hide Buttons for not Logged in Users
- 035 Delete Portfolio Client
- 036 Portfolio Modal Intro
- 037 Fill Modal with Portfolio Data
- 038 Stop Propagation on Click
- 039 Sort Date & Hide Initial Date Fix
24 - [Project 4] Blog Feature - Slate Editor
25 - [Project 4] Advance Blog Feature
- 001 Blog Model
- 002 Date Fix in Model
- 003 POST Blog Endopoint
- 004 Get Blog By Id Endpoint
- 005 Controll Menu
- 006 Save Blog part 1
- 007 Save Blog part 2
- 008 Save Blog part 3
- 009 Serialise & Deserialise Introduction
- 010 Serialise Rules Fix
- 011 Serialise to HTML
- 012 Save Blog Action
- 013 Disable Save Button while Saving
- 014 Blog Editor Update Page
- 015 Initial Value for Blog Editor Page
- 016 Redirect After Save
- 017 Save Blog - Lock the request
- 018 Update Blog Server
- 019 Update Blog Client
- 020 Save Blog Shortcut
- 021 Blog Toaster Messages
- 022 User Blogs Dashboard Page
- 023 Get User Specific Blogs
- 024 Display User Blogs
- 025 Dropdown Menu for the Blog Init
- 026 Dynamic Options for Dropdown Menu
- 027 Dropdown Handlers
- 028 Learn about Slug
- 029 Publish Draft Blogs
- 030 Delete and Get Published Blogs on the Server
- 031 Delete Blog from the App
- 032 Get & Display Published Blogs
- 033 Detail Blog Page - Get Page by Slug
- 034 Detail Blog Page Complete
- 035 Recap of Section part 1
- 036 Recap of Section part 2
26 - [Project 4] Page UX Improvement
- 001 About Page
- 002 Flipping Card part 1
- 003 Flipping Card part 2
- 004 Flipping Card part 3
- 005 Active Link part 1
- 006 Active Link part 2
- 007 Dropdown Blogs for Site Owner
- 008 Dropdown Blogs Styling Fixes
- 009 Set Interval Animation Fix
- 010 Dropdown Menu on Smaller Screens Fix
- 011 Height of the Image on Smaller Screens
- 012 CV Page
27 - [Project 4] SEO Improvements
28 - [Project 4] Get Ready for Deploy
- 001 Small pre-deploy Changes
- 002 Setup Environment Variables
- 003 Setup Namespace
- 004 Mongo DB & Auth0 Production Setup
- 005 First Deployment
- 006 Performance Improvements - Images & JS
- 007 Optimise CSS
- 008 Load fonts on Client
- 009 Deploy & Test after Fonts
- 010 Google Fonts & Deploy
- 011 Final Deploy and Test
- 012 Header Title Fix
- 013 Final Words
29 - [Optional] Setup For Busy Developers
课程内容
29个章节 , 443个讲座
01 - Introduction
02 - [Project 1] Init the Project
03 - [Project 1] State & Props
04 - [Project 1] Layout
05 - [Project 1] Data fetching
06 - [Project 1] Forms & Create Resource
07 - [Project 1] Post Request
08 - [Project 1] Resource Details
09 - [Project 1] Resource Edit
10 - [Project 1] Active Resource
11 - [Project 1] UX Improvements
12 - [Project 1] Deployment
13 - [Project 2] Starter(Serverless)
- 001 Section Intro
- 002 Init Next Portfolio
- 003 Pages and Header
- 004 Base layout
- 005 Fetch posts
- 006 Portfolio detail page
- 007 Get post by id
- 008 Debug
- 009 Reactstrap
- 010 Fonts
- 011 Scss styling
- 012 Layout Improvement
- 013 Header
- 014 Self Typed
- 015 Base Page
- 017 Absolute path
- 018 Login button
- 019 Api functions - part 1
- 020 Api functions - part 2
- 021 Api functions - part 3
- 022 Loading state
- 023 Fetch post by ID
- 024 useSWR
- 025 useSWR by ID
14 - [Project 2] Authentication
- 001 Section Intro
- 002 Auth0 Registration
- 003 New Auth0 Updates!
- 004 Login API Route
- 006 Env Variables
- 007 Login Screen
- 008 Get login working
- 009 Get User
- 010 Pass user to layout
- 011 Logout
- 012 Secret page
- 013 Redirect
- 014 HOC Start
- 015 withAuth HOC
- 016 Server side props
- 017 Rework server side
- 018 withAuth Server side
- 019 About Roles
- 020 Admin Rights
- 021 Admin SSR
- 022 ENV Variables
15 - [Project 2] Portfolio Feature
- 001 Section Intro
- 002 API Server
- 003 Git Ignore
- 004 Routes and Controllers
- 005 Mongo DB
- 006 Structural changes in DB
- 007 Create portfolio data
- 008 Populate DB
- 009 Get portfolio by ID
- 010 Get Portfolios
- 011 Portfolio Card
- 012 Base Page Stylings
- 013 Get portfolio server side
- 014 Get static paths
- 015 SSR vs Static
- 016 Portfolio new page
- 017 Submit form
- 018 Datepicker
- 019 Handle Dates
- 020 Disable end date
- 021 Api route to create portfolio
- 022 Create portfolio endpoint
- 023 Testing create portfolio
- 024 JWT Middleware
- 025 Get access token
- 026 Create portfolio from App
- 027 Hook function to create portfolio
- 028 Hook creator - Api handler
- 029 Handle Errors
- 030 Portfolio edit page
- 031 Pre-fill form with data
- 032 Update portfolio on Server
- 033 Update on client
- 034 Toast messages
- 035 Handle errors
- 036 Edit and Delete buttons
- 037 Delete on server
- 038 Delete on client
- 039 Delete from state
- 040 Check role on server
- 041 Dropdown menu
- 042 Dropdown menu done
- 043 Next 9.4 Updates - part 1
- 045 Next 9.4 Updates - part 2
16 - [Project 2] Blog Feature
- 001 Section Intro
- 002 Blog Editor
- 003 Blog Server implementation
- 004 Blog endpoints
- 005 Create blog on server
- 006 Create blog from client
- 007 Redirect to blog update
- 008 Get initial content to blog update
- 009 Update blog on server
- 010 Update blog from client
- 011 Base API
- 012 Dashboard page
- 013 Fetch blogs by user
- 014 Filter blogs
- 015 Dropdown in dashboard
- 016 Generate options
- 017 Slugify title
- 018 Update blog
- 019 Mutate function
- 020 Unique slugs
- 021 Delete blog
- 022 Blog index page
- 023 Display blogs
- 024 Link to blog detail + Dates
- 025 Blog detail page
17 - [Project 2] UX Improvements
18 - [Project 2] SEO
19 - [Project 2] Deployment
20 - [Project 3] Movie App, Basics
- 001 Application Initialization
- 002 Create index page
- 003 Functional Components
- 004 Class Components
- 005 Reusable Components
- 006 Some basics styles
- 007 What is the State
- 008 Let's mutate State
- 009 Common mistakes with State
- 010 State of functional component
- 011 What are props
- 012 How web app works
- 013 Iterate over list of data
- 014 Shorten Function
- 015 Move movie data to Store
- 016 Get movie data + Promises
- 017 Use Effect
- 018 Get movies in class component
- 019 Catch error in Promise
- 020 Get initial props
- 021 More pages, more links
- 022 App container
- 023 App container props
- 024 Detail page of movie
- 025 Get movie by id
- 026 Fix links in detail page
- 027 Finishes detail page
- 028 Get images from movies
- 029 Display cover images
- 030 Get categories
- 031 Modal implementation + Close Modal
- 032 Form to create movie & Containment
- 033 Get values from the form
- 034 Handle genre changes
- 035 Handle form submit
- 036 Close Modal & Uncontrolled data functionality
- 037 Provide ID of movie
- 038 Base server implementation
- 039 More about Server
- 040 Getting movies from server
- 041 Get movie by ID
- 042 Saving movies
- 043 Delete movie
- 044 Edit page for movie
- 045 Provide data to Edit page
- 046 Final touches on Update movies functionality
- 047 Navigation fixes
- 048 Starting with filtering
- 049 Filtering finished
- 050 Styling improvements
- 051 API Endpoints
- 052 Post endpoint
21 - [Project 4] Starter(Legacy)
- 002 Project Init
- 003 More pages + Header
- 004 Base Layout
- 005 Styles
- 006 Post Data
- 007 Portfolio Detail
- 008 Get portfolio by ID
- 009 Custom server
- 010 Next routes
- 011 Reactstrap
- 012 Fonts
- 013 Cleanup + Debugging
- 014 Proper layout
- 015 Typed.js Library
- 016 Header Integration part 1
- 017 Header Integration part 2
- 018 Base Page Component and Default Props
22 - [Project 4] Authentication with Auth0
- 001 Auth Start, Login and Logout Buttons
- 002 Auth0 App Creation and Service
- 003 Handle Authentication and Callback Page
- 004 Callback Page and Redirect User
- 005 Google Setup Auth0
- 006 Save Tokens in Cookies
- 007 DisplayHide Login Buttons
- 008 Get Cookies from Server Client
- 009 Inform Header About Authentication
- 010 Verify Token Expiration Time Improvement
- 011 Auth Debugging & Display User
- 012 JWKS verify token signature
- 013 JWKS Debugging and Explanation
- 014 Decoded Token Fix!
- 015 Secret Protected Page
- 016 (HOC) High Order Components - Start
- 017 withAuth HOC - getInitialProps
- 018 Secret Endpoint Server
- 019 CheckJWT Intro to Middlewares
- 020 CheckJWT Real Middleware part 1
- 021 CheckJWT Real Middleware part 2
- 022 Axios Auth Headers
- 023 Authorise Request in Get Initial Props
- 024 Roles in Auth0
- 025 HOC to check a Role
- 026 Server Side Role Authorization
23 - [Project 4] Portfolio Feature
- 001 Different Headers
- 002 Portfolio Card Styling
- 003 React Simple Form
- 004 More Input Types
- 005 Formik Intro
- 006 Formik Specific Inputs
- 007 Formik + Bootstrap
- 008 Formik Separate Component
- 009 Validate Form with Formik
- 010 Date Picker Component
- 011 Style Date Picker
- 012 On Change Event Explanation
- 013 Date Validation
- 014 Disable End Date
- 015 Portfolio Styling Changes + Small Refactor
- 016 Database Changes
- 017 MongoDB Intro
- 018 Config Folder Dev.js
- 019 Book Model + Post Route
- 020 Books More Endpoints
- 021 Books Routes & Controllers
- 022 Portfolio Model
- 023 Portfolios Controllers & Routes
- 024 Portfolio Update & Delete Endpoint
- 025 Get Portfolios on Client Side
- 026 Create Portfolio from Client App
- 027 Handle Error in Create Form
- 028 Fix Validation + Redirect
- 029 Portfolio Update Page, Get Portfolio By Id
- 030 Initial Values in Portfolio Form
- 031 Update Portfolio on Client
- 032 Testing Update Functionality
- 033 UI Buttons Navigation
- 034 Hide Buttons for not Logged in Users
- 035 Delete Portfolio Client
- 036 Portfolio Modal Intro
- 037 Fill Modal with Portfolio Data
- 038 Stop Propagation on Click
- 039 Sort Date & Hide Initial Date Fix
24 - [Project 4] Blog Feature - Slate Editor
25 - [Project 4] Advance Blog Feature
- 001 Blog Model
- 002 Date Fix in Model
- 003 POST Blog Endopoint
- 004 Get Blog By Id Endpoint
- 005 Controll Menu
- 006 Save Blog part 1
- 007 Save Blog part 2
- 008 Save Blog part 3
- 009 Serialise & Deserialise Introduction
- 010 Serialise Rules Fix
- 011 Serialise to HTML
- 012 Save Blog Action
- 013 Disable Save Button while Saving
- 014 Blog Editor Update Page
- 015 Initial Value for Blog Editor Page
- 016 Redirect After Save
- 017 Save Blog - Lock the request
- 018 Update Blog Server
- 019 Update Blog Client
- 020 Save Blog Shortcut
- 021 Blog Toaster Messages
- 022 User Blogs Dashboard Page
- 023 Get User Specific Blogs
- 024 Display User Blogs
- 025 Dropdown Menu for the Blog Init
- 026 Dynamic Options for Dropdown Menu
- 027 Dropdown Handlers
- 028 Learn about Slug
- 029 Publish Draft Blogs
- 030 Delete and Get Published Blogs on the Server
- 031 Delete Blog from the App
- 032 Get & Display Published Blogs
- 033 Detail Blog Page - Get Page by Slug
- 034 Detail Blog Page Complete
- 035 Recap of Section part 1
- 036 Recap of Section part 2
26 - [Project 4] Page UX Improvement
- 001 About Page
- 002 Flipping Card part 1
- 003 Flipping Card part 2
- 004 Flipping Card part 3
- 005 Active Link part 1
- 006 Active Link part 2
- 007 Dropdown Blogs for Site Owner
- 008 Dropdown Blogs Styling Fixes
- 009 Set Interval Animation Fix
- 010 Dropdown Menu on Smaller Screens Fix
- 011 Height of the Image on Smaller Screens
- 012 CV Page
27 - [Project 4] SEO Improvements
28 - [Project 4] Get Ready for Deploy
- 001 Small pre-deploy Changes
- 002 Setup Environment Variables
- 003 Setup Namespace
- 004 Mongo DB & Auth0 Production Setup
- 005 First Deployment
- 006 Performance Improvements - Images & JS
- 007 Optimise CSS
- 008 Load fonts on Client
- 009 Deploy & Test after Fonts
- 010 Google Fonts & Deploy
- 011 Final Deploy and Test
- 012 Header Title Fix
- 013 Final Words