deal image
uCertify

Modern Full-Stack React Projects

This course includes
Lessons
TestPrep
Lab
AI Tutor (Add-on)
Get A Free Trial

About This Course

Skills You’ll Get

Get the support you need. Enroll in our Instructor-Led Course.

Interactive Lessons

21+ Interactive Lessons |

Gamified TestPrep

Download Course Outline

1

Introduction

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

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
3

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
4

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
5

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
6

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
7

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
8

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
9

Making Sure Customers Find You with Search Engine Optimization

  • Optimizing an application for search engines
  • Improving social media embeds
  • Summary
10

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
11

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
12

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
13

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
14

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
15

Creating a Frontend to Consume and Send Events

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

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
17

Getting Started with Next.js

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

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
19

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
20

Deploying a Next.js App

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

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

Getting to Know Node.js and MongoDB

Implementing a Backend Using Express, Mongoose ODM, and Jest

Integrating a Frontend Using React and TanStack Query

Deploying the Application with Docker and CI/CD

Adding Authentication with JWT

Improving the Load Time Using Server-Side Rendering

Making Sure Customers Find You with Search Engine Optimization

Implementing End-to-End Tests Using Playwright

Aggregating and Visualizing Statistics Using MongoDB and Victory

Building a Backend with a GraphQL API

Interfacing with GraphQL on the Frontend Using Apollo Client

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

Creating a Frontend to Consume and Send Events

Adding Persistence to Socket.IO Using MongoDB

Getting Started with Next.js

Introducing React Server Components

Advanced Next.js Concepts and Optimizations

Deploying a Next.js App

Modern Full-Stack React Projects

$ 279.99

Buy Now
scroll to top