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

Focused View

Renan Martins

30:13:47

163 View

1. Welcome

1. Course Overview.mp4

02:03

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.mp4

05:38

3.1 GitHub - NVM.html

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

04:21

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.mp4

08:49

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

09:00

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

28:52

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

13:07

6. Using getStaticProps for Specific Article and Learning about getStaticPaths.mp4

20:02

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

10:00

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

9. Next.js Link and React Bootstrap Breadcrumb.mp4

08:51

10. How to Redirect Pages using Next Config File.mp4

04:39

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

08:06

12. Centering the Column of a React Bootstrap Row.mp4

12:07

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

16:45

4. Venturing into the Backend

1. Creating an Express application for the backend JSON API.mp4

23:40

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

14:27

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

10:47

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

07:16

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

04:08

6. Handling Errors After Fetch Articles.mp4

14:55

7. Handling Errors After Fetch in Article Page.mp4

13:36

8. Listening to Router Events to Improve Slow Transition Experience.mp4

20:53

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

11:48

10. Unsubscribing from Router Events in useEffect for App.mp4

11:48

5. Working with the PostgreSQL Database

1.1 PostgreSQL Website.html

1. Installing PostgreSQL, pgAdmin, psql on Windows.mp4

07:52

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

02:45

3.1 pgAdmin Website.html

3. Installing PostgreSQL, pgAdmin, psql on Ubuntu Linux.mp4

09:13

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

07:52

5. Creating a PostgreSQL Database for the Application.mp4

05:10

6. Creating the Table of Articles in PostgreSQL.mp4

15:07

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

09:37

6. Getting Started with Sequelize ORM

1. Brief Introduction to Sequelize ORM and equivalent SQL statements.mp4

07:51

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

05:52

3. Updating the Configuration File for the Database Connection.mp4

05:49

4. Using dotenv to Load Environment Variables.mp4

09:24

5. Creating the Articles Table with a Sequelize Migration.mp4

12:31

6. Tweaking the Generated Migration to Fit Our Needs.mp4

09:53

7. Renaming SequelizeMeta to sequelize meta.mp4

04:16

8. Generating a Seed File to Bulk Insert Articles.mp4

12:18

9. Tweaking the Article Model to Fix Mapping with Database.mp4

13:41

10. Reimplementing the Endpoint to Fetch Articles with findAll.mp4

05:37

11. Reimplementing the Endpoint for Specific Article using Article findOne.mp4

08:07

12. Custom 404 Not Found Handler for Express API.mp4

04:14

13. Custom Generic Error Handler for Express API.mp4

13:16

14. Isolating Try Catch Into a Generic Wrapping Function.mp4

10:46

7. Back to the Frontend

1. Wireframe (Articles New).html

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

07:24

3. Laying out the Form Structure for a New Article.mp4

14:29

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

17:04

5. Sending JSON via a POST Request Using Fetch API.mp4

18:41

6. Making a Middleware for CORS to Allow Origin.mp4

14:23

7. Working on the Submission Error for the Form.mp4

07:02

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

14:43

9. Debugging and Overcoming the Problem with CORS.mp4

12:00

10. Filtering Out Irrelevant Fields and Creating an Article.mp4

11:48

11. Working on Backend Sequelize Validations for a New Article.mp4

12:44

12. Backend Validation and Sending Generic Error Response.mp4

08:31

13. Validating the Article Slug is Unique.mp4

30:28

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

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

22:21

16. Wireframe (Articles Edit).html

17. Button to Edit an Article.mp4

07:37

18. Adding Icons with React Bootstrap Icons.mp4

10:15

19. Refactoring Code in New Article Page.mp4

08:44

20. Extracting the Form into ArticleForm Component.mp4

22:39

21. Refactoring Form Submission for ArticlesNew.mp4

07:56

22. Implementing the Form to Edit an Article.mp4

09:41

23. Handling Edit Form Submission.mp4

11:35

24. Defining the API Endpoint to Update an Article.mp4

17:44

25. Populating the Edit Form with Initial Values.mp4

12:05

26. Fixing the Navigation Bug After Submission of Edit Form.mp4

03:04

27. Refactoring Backend Code with Route Handler File.mp4

13:40

28. Moving Endpoint Definitions to a Separate File.mp4

04:09

29. Disabling the Submit Button While Waiting for Response.mp4

08:12

30. Adding a Reset Button to the Article Form.mp4

07:50

31. Adding a Toast Notification Global to the Whole App.mp4

14:10

32. Showing a Toast Notification After Updating an Article.mp4

07:56

33. Backend Validation of Regular Expression Pattern.mp4

13:33

34. Leveraging HTML 5 Built-in Validations.mp4

09:23

35. Disabling HTML Validation and Doing it Programatically.mp4

11:45

36. Using React Markdown to Render the Article Body.mp4

19:23

37. Thinking about Pagination of Articles.mp4

04:52

38. How to Install Postman on Windows.mp4

02:37

39. Adding Pagination to the Backend Endpoint to Get Articles.mp4

14:40

40. Defining Total Pages and Validating Page Query.mp4

09:53

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

42. Adding Pagination User Interface to Frontend.mp4

13:21

43. Fetching Articles Using Page Query String.mp4

04:27

8. Working with Images

1. Static Assets Such as Images in Next.js.mp4

06:43

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

3. Next.js Image Component for Optimization.mp4

09:15

4. Adding Thumbnail URL Field to Article Form.mp4

06:58

5. Migration to Add Column for Thumbnail URL.mp4

09:08

6. Finishing the Feature to Update Thumbnail.mp4

08:10

7. Storing External Assets in the Express Server.mp4

10:21

8. Adding a Thumbnail Preview to the Form.mp4

13:42

9. Using onBlur instead of onChange for Thumbnail URL Field.mp4

06:10

10. Creating a Thumbnail Upload Form.mp4

19:52

11. Starting the Endpoint for Images and Debug with Node.mp4

13:42

12. Completing the Endpoint for Images.mp4

25:03

13. Seeing New Thumbnail Preview Before you Upload.mp4

11:22

14. Replacing Existing Thumbnail Image.mp4

07:33

15. Fixing the Form Submission with Ajax Request.mp4

17:28

16. Clearing the File Input on Submission.mp4

10:02

17. Showing a Feedback Message after Thumbnail Submission.mp4

10:10

18. Preventing Multiple Requests After Submitting the Form.mp4

03:51

9. Storing Images in the Cloud

1. Creating a Bucket on Amazon AWS S3.mp4

04:45

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

07:58

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.mp4

12:10

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

12:35

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

10:15

6. Refactoring Code into Image Service.mp4

14:31

7. Validating Image Mimetype in Backend.mp4

08:01

8. Validating Image Mimetype in Frontend.mp4

03:08

9. Limiting Size of File Upload.mp4

03:56

10. Adding a Filename Extension.mp4

05:30

11. Cleaning Up and Starting from Blank Slate.mp4

04:30

10. Getting Back to Articles

1. Handling the Case of No Articles.mp4

03:06

2. Adding an Excerpt for Article.mp4

07:16

3. Handling Excerpt in the Backend.mp4

12:50

4. Fixing the Squeezed Thumbnail.mp4

03:14

5. Adding HTML Head Title to the Pages.mp4

03:47

6. Adding Meta Tags to Help with SEO.mp4

05:09

7. Adding Meta Tags for Twitter Card.mp4

08:36

8. Adding Meta Tags for Facebook with Open Graph.mp4

08:06

9. Refactoring Code to Create SEO Component.mp4

20:59

10. Adding a Markdown Preview to Article Form Body.mp4

14:33

11. Adding Heading with Markdown Toolbar for Body.mp4

27:11

12. Adding Bold Button for Markdown Toolbar.mp4

09:46

13. Leveraging Open Source GitHub Markdown Toolbar.mp4

