Building a News Blog Web App with Next.js and Express

Course Curriculum

Chapter 1: Welcome

Lecture 1: Course Overview

Lecture 2: Greetings

Lecture 3: Course Source Code Repository

Chapter 2: Installing Node.js and NPM with NVM

Lecture 1: Node.js and NPM Requirement

Lecture 2: Install Node.js and NPM with NVM for Windows

Lecture 3: Install Node.js and NPM with NVM for Ubuntu Linux

Chapter 3: Getting Started with the Frontend

Lecture 1: Wireframe (Articles & Article Slug)

Lecture 2: Creating the Next.js project for the Web Client Application in the Frontend

Lecture 3: Note about File System Routing in Next.js 13

Lecture 4: File System Routing to Define the Pages for Articles and Specific Article

Lecture 5: Laying out the Structure, React Bootstrap, and Leveraging the Card Component

Lecture 6: Moving Hard-Coded Data from JSX to a Variable and Dynamically Create Cards

Lecture 7: Using getStaticProps for Specific Article and Learning about getStaticPaths

Lecture 8: Accessing Context, Finding an Article by Slug, and Mapping Static Paths

Lecture 9: Note about next/link on Next.js 13

Lecture 10: Next.js Link and React Bootstrap Breadcrumb

Lecture 11: How to Redirect Pages using Next Config File

Lecture 12: Improving the Page Spacing Style with a React Bootstrap Container

Lecture 13: Centering the Column of a React Bootstrap Row

Lecture 14: Website Header, Fixing Redirect Bug, Shared Main Content Style

Chapter 4: Venturing into the Backend

Lecture 1: Creating an Express application for the backend JSON API

Lecture 2: Implementing the Endpoints to GET Articles and a Specific One

Lecture 3: Updating the frontend to fetch articles from the JSON API

Lecture 4: Updating the frontend to fetch specific article from server side

Lecture 5: Creating a Custom 404 Not Found Page in Next.js

Lecture 6: Handling Errors After Fetch Articles

Lecture 7: Handling Errors After Fetch in Article Page

Lecture 8: Listening to Router Events to Improve Slow Transition Experience

Lecture 9: Finishing the Spinner Loading Experience for Client-side Transitions

Lecture 10: Unsubscribing from Router Events in useEffect for App

Chapter 5: Working with the PostgreSQL Database

Lecture 1: Installing PostgreSQL, pgAdmin, psql on Windows

Lecture 2: PostgreSQL Commands in Windows CMD Prompt (Including in PATH)

Lecture 3: Installing PostgreSQL, pgAdmin, psql on Ubuntu Linux

Lecture 4: Creating a PostgreSQL Role (aka User) for the Application

Lecture 5: Creating a PostgreSQL Database for the Application

Lecture 6: Creating the Table of Articles in PostgreSQL

Lecture 7: Inserting New Article Records into the Table and Viewing the Data

Chapter 6: Getting Started with Sequelize ORM

Lecture 1: Brief Introduction to Sequelize ORM and equivalent SQL statements

Lecture 2: Installing Sequelize, Postgres Driver, CLI, and Running Init

Lecture 3: Updating the Configuration File for the Database Connection

Lecture 4: Using dotenv to Load Environment Variables

Lecture 5: Creating the Articles Table with a Sequelize Migration

Lecture 6: Tweaking the Generated Migration to Fit Our Needs

Lecture 7: Renaming SequelizeMeta to sequelize_meta

Lecture 8: Generating a Seed File to Bulk Insert Articles

Lecture 9: Tweaking the Article Model to Fix Mapping with Database

Lecture 10: Reimplementing the Endpoint to Fetch Articles with findAll

Lecture 11: Reimplementing the Endpoint for Specific Article using Article findOne

Lecture 12: Custom 404 Not Found Handler for Express API

Lecture 13: Custom Generic Error Handler for Express API

Lecture 14: Isolating Try Catch Into a Generic Wrapping Function

Chapter 7: Back to the Frontend

Lecture 1: Wireframe (Articles New)

Lecture 2: Back to the Frontend to Make a Page to Create an Article

Lecture 3: Laying out the Form Structure for a New Article

Lecture 4: Taking Control of the Form and Gathering Values for Submission

Lecture 5: Sending JSON via a POST Request Using Fetch API

Lecture 6: Making a Middleware for CORS to Allow Origin

Lecture 7: Working on the Submission Error for the Form

Lecture 8: Endpoint to Create an Article and Getting Stuck with CORS

Lecture 9: Debugging and Overcoming the Problem with CORS

Lecture 10: Filtering Out Irrelevant Fields and Creating an Article

Lecture 11: Working on Backend Sequelize Validations for a New Article

Lecture 12: Backend Validation and Sending Generic Error Response

Lecture 13: Validating the Article Slug is Unique

Lecture 14: Note about Next Link and React Bootstrap Button in Next 13

Lecture 15: Article Submission in the Frontend and Linking to Form Page

Lecture 16: Wireframe (Articles Edit)

Lecture 17: Button to Edit an Article

Lecture 18: Adding Icons with React Bootstrap Icons

Lecture 19: Refactoring Code in New Article Page

Lecture 20: Extracting the Form into ArticleForm Component

Lecture 21: Refactoring Form Submission for ArticlesNew

Lecture 22: Implementing the Form to Edit an Article

Lecture 23: Handling Edit Form Submission

Lecture 24: Defining the API Endpoint to Update an Article

Lecture 25: Populating the Edit Form with Initial Values

Lecture 26: Fixing the Navigation Bug After Submission of Edit Form

Lecture 27: Refactoring Backend Code with Route Handler File

Lecture 28: Moving Endpoint Definitions to a Separate File

Lecture 29: Disabling the Submit Button While Waiting for Response

Lecture 30: Adding a Reset Button to the Article Form

Lecture 31: Adding a Toast Notification Global to the Whole App

Lecture 32: Showing a Toast Notification After Updating an Article

Lecture 33: Backend Validation of Regular Expression Pattern

Lecture 34: Leveraging HTML 5 Built-in Validations

Lecture 35: Disabling HTML Validation and Doing it Programatically

Lecture 36: Using React Markdown to Render the Article Body

Lecture 37: Thinking about Pagination of Articles

Lecture 38: How to Install Postman on Windows

Lecture 39: Adding Pagination to the Backend Endpoint to Get Articles

Lecture 40: Defining Total Pages and Validating Page Query

Lecture 41: Note about Next Link and Bootstrap Pagination.Item in Next 13

Lecture 42: Adding Pagination User Interface to Frontend