Getting Started
- What is Next.js? What is Server-Side Rendering?
- Tools Required for this Course
Project 1 - Portfolio App
- Setting up Portfolio Project
- Next Links, Serving Static Images
- Components in Next, CSS with Styled JSX
- Next Router, NProgress for Route Loading State
- Custom Document Page
- Fetching Data with getInitialProps
- Custom Error Page
- Dynamic Pages with Query Parameters
- Cleaner Urls without Query Params
- Deploying our App as a Static Site to Now v1 (Outdated)
- Deploying Static Sites with Now v2 (Updated)
Project 2 - Hacker News Progressive Web App
- Intro to Hacker News Clone
- Init Hacker Next Project
- Handling Errors with Built-in Error Page and Try / Catch
- Styling the News Stories
- Adding Layout Component, Head Component for SEO
- Fetching Next Page of Stories, Adding Pagination with Query Params
- Building the Individual Story Page
- Adding Comments to Story / Nested Comments with Recursive Component
- Using Next Router to Add a Back Button
- Generating a Web App Manifest to our Project (Optional)
- Making our App Run Offline with Service Workers (Optional)
- Deploying Hacker Next with Heroku
Project 3 - Cookie Authentication with Express
- Intro to User Authentication Project
- Init Project, Create Express Server
- Using the getRequestHandler, Adding Nodemon
- Create Login Form, Handle Post Request on Server
- Authenticating Users with Signed Cookies
- Fetching a User's Profile upon Login
- Displaying / Handling Errors upon Login
- Creating a Layout Component / Navigation
- Persisting User Session with Custom Document Page
- Persisting User Sessions on the Client and Server
- Logging out Users, Clearing Cookies
- Creating Protected Routes / Route Guards
- Deploying Next Cookie Auth with Heroku
Final Project - Full-Stack Social Media App (Express API)
- Demo of our Social Media App
- Git Clone and Install Project Dependencies
- Add our MongoDB Atlas Database
- Installing the Postman Desktop App
- Overview of Server Code
- Validate Signup and Signup
- Signin with Passport
- Signout and checkAuth Middleware
- Get All Users
- Using Router.param() to Get / Delete User
- Getting the Authenticated User's Data
- Getting the User's Profile
- Following Users
- Unfollowing Users
- Getting a User Feed
- Updating Users / Uploading and Resizing Avatars
- Adding Posts / Uploading and Resizing Post Images
- Getting Posts By User / Getting User's Post Feed
- Liking and Unliking our Posts
- Adding and Removing Comments to our Posts
- Deleting Posts
Final Project - Full-Stack Social Media App (React Client)
- Moving onto our Client, Generating an App Color Palette
- Building the Navbar Component
- Creating Active Link Component / Prefetching Pages
- Basic Functionality for our Signup Page
- Creating Error Snackbar and Success Dialog in Signup
- Building Signin Form / Ability to Signin
- Toggling Auth / UnAuth Navigation and Implementing Protected Routes
- Creating Custom Routes with Express
- Displaying User Profiles on the Profile Page
- Follow / Unfollow Users from Profile Page
- Deleting Auth Users from Profile Page
- Create Edit Profile Page, Populate Form with Auth User Data
- Updating our User with the Edit Profile Form
- Showing Error and Success for Editing the User
- Creating a Splash Page for UnAuth Users
- Building Index Layout and User Feed
- Updating State with NewPost
- Adding Posts from NewPost Component
- Displaying Posts in the Post Component
- Deleting Posts, Removing them from UI
- Liking / Unliking Posts
- Displaying Like / Unlike Status in UI
- Using Pure Components
- Scaffolding Comments Component
- Adding and Displaying Comments
- Deleting Comments
- Displaying User Posts on Profile Page
- Adding Post Feed Functionality to our Profile Page
- Displaying Following / Followers in Profile Page
- Formatting Times / Dates with Date-Fns
- Deploying Next Connect with Heroku
