Building A News Blog Web App With Next.Js And Express

Develop a full stack news portal website with JavaScript, Nodejs, Nextjs, Sequelize, Postgres, Bootstrap, Markdown

What you'll learn

Building a frontend web application with Nextjs, React Bootstrap

Building a Nodejs backend web application API that serves JSON using Express

Being involved in end-to-end full-stack development of a web application

Leverage Sequelize as ORM and PostgreSQL for database

Requirements

Knowledge of HTML, CSS, JavaScript, React

Description

In this course I teach you to build a web application that can be used as a news website or a blog portal. It is a very practical course and covers end-to-end development, from the frontend to the backend, including database and leveraging the cloud.Nextjs, the React framework, is used for the frontend. You get to work with HTML, CSS, Sass, JavaScript, Bootstrap, Markdown.Express, the serverside web framework, is used for the backend. You get to work with Node.js (serverside JavaScript).PostgresSQL is used for the database. You get to work with Sequelize for Object-Relational Mapping (ORM).The course covers building the frontend to display a list of articles, see an article, edit an article. It also teaches you to leverage Markdown as the format to write the articles. React Bootstrap (including Icons) is used as the user interface building blocks. You get to learn about form submission for article data as well as for uploading images.The course also covers building a backend API that serves data in the JSON format. It covers hooking up your API to a database to store data. You get to learn how to create migrations and models for the Sequelize ORM, that serves as a intermediary between the API and the database.The course pays special attention to handling image upload and storage in the backend, integrating with an external cloud solution. In particular, Amazon Web Services (AWS) Simple Storage Service (S3) is used to store image files in the cloud. The images are used as a thumbnail for the article and to display in the body of the article.After taking the course you will get a lot of experience going about fullstack web development and building a web application end to end. You can build upon the knowledge and experience from this course and expand the application to conform your own needs and endeavours.

Overview

Section 1: Welcome

Lecture 1 Course Overview

Lecture 2 Greetings

Lecture 3 Course Source Code Repository

Section 2: Installing Node.js and NPM with NVM

Lecture 4 Node.js and NPM Requirement

Lecture 5 Install Node.js and NPM with NVM for Windows

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

Section 3: Getting Started with the Frontend

Lecture 7 Wireframe (Articles & Article Slug)

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

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

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

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

Lecture 12 Using getStaticProps for Specific Article and Learning about getStaticPaths

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

Lecture 14 Note about next/link on Next.js 13

Lecture 15 Next.js Link and React Bootstrap Breadcrumb

Lecture 16 How to Redirect Pages using Next Config File

Lecture 17 Improving the Page Spacing Style with a React Bootstrap Container

Lecture 18 Centering the Column of a React Bootstrap Row

Lecture 19 Website Header, Fixing Redirect Bug, Shared Main Content Style

Section 4: Venturing into the Backend

Lecture 20 Creating an Express application for the backend JSON API

Lecture 21 Implementing the Endpoints to GET Articles and a Specific One

Lecture 22 Updating the frontend to fetch articles from the JSON API

Lecture 23 Updating the frontend to fetch specific article from server side

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

Lecture 25 Handling Errors After Fetch Articles

Lecture 26 Handling Errors After Fetch in Article Page

Lecture 27 Listening to Router Events to Improve Slow Transition Experience

Lecture 28 Finishing the Spinner Loading Experience for Client-side Transitions

Lecture 29 Unsubscribing from Router Events in useEffect for App

Section 5: Working with the PostgreSQL Database

Lecture 30 Installing PostgreSQL, pgAdmin, psql on Windows

Lecture 31 PostgreSQL Commands in Windows CMD Prompt (Including in PATH)

Lecture 32 Installing PostgreSQL, pgAdmin, psql on Ubuntu Linux

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

Lecture 34 Creating a PostgreSQL Database for the Application

Lecture 35 Creating the Table of Articles in PostgreSQL

Lecture 36 Inserting New Article Records into the Table and Viewing the Data

Section 6: Getting Started with Sequelize ORM

Lecture 37 Brief Introduction to Sequelize ORM and equivalent SQL statements

Lecture 38 Installing Sequelize, Postgres Driver, CLI, and Running Init

Lecture 39 Updating the Configuration File for the Database Connection

Lecture 40 Using dotenv to Load Environment Variables

Lecture 41 Creating the Articles Table with a Sequelize Migration

Lecture 42 Tweaking the Generated Migration to Fit Our Needs

Lecture 43 Renaming SequelizeMeta to sequelize_meta

