Modern Full-Stack React Development Training

Learn both front-end and back-end development with our modern full-stack react course.

This course includes

Lessons

TestPrep

Lab

AI Tutor (Add-on)

Get A Free Trial

This course includes:

Free pre-assessment and first 2 lessons

21+ Interactive Lessons

Accessible on mobile and tablet too

Certificate of completion

About This Course

Our Full-Stack React web development course polishes your web app development skills. From the fundamentals of JavaScript and React to backend development with Node.js and MongoDB, this course covers everything you need to know. With hands-on projects, you'll learn how to create dynamic, interactive websites and web apps that meet the demands of today's digital landscape. By the end of this course, you'll be well-prepared to launch your career as a full-stack developer.

Skills You’ll Get

Master full-stack development, combining front-end and back-end expertise

Use React and frameworks to build responsive web apps

Build robust backends with Node.js and MongoDB

Implement data management and retrieval using SQL and NoSQL databases

Create user-friendly interfaces that deliver exceptional user experience

Optimize website performance for speed and scalability

Secure apps against vulnerabilities and protect sensitive data

Collaborate with teams and contribute to Agile development methodologies

Solve complex problems and find creative solution

Interactive Lessons

21+ Interactive Lessons |

Gamified TestPrep

Lesson Plan

Introduction

Who this course is for
What this course covers
To get the most out of this course
Conventions used

Preparing for Full-Stack Development

Motivation to become a full-stack developer
What is new in this release of Full-Stack React Projects?
Getting the most out of this course
Setting up the development environment
Summary

Getting to Know Node.js and MongoDB

Writing and running scripts with Node.js
Introducing Docker, a platform for containers
Introducing MongoDB, a document database
Accessing the MongoDB database via Node.js
Summary

Implementing a Backend Using Express, Mongoose ODM, and Jest

Designing a backend service
Creating database schemas using Mongoose
Developing and testing service functions
Providing a REST API using Express
Summary

Integrating a Frontend Using React and TanStack Query

Principles of React
Setting up a full-stack React project
Creating the user interface for our application
Integrating the backend service using TanStack Query
Summary

Deploying the Application with Docker and CI/CD

Creating Docker images
Deploying our full-stack application to the cloud
Configuring CI to automate testing
Configuring CD to automate the deployment
Summary

Adding Authentication with JWT

What is JWT?
Implementing login, signup, and authenticated routes in the backend using JWTs
Integrating login and signup in the frontend using React Router and JWT
Advanced token handling
Summary

Improving the Load Time Using Server-Side Rendering

Benchmarking the load time of our application
Rendering React components on the server
Server-side data fetching
Advanced server-side rendering
Summary

Making Sure Customers Find You with Search Engine Optimization

Optimizing an application for search engines
Improving social media embeds
Summary

Implementing End-to-End Tests Using Playwright

Setting up Playwright for end-to-end testing
Writing and running end-to-end tests
Reusable test setups using fixtures
Viewing test reports and running in CI
Summary

Aggregating and Visualizing Statistics Using MongoDB and Victory

Collecting and simulating events
Aggregating data with MongoDB
Implementing data aggregation in the backend
Integrating and visualizing data on the frontend using Victory
Summary

Building a Backend with a GraphQL API

What is GraphQL?
Implementing a GraphQL API in a backend
Implementing GraphQL authentication and mutations
Overview of advanced GraphQL concepts
Summary

Interfacing with GraphQL on the Frontend Using Apollo Client

Setting up Apollo Client and making our first query
Using variables in GraphQL queries
Using mutations on the frontend
Summary

Building an Event-Based Backend Using Express and Socket.IO

What are event-based applications?
Setting up Socket.IO
Creating a backend for a chat app using Socket.IO
Adding authentication by integrating JWT with Socket.IO
Summary

Creating a Frontend to Consume and Send Events

Integrating the Socket.IO client with React
Implementing chat functionality
Implementing chat commands with acknowledgments
Summary

Adding Persistence to Socket.IO Using MongoDB

Storing and replaying messages using MongoDB
Refactoring the app to be more extensible
Implementing commands to join and switch rooms
Summary

Getting Started with Next.js

What is Next.js?
Setting up Next.js
Introducing the App Router
Creating static components and pages
Summary

Introducing React Server Components

What are RSCs?
Adding a data layer to our Next.js app
Using RSCs to fetch data from the database
Using Server Actions to sign up, log in, and create new posts
Summary

Advanced Next.js Concepts and Optimizations

Defining API routes in Next.js
Caching in Next.js
SEO with Next.js
Optimized image and font loading in Next.js
Summary

Deploying a Next.js App

Deploying a Next.js app with Vercel
Creating a custom deployment setup for Next.js apps
Summary

Diving Deeper into Full-Stack Development

Overview of other full-stack frameworks
Overview of UI libraries
Overview of advanced state management solutions
Pointers on maintaining large-scale projects
Summary

Hands-on LAB Activities (Performance Labs)