使用 React 和 Node 完成 Next.js - 精美的 Portfolio 应用
Complete Next.js with React & Node - Beautiful Portfolio App
- 01 - Introduction
- 001 Project Overview
- 002 How to resolve issues + Project structure
- 02 - [Project 1] Init the Project
- 001 Project Introduction
- 002 Project initialisation
- 003 Folder Structure
- 004 _app Component
- 005 Components
- 006 Class components
- 007 JSX
- 008 Arrow Functions
- 03 - [Project 1] State & Props
- 001 State
- 002 Increment state
- 003 Change state
- 004 Class state
- 005 Props
- 006 Use effect
- 007 Class props
- 008 How web apps work
- 009 More about props
- 04 - [Project 1] Layout
- 001 Bulma css
- 002 Separation into components
- 003 Absolute path
- 004 Layout
- 005 Resource data
- 006 Highlight list
- 007 Resource list
- 05 - [Project 1] Data fetching
- 001 Api functions
- 002 Get static props
- 003 Get static vs get server side props
- 004 [Server] Api app
- 005 [Server] Api endpoints
- 006 [Server] Get resources from API
- 007 Get data from 3001
- 008 Cors and Proxy
- 06 - [Project 1] Forms & Create Resource
- 002 Resource new page
- 003 Resource form
- 004 More inputs
- 005 Form values
- 006 Form Submit
- 007 Handle title change
- 008 Handle all inputs change
- 07 - [Project 1] Post Request
- 001 Send a post request
- 002 Attach data in the request
- 003 Axios
- 004 Validate data
- 005 Catching error
- 006 [Server] post endpoint
- 007 [Server] finishing post endpoint
- 008 Handling post request in API
- 009 Redirect after create
- 08 - [Project 1] Resource Details
- 001 [Server] get resource by ID endpoint
- 002 Resource detail page
- 003 Resource page fetch data
- 004 Link to detail page
- 005 Get Initial Props
- 006 Get static paths
- 007 Fallback true
- 008 Revalidate
- 09 - [Project 1] Resource Edit
- 001 Resource edit page
- 002 Resource Form Component
- 003 Resource Edit Form
- 004 Resource Patch API endpoint
- 005 [Server] Patch Endpoint
- 10 - [Project 1] Active Resource
- 001 Active resource component
- 002 Active resource patch request
- 003 [Server] Activate resource
- 004 [Server] Active resource endpoint
- 005 Fetch active resource in next
- 006 Time to finish in seconds
- 007 Seconds state
- 11 - [Project 1] UX Improvements
- 001 UX improvements
- 002 Complete resource
- 003 [Server] Forbid update of not complete resource
- 004 Resource Status
- 005 Resource status color
- 006 Display buttons on inactive ones
- 007 Env variables
- 12 - [Project 1] Deployment
- 001 Git & Heroku
- 002 Pushing Code to Github
- 003 Deploying to Heroku
- 004 Production env file
- 005 Deployment To Vercel
- 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
- 001 Section Intro
- 002 Flip the card
- 003 About page
- 004 Dropdown resizing
- 005 Home screen improvements
- 006 Active Links
- 007 CV Page
- 008 Try to get an access token
- 009 Get an access token
- 010 Get a user
- 011 Fix blog by slug
- 012 Get blogs with user
- 013 Display user
- 18 - [Project 2] SEO
- 001 Section Intro
- 002 Head title
- 003 Index page type
- 004 Meta description
- 005 Open graph
- 006 Canonical
- 007 Fonts, images, favicon
- 008 More about fonts
- 009 Portfolio detail
- 010 Portfolio detail data
- 011 Change images
- 19 - [Project 2] Deployment
- 001 Section Intro
- 002 Deploying start
- 003 API to heroku
- 004 Deployment to Heroku
- 005 Respond with html page
- 006 Testing with PROD api
- 007 Small fixes
- 008 Deployment to Vercel
- 009 Testing Next.js app
- 010 Course Ending
- 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
- 001 Blog Listing
- 002 Blog Listing Login Button Fix
- 003 Slate Editor Intro
- 004 Event Handler in Slate
- 005 Custom Blocks Slate
- 006 Custom Marks Slate
- 007 Hover Menu Start
- 008 Hover Menu Debugging
- 009 Hover Menu Block Buttons
- 010 Block Formatting Debugging
- 011 Styling Improvement of 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
- 001 Title Explanation
- 002 Don't forget about Description
- 003 Open Graph
- 004 Robots
- 005 Cannonical & H1 & alt
- 006 Favicon
- 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
- 001 Setup Completed Project