Modern Full-Stack React Projects
This course includes
Lessons
TestPrep
Lab
AI Tutor (Add-on)
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
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