Home>Courses>Building Full-Stack Web Applications With Node.js and React

Building Full-Stack Web Applications With Node.js and React

Gain insights into building robust full-stack web apps using Node.js and React. Learn server-side with Node.js, client-side with React, and deploy with Heroku.

Beginner

53 Lessons

17h

Certificate of Completion

Gain insights into building robust full-stack web apps using Node.js and React. Learn server-side with Node.js, client-side with React, and deploy with Heroku.

AI-POWERED

Code Feedback

Explanations

AI-POWERED

Code Feedback

Explanations

This course includes

42 Playgrounds

8 Quizzes

Course Overview

What You'll Learn

Course Content

Apply Your Skills

Course Overview

Node.js is a popular JavaScript runtime environment used to create server-side applications. It is an ideal tool for building robust, full-stack web applications with React. This course is an introduction to web development leveraging these two popular technologies. You’ll learn server-side applications with Node.js and learn to add database functionality with MongoDB fitting into the Express application framework. You’ll then build a user authorization system using the JSON Web Token (JWT). You’ll then f...Show More

Node.js is a popular JavaScript runtime environment used to create server-side applications. It is an ideal tool for building ro...Show More

TAKEAWAY SKILLS

JavaScript

Full Stack Development

Web Development

React

Node.js

What You'll Learn

The ability to build applications using the Express JavaScript framework

A functional understanding of the Node.js runtime environment for server-side functions

A working mastery of a React frontend for client-side operations

A strong foundation in the fundamentals of modern web development

The hands-on experience necessary to build rich, full-stack web applications using popular JavaScript technologies

The ability to build applications using the Express JavaScript framework

Course Content

Before You Begin

3 Lessons

Get familiar with full-stack application development using Node.js, Express, MongoDB, and React.

Getting Started

Tech Stack and Resources

Test Yourself: Prerequisites

The Server-side

9 Lessons

Get started with server-side foundations of full-stack web development using Node.js and Express.

MVC

A `Hello World` Application in Express

Express Route Handlers

Nodemon

Test Yourself: Server-side Architecture

User Authentication with a JSON Web Token

7 Lessons

Examine the processes of user authentication, JWT handling, secure sign-ups, email verification, login, and middleware authentication.

Authorization and Authentication

The User Model

Sign-up Implementation

Email Confirmation

Middleware for Authentication

Test Yourself: JSON Web Tokens

Set up the Client-side Environment

5 Lessons

Grasp the fundamentals of setting up a React environment and styling with Tailwind CSS.

React

A `Hello World` Application in React

React Router

Style the Application

Test Yourself: Client-Side Environment

Develop the Client-side

8 Lessons

Solve problems in developing client-side authentication, navigation, and user experience enhancements.

Authentication Service

Test Yourself: Client-side Development

Business Logic

4 Lessons

Tackle building upload functions, text processing, and image handling for effective business logic.

Upload Files

Process Text Files

Process an Image

Test Yourself: Business Logic

Server-side Routes

3 Lessons

Practice using secure endpoints for reading, updating, and deleting files with authentication.

Read Files

Update and Delete Files

Test Yourself: CRUD Operations

Client-side Routes

5 Lessons

Learn how to use CRUD operations for file management in a web application.

File Uploads

Retrieve Files

Update Files

Delete and Download a File

Test Yourself: Client-side CRUD Operations

Appendix

8 Lessons

Walk through essential setups, deployments, and dependencies for full-stack web application development.

Deploy with Heroku

Node.js Installation

Node Package Manager(npm)

10.

Conclusion

1 Lessons

Explore advanced Node.js and React implementations, and build upon your newfound skills.

Final Remarks

Course Author

Ahmed Ashraf

Project

Build an Image Sharing App with MERN Stack

intermediate

1 hour

Project

Build an Image Sharing App with MERN Stack

Learn to build a MERN stack image sharing app with user authentication and social features like following.

intermediate

1 hour

Project

Build a Rest API for an Image-Sharing App With Node.js

beginner

1 hour

Project

Build a Rest API for an Image-Sharing App With Node.js

Develop a REST API for an image-sharing app using Node.js and MongoDB, supporting user registration, image uploads, and post management.

beginner

1 hour

Trusted by 2.5 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Carlos Matias La Borde

Software Developer

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Free Resources

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath