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

1. Welcome

1. Course Overview

2. Greetings.html

3. Course Source Code Repository.html

2. Installing Node.js and NPM with NVM

1. Node.js and NPM Requirement.html

2.1 NVM for Windows.html

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

3.1 GitHub - NVM.html

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

3. Getting Started with the Frontend

1. Wireframe (Articles & Article Slug).html

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

3. File System Routing to Define the Pages for Articles and Specific Article

4. Laying out the Structure, React Bootstrap, and Leveraging the Card Component

5. Moving Hard-Coded Data from JSX to a Variable and Dynamically Create Cards

6. Using getStaticProps for Specific Article and Learning about getStaticPaths

7. Accessing Context, Finding an Article by Slug, and Mapping Static Paths

8. Note about nextlink on Next.js 13.html

9. Next.js Link and React Bootstrap Breadcrumb

10. How to Redirect Pages using Next Config File

11. Improving the Page Spacing Style with a React Bootstrap Container

12. Centering the Column of a React Bootstrap Row

13. Website Header, Fixing Redirect Bug, Shared Main Content Style

4. Venturing into the Backend

1. Creating an Express application for the backend JSON API

2. Implementing the Endpoints to GET Articles and a Specific One

3. Updating the frontend to fetch articles from the JSON API

4. Updating the frontend to fetch specific article from server side

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

6. Handling Errors After Fetch Articles

7. Handling Errors After Fetch in Article Page

8. Listening to Router Events to Improve Slow Transition Experience

9. Finishing the Spinner Loading Experience for Client-side Transitions

10. Unsubscribing from Router Events in useEffect for App

5. Working with the PostgreSQL Database

1.1 PostgreSQL Website.html

1. Installing PostgreSQL, pgAdmin, psql on Windows

2. PostgreSQL Commands in Windows CMD Prompt (Including in PATH)

3.1 pgAdmin Website.html

3. Installing PostgreSQL, pgAdmin, psql on Ubuntu Linux

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

5. Creating a PostgreSQL Database for the Application

6. Creating the Table of Articles in PostgreSQL

7. Inserting New Article Records into the Table and Viewing the Data

6. Getting Started with Sequelize ORM

1. Brief Introduction to Sequelize ORM and equivalent SQL statements

2. Installing Sequelize, Postgres Driver, CLI, and Running Init

3. Updating the Configuration File for the Database Connection

4. Using dotenv to Load Environment Variables

5. Creating the Articles Table with a Sequelize Migration

6. Tweaking the Generated Migration to Fit Our Needs

7. Renaming SequelizeMeta to sequelize meta

8. Generating a Seed File to Bulk Insert Articles

9. Tweaking the Article Model to Fix Mapping with Database

10. Reimplementing the Endpoint to Fetch Articles with findAll

11. Reimplementing the Endpoint for Specific Article using Article findOne

12. Custom 404 Not Found Handler for Express API

13. Custom Generic Error Handler for Express API

14. Isolating Try Catch Into a Generic Wrapping Function

7. Back to the Frontend

1. Wireframe (Articles New).html

2. Back to the Frontend to Make a Page to Create an Article

3. Laying out the Form Structure for a New Article

4. Taking Control of the Form and Gathering Values for Submission

5. Sending JSON via a POST Request Using Fetch API

6. Making a Middleware for CORS to Allow Origin

7. Working on the Submission Error for the Form

8. Endpoint to Create an Article and Getting Stuck with CORS

9. Debugging and Overcoming the Problem with CORS

10. Filtering Out Irrelevant Fields and Creating an Article

11. Working on Backend Sequelize Validations for a New Article

12. Backend Validation and Sending Generic Error Response

13. Validating the Article Slug is Unique

14. Note about Next Link and React Bootstrap Button in Next 13.html

15. Article Submission in the Frontend and Linking to Form Page

16. Wireframe (Articles Edit).html

17. Button to Edit an Article

18. Adding Icons with React Bootstrap Icons

19. Refactoring Code in New Article Page

20. Extracting the Form into ArticleForm Component

21. Refactoring Form Submission for ArticlesNew

22. Implementing the Form to Edit an Article

23. Handling Edit Form Submission

24. Defining the API Endpoint to Update an Article

25. Populating the Edit Form with Initial Values

26. Fixing the Navigation Bug After Submission of Edit Form

27. Refactoring Backend Code with Route Handler File

28. Moving Endpoint Definitions to a Separate File

29. Disabling the Submit Button While Waiting for Response

30. Adding a Reset Button to the Article Form

31. Adding a Toast Notification Global to the Whole App

32. Showing a Toast Notification After Updating an Article

33. Backend Validation of Regular Expression Pattern

34. Leveraging HTML 5 Built-in Validations

35. Disabling HTML Validation and Doing it Programatically

36. Using React Markdown to Render the Article Body

37. Thinking about Pagination of Articles

38. How to Install Postman on Windows

39. Adding Pagination to the Backend Endpoint to Get Articles

40. Defining Total Pages and Validating Page Query

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

42. Adding Pagination User Interface to Frontend

43. Fetching Articles Using Page Query String

8. Working with Images

1. Static Assets Such as Images in Next.js

2. Note about nextimage on Next.js 13.html

3. Next.js Image Component for Optimization

4. Adding Thumbnail URL Field to Article Form

5. Migration to Add Column for Thumbnail URL

6. Finishing the Feature to Update Thumbnail

7. Storing External Assets in the Express Server

8. Adding a Thumbnail Preview to the Form

9. Using onBlur instead of onChange for Thumbnail URL Field

10. Creating a Thumbnail Upload Form

11. Starting the Endpoint for Images and Debug with Node

12. Completing the Endpoint for Images

13. Seeing New Thumbnail Preview Before you Upload

14. Replacing Existing Thumbnail Image

15. Fixing the Form Submission with Ajax Request

16. Clearing the File Input on Submission

17. Showing a Feedback Message after Thumbnail Submission

18. Preventing Multiple Requests After Submitting the Form

9. Storing Images in the Cloud

1. Creating a Bucket on Amazon AWS S3

2. Creating an IAM user with Permissions to the S3 Bucket

3.1 Loading credentials in Node.js from environment variables.html

3.2 Loading credentials in Node.js from the shared credentials file.html

3. Installing AWS SDK Client S3 for Node.js

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

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

6. Refactoring Code into Image Service

7. Validating Image Mimetype in Backend

8. Validating Image Mimetype in Frontend

9. Limiting Size of File Upload

10. Adding a Filename Extension

11. Cleaning Up and Starting from Blank Slate

10. Getting Back to Articles

1. Handling the Case of No Articles

2. Adding an Excerpt for Article

3. Handling Excerpt in the Backend

4. Fixing the Squeezed Thumbnail

5. Adding HTML Head Title to the Pages

6. Adding Meta Tags to Help with SEO

7. Adding Meta Tags for Twitter Card

8. Adding Meta Tags for Facebook with Open Graph

9. Refactoring Code to Create SEO Component

10. Adding a Markdown Preview to Article Form Body

11. Adding Heading with Markdown Toolbar for Body

12. Adding Bold Button for Markdown Toolbar

13. Leveraging Open Source GitHub Markdown Toolbar

14. Completing the Markdown Toolbar for Article Body

11. Article Images

1. How to Go About Adding Images to Articles

2. Attach Image Button and Modal

3. Refactoring Logic into AttachImageButton Component

4. Adding Upload Box Using CSS Modules for Style

5. Overview of SQL Database Schema for Article Images

6. Sequelize CLI to Generate Migration for Images Table

7. Setting Up the Sequelize ORM Model for Images

8. Testing and Debugging Sequelize Model with Node REPL

9. Migration and Model for Table to Join Articles and Images

10. Unique Constraint to Prevent Duplicate Records and Shared Images

11. Sequelize Association Between Article and Images Through Join Table

12. Including Associations in Sequelize Find Queries using Alias

13. Sequelize Association Getter Functions for Join Model

14. Listen to File Change to Make HTTP Request to Create Article Image

15. Resolving API Endpoint Conflict and Route to Create Article Images

16. Implementation of Express Handler to Create Article Image

17. Refactoring Image Service to be more Generic

18. Image Gallery Component and Endpoint to Get Article Images

19. Retrieving the Article Images for the Gallery

20. Sequelize Virtual Attribute and Rendering Images

21. Note about Next Image Prop Layout Fixed in Next 13.html

22. Image Gallery Submission and Tweaking Styles

23. Let Users Know Images are Loading

24. Handling Error when Images Fail to Load

25. Creating a Custom Hook to Access Article Images

26. Pending and Error State for Image Upload

27. Refactoring Article Image Upload into a Hook

28. Resolving Problem of Data Out of Sync Due to Misuse of Hook

29. Adding an Overlay with Action Buttons on Hover to Images in Gallery

30. Implementing the Removal of an Image through Trash Can Icon

31. Updating the Backend to Destroy Article Image

32. Fixing Bug of Image Files Lingering in Local Drive

33. Icon Button to Open Image in Full Size in New Tab

34. Adding Image Mark to Markdown Body After Selection

35. Fixing img Overflow in Markdown Region

12. Codebase Maintenance

1. Upgrading the NPM Dependency on Next.js

2. Next.js Major Version Upgrade

3. Leveraging GitHub Dependabot to Automate Package Upgrades

4. Upgrading Dependencies with Dependabot Version Updates

5. GitHub Dependabot Alerts and Security Updates

6. Static Code Analysis (SCA) with ESLint

7. GitHub Actions to Run ESLint in Continuous Integration (CI)

13. The End

1. Congratulations.html

53,700 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy-Training