Lecture 44 Generating a Seed File to Bulk Insert Articles

Lecture 45 Tweaking the Article Model to Fix Mapping with Database

Lecture 46 Reimplementing the Endpoint to Fetch Articles with findAll

Lecture 47 Reimplementing the Endpoint for Specific Article using Article findOne

Lecture 48 Custom 404 Not Found Handler for Express API

Lecture 49 Custom Generic Error Handler for Express API

Lecture 50 Isolating Try Catch Into a Generic Wrapping Function

Section 7: Back to the Frontend

Lecture 51 Wireframe (Articles New)

Lecture 52 Back to the Frontend to Make a Page to Create an Article

Lecture 53 Laying out the Form Structure for a New Article

Lecture 54 Taking Control of the Form and Gathering Values for Submission

Lecture 55 Sending JSON via a POST Request Using Fetch API

Lecture 56 Making a Middleware for CORS to Allow Origin

Lecture 57 Working on the Submission Error for the Form

Lecture 58 Endpoint to Create an Article and Getting Stuck with CORS

Lecture 59 Debugging and Overcoming the Problem with CORS

Lecture 60 Filtering Out Irrelevant Fields and Creating an Article

Lecture 61 Working on Backend Sequelize Validations for a New Article

Lecture 62 Backend Validation and Sending Generic Error Response

Lecture 63 Validating the Article Slug is Unique

Lecture 64 Note about Next Link and React Bootstrap Button in Next 13

Lecture 65 Article Submission in the Frontend and Linking to Form Page

Lecture 66 Wireframe (Articles Edit)

Lecture 67 Button to Edit an Article

Lecture 68 Adding Icons with React Bootstrap Icons

Lecture 69 Refactoring Code in New Article Page

Lecture 70 Extracting the Form into ArticleForm Component

Lecture 71 Refactoring Form Submission for ArticlesNew

Lecture 72 Implementing the Form to Edit an Article

Lecture 73 Handling Edit Form Submission

Lecture 74 Defining the API Endpoint to Update an Article

Lecture 75 Populating the Edit Form with Initial Values

Lecture 76 Fixing the Navigation Bug After Submission of Edit Form

Lecture 77 Refactoring Backend Code with Route Handler File

Lecture 78 Moving Endpoint Definitions to a Separate File

Lecture 79 Disabling the Submit Button While Waiting for Response

Lecture 80 Adding a Reset Button to the Article Form

Lecture 81 Adding a Toast Notification Global to the Whole App

Lecture 82 Showing a Toast Notification After Updating an Article

Lecture 83 Backend Validation of Regular Expression Pattern

Lecture 84 Leveraging HTML 5 Built-in Validations

Lecture 85 Disabling HTML Validation and Doing it Programatically

Lecture 86 Using React Markdown to Render the Article Body

Lecture 87 Thinking about Pagination of Articles

Lecture 88 How to Install Postman on Windows

Lecture 89 Adding Pagination to the Backend Endpoint to Get Articles

Lecture 90 Defining Total Pages and Validating Page Query

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

Lecture 92 Adding Pagination User Interface to Frontend

Lecture 93 Fetching Articles Using Page Query String

Section 8: Working with Images

Lecture 94 Static Assets Such as Images in Next.js

Lecture 95 Note about next/image on Next.js 13

Lecture 96 Next.js Image Component for Optimization

Lecture 97 Adding Thumbnail URL Field to Article Form

Lecture 98 Migration to Add Column for Thumbnail URL

Lecture 99 Finishing the Feature to Update Thumbnail

Lecture 100 Storing External Assets in the Express Server

Lecture 101 Adding a Thumbnail Preview to the Form

Lecture 102 Using onBlur instead of onChange for Thumbnail URL Field

Lecture 103 Creating a Thumbnail Upload Form

Lecture 104 Starting the Endpoint for Images and Debug with Node

Lecture 105 Completing the Endpoint for Images

Lecture 106 Seeing New Thumbnail Preview Before you Upload

Lecture 107 Replacing Existing Thumbnail Image

Lecture 108 Fixing the Form Submission with Ajax Request

Lecture 109 Clearing the File Input on Submission

Lecture 110 Showing a Feedback Message after Thumbnail Submission

Lecture 111 Preventing Multiple Requests After Submitting the Form

Section 9: Storing Images in the Cloud

Lecture 112 Creating a Bucket on Amazon AWS S3

Lecture 113 Creating an IAM user with Permissions to the S3 Bucket

Lecture 114 Installing AWS SDK Client S3 for Node.js

Lecture 115 Uploading a File to AWS S3 using SDK for Node.js

Lecture 116 Deleting a File From Bucket using AWS SDK for Node.js

Lecture 117 Refactoring Code into Image Service

Lecture 118 Validating Image Mimetype in Backend

Lecture 119 Validating Image Mimetype in Frontend

Lecture 120 Limiting Size of File Upload

Lecture 121 Adding a Filename Extension

Lecture 122 Cleaning Up and Starting from Blank Slate

Section 10: Getting Back to Articles

Lecture 123 Handling the Case of No Articles

Lecture 124 Adding an Excerpt for Article

Lecture 125 Handling Excerpt in the Backend

Lecture 126 Fixing the Squeezed Thumbnail

Lecture 127 Adding HTML Head Title to the Pages

Lecture 128 Adding Meta Tags to Help with SEO

Lecture 129 Adding Meta Tags for Twitter Card

Lecture 130 Adding Meta Tags for Facebook with Open Graph

Lecture 131 Refactoring Code to Create SEO Component

Lecture 132 Adding a Markdown Preview to Article Form Body

Lecture 133 Adding Heading with Markdown Toolbar for Body

Lecture 134 Adding Bold Button for Markdown Toolbar

Lecture 135 Leveraging Open Source GitHub Markdown Toolbar

Lecture 136 Completing the Markdown Toolbar for Article Body

Section 11: Article Images

Lecture 137 How to Go About Adding Images to Articles

Lecture 138 Attach Image Button and Modal

Lecture 139 Refactoring Logic into AttachImageButton Component

Lecture 140 Adding Upload Box Using CSS Modules for Style

Lecture 141 Overview of SQL Database Schema for Article Images

Lecture 142 Sequelize CLI to Generate Migration for Images Table

Lecture 143 Setting Up the Sequelize ORM Model for Images

Lecture 144 Testing and Debugging Sequelize Model with Node REPL

Lecture 145 Migration and Model for Table to Join Articles and Images

Lecture 146 Unique Constraint to Prevent Duplicate Records and Shared Images

Lecture 147 Sequelize Association Between Article and Images Through Join Table

Lecture 148 Including Associations in Sequelize Find Queries using Alias

Lecture 149 Sequelize Association Getter Functions for Join Model

Lecture 150 Listen to File Change to Make HTTP Request to Create Article Image

Lecture 151 Resolving API Endpoint Conflict and Route to Create Article Images

Lecture 152 Implementation of Express Handler to Create Article Image

Lecture 153 Refactoring Image Service to be more Generic

Lecture 154 Image Gallery Component and Endpoint to Get Article Images

Lecture 155 Retrieving the Article Images for the Gallery

Lecture 156 Sequelize Virtual Attribute and Rendering Images

Lecture 157 Note about Next Image Prop Layout Fixed in Next 13

Lecture 158 Image Gallery Submission and Tweaking Styles

Lecture 159 Let Users Know Images are Loading

Lecture 160 Handling Error when Images Fail to Load

Lecture 161 Creating a Custom Hook to Access Article Images

Lecture 162 Pending and Error State for Image Upload

Lecture 163 Refactoring Article Image Upload into a Hook

Lecture 164 Resolving Problem of Data Out of Sync Due to Misuse of Hook

Lecture 165 Adding an Overlay with Action Buttons on Hover to Images in Gallery

Lecture 166 Implementing the Removal of an Image through Trash Can Icon

Lecture 167 Updating the Backend to Destroy Article Image

Lecture 168 Fixing Bug of Image Files Lingering in Local Drive

Lecture 169 Icon Button to Open Image in Full Size in New Tab

Lecture 170 Adding Image Mark to Markdown Body After Selection

Lecture 171 Fixing img Overflow in Markdown Region

Section 12: Codebase Maintenance

Lecture 172 Upgrading the NPM Dependency on Next.js

Lecture 173 Next.js Major Version Upgrade

Lecture 174 Leveraging GitHub Dependabot to Automate Package Upgrades

Lecture 175 Upgrading Dependencies with Dependabot Version Updates

Lecture 176 GitHub Dependabot Alerts and Security Updates

Lecture 177 Static Code Analysis (SCA) with ESLint

Lecture 178 GitHub Actions to Run ESLint in Continuous Integration (CI)

Section 13: The End

Lecture 179 Congratulations

Web developers looking to build an end-to-end product employing full-stack development