Building a News Blog Web App with Next.js and Express
Building a News Blog Web App with Next.js and Express, available at $44.99, has an average rating of 4.25, with 186 lectures, based on 2 reviews, and has 41 subscribers.
You will learn about 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 This course is ideal for individuals who are Web developers looking to build an end-to-end product employing full-stack development It is particularly useful for Web developers looking to build an end-to-end product employing full-stack development.
Enroll now: Building a News Blog Web App with Next.js and Express
Summary
Title: Building a News Blog Web App with Next.js and Express
Price: $44.99
Average Rating: 4.25
Number of Lectures: 186
Number of Published Lectures: 186
Number of Curriculum Items: 186
Number of Published Curriculum Objects: 186
Original Price: $109.99
Quality Status: approved
Status: Live
What You Will 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 Should Attend
- Web developers looking to build an end-to-end product employing full-stack development
Target Audiences
- Web developers looking to build an end-to-end product employing full-stack development
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.
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
Instructors
-
Renan Martins
Software Engineer
Rating Distribution
- 1 stars: 0 votes
- 2 stars: 0 votes
- 3 stars: 0 votes
- 4 stars: 2 votes
- 5 stars: 0 votes
Frequently Asked Questions
How long do I have access to the course materials?
You can view and review the lecture materials indefinitely, like an on-demand channel.
Can I take my courses with me wherever I go?
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!
You may also like
- Top 10 Video Editing Courses to Learn in November 2024
- Top 10 Music Production Courses to Learn in November 2024
- Top 10 Animation Courses to Learn in November 2024
- Top 10 Digital Illustration Courses to Learn in November 2024
- Top 10 Renewable Energy Courses to Learn in November 2024
- Top 10 Sustainable Living Courses to Learn in November 2024
- Top 10 Ethical AI Courses to Learn in November 2024
- Top 10 Cybersecurity Fundamentals Courses to Learn in November 2024
- Top 10 Smart Home Technology Courses to Learn in November 2024
- Top 10 Holistic Health Courses to Learn in November 2024
- Top 10 Nutrition And Diet Planning Courses to Learn in November 2024
- Top 10 Yoga Instruction Courses to Learn in November 2024
- Top 10 Stress Management Courses to Learn in November 2024
- Top 10 Mindfulness Meditation Courses to Learn in November 2024
- Top 10 Life Coaching Courses to Learn in November 2024
- Top 10 Career Development Courses to Learn in November 2024
- Top 10 Relationship Building Courses to Learn in November 2024
- Top 10 Parenting Skills Courses to Learn in November 2024
- Top 10 Home Improvement Courses to Learn in November 2024
- Top 10 Gardening Courses to Learn in November 2024