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

This course covers how to build a full stack React application. After taking this course, even beginners can develop a full stack React application.

Beginner

53 Lessons

17h

Certificate of Completion

This course covers how to build a full stack React application. After taking this course, even beginners can develop a full stack React application.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

42 Playgrounds

8 Quizzes

This course includes

42 Playgrounds

8 Quizzes

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

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

What You'll Learn

The ability to build applications using the Express JavaScript framework

Course Content

Before You Begin

This chapter focuses on the pre-requisites of the course, essential concepts, and resources for effective learning.

Getting Started

Tech Stack and Resources Test Yourself: Prerequisites

The Server-side

This chapter focuses on the server-side including Node.js, Express, the MVC architecture, MongoDB integration, and efficient application structuring.

MVC Node.js Express MongoDB Directory Structure

A `Hello World` Application in Express Express Route Handlers Nodemon Test Yourself: Server-side Architecture

User Authentication with a JSON Web Token

The chapter focuses on implementing user authentication using JSON Web Tokens, sign-up, login, email verification, and authentication middleware.

Authorization and Authentication The User Model Sign-up Implementation Email Confirmation Login implementation Middleware for Authentication Test Yourself: JSON Web Tokens

Set up the Client-side Environment

In this chapter you'll learn setting up a client-side environment using React, including routing 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

The chapter focuses on developing client-side features, including authentication, responsive navigation, and enhanced user experience for seamless interaction.

Authentication Service Navbar Context API Sign Up Email Confirmation The Login Page Better UX Test Yourself: Client-side Development

Business Logic

4 Lessons

In this chapter you'll learn to enhance overall functionality by implementing file uploads, text processing, and image handling within web applications.

Server-side Routes

3 Lessons

This chapter focuses on the implementation of secure CRUD operations for file management, including reading, updating, and deleting user files.

Client-side Routes

5 Lessons

This chapter implements a comprehensive file management system for web applications with upload, retrieval, update, deletion, and file download.

Appendix

8 Lessons

This section focuses on the essentials of deploying and managing full-stack applications, including setup, dependency management, and secure communications.

10.

Conclusion

1 Lesson

This section presents a recap and encourages future exploration and skill enhancement.

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Souvik Kundu

Front-end Developer

Eric Downs

Musician/Entrepeneur

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

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!

FOR TEAMS

Interested in this course for your business or team?

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