08:29

14. Completing the Markdown Toolbar for Article Body.mp4

13:00

11. Article Images

1. How to Go About Adding Images to Articles.mp4

03:58

2. Attach Image Button and Modal.mp4

08:04

3. Refactoring Logic into AttachImageButton Component.mp4

07:45

4. Adding Upload Box Using CSS Modules for Style.mp4

12:26

5. Overview of SQL Database Schema for Article Images.mp4

07:26

6. Sequelize CLI to Generate Migration for Images Table.mp4

06:11

7. Setting Up the Sequelize ORM Model for Images.mp4

07:00

8. Testing and Debugging Sequelize Model with Node REPL.mp4

07:39

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

09:30

10. Unique Constraint to Prevent Duplicate Records and Shared Images.mp4

13:22

11. Sequelize Association Between Article and Images Through Join Table.mp4

13:19

12. Including Associations in Sequelize Find Queries using Alias.mp4

13:30

13. Sequelize Association Getter Functions for Join Model.mp4

15:20

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

07:59

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

05:07

16. Implementation of Express Handler to Create Article Image.mp4

14:55

17. Refactoring Image Service to be more Generic.mp4

10:52

18. Image Gallery Component and Endpoint to Get Article Images.mp4

15:30

19. Retrieving the Article Images for the Gallery.mp4

11:39

20. Sequelize Virtual Attribute and Rendering Images.mp4

11:05

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

22. Image Gallery Submission and Tweaking Styles.mp4

07:14

23. Let Users Know Images are Loading.mp4

07:25

24. Handling Error when Images Fail to Load.mp4

04:48

25. Creating a Custom Hook to Access Article Images.mp4

07:50

26. Pending and Error State for Image Upload.mp4

10:42

27. Refactoring Article Image Upload into a Hook.mp4

11:29

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

08:06

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

13:00

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

14:51

31. Updating the Backend to Destroy Article Image.mp4

14:23

32. Fixing Bug of Image Files Lingering in Local Drive.mp4

03:23

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

02:31

34. Adding Image Mark to Markdown Body After Selection.mp4

17:14

35. Fixing img Overflow in Markdown Region.mp4

17:58

12. Codebase Maintenance

1. Upgrading the NPM Dependency on Next.js.mp4

16:02

2. Next.js Major Version Upgrade.mp4

31:59

3. Leveraging GitHub Dependabot to Automate Package Upgrades.mp4

06:49

4. Upgrading Dependencies with Dependabot Version Updates.mp4

15:50

5. GitHub Dependabot Alerts and Security Updates.mp4

12:26

6. Static Code Analysis (SCA) with ESLint.mp4

21:52

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

12:49

13. The End

1. Congratulations.html

Description

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

Who is this for?

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

More details

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.
Who this course is for:
Web developers looking to build an end-to-end product employing full-stack development

User Reviews

Rating

average 0

Total votes0

Focused display

Next JS

Renan Martins

Instructor's Courses

Renan Martins is a software engineer who loves to learn and teach new technologies. He believes in a universal access to education, no matter where people come from. Being practical and embracing simplicity, his courses allow the student to directly apply what is learned in one’s own personal projects. Renan Martins graduated with a B.S. in Electrical Engineering from the University of California, Los Angeles (UCLA). He is currently a full-stack software developer in the San Francisco Bay Area.Renan Martins é um engenheiro de software que adora aprender e ensinar novas tecnologias. Acredita que todos devem ter acesso à educação, de qualquer lugar do mundo. Seus cursos ensinam de maneira simples e prática, permitindo o estudante facilmente aplicar o que aprendeu em seus projetos pessoais. Renan Martins é formado em Engenharia Elétrica pela Universidade de Califórnia, Los Angeles (UCLA), e trabalha em tempo integral como desenvolvedor full stack de software.All courses by this instructor belong to NENKAN LLC. NBK Mundo Tech and NBK Tech World are a property of NENKAN LLC.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.