MERN.AJ1
Modern Full-Stack React Projects
Learn both front-end and back-end development with our modern full-stack react course.
- Practice in 21 Laboratorios prácticos — nothing to install
- 21 Lecciones interactivas y 97 topics mapped to the official exam objectives
- 206 Preguntas del examen de práctica
Intermediate A tu propio ritmo · 1 año de acceso
21 LiveLabs prácticos
Practice real IT tasks in guided environments.
- Entornos reales
- Calificación automática
- Sin instalación
21Lecciones interactivas
97Topics
21Laboratorio en vivo
206Preguntas del examen de práctica
80Tarjetas didácticas
80Glosario de términos
01 / Habilidades que obtendrás
What you will be able to do
Try Free →
No se requiere tarjeta de crédito
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.
- 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
Course Highlights
-
21 Lecciones estructuradas Cobertura completa de los objetivos principales del curso
-
21 LiveLabs prácticos Escenarios interactivos guiados con evaluación instantánea
-
206 Preguntas de práctica Pruebas de evaluación con justificaciones de respuesta detalladas
-
1 año de acceso completo Aprendizaje a tu propio ritmo, accesible en cualquier momento y en todos los dispositivos
02 / Lecciones y laboratorios
See exactly what you will learn and practice
Plan de estudios
21 Lecciones interactivas · 97 topics01 Introduction 4 topics +
- Who this course is for
- What this course covers
- To get the most out of this course
- Conventions used
02 Preparing for Full-Stack Development 5 topics +
- 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
03 Getting to Know Node.js and MongoDB 5 topics · 3 Laboratorio en vivo +
- 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
3 Laboratorio en vivo in this lesson — see the labs panel →
04 Implementing a Backend Using Express, Mongoose ODM, and Jest 5 topics · 2 Laboratorio en vivo +
- Designing a backend service
- Creating database schemas using Mongoose
- Developing and testing service functions
- Providing a REST API using Express
- Summary
2 Laboratorio en vivo in this lesson — see the labs panel →
05 Integrating a Frontend Using React and TanStack Query 5 topics · 1 Laboratorio en vivo +
- 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
1 Laboratorio en vivo in this lesson — see the labs panel →
06 Deploying the Application with Docker and CI/CD 5 topics · 1 Laboratorio en vivo +
- Creating Docker images
- Deploying our full-stack application to the cloud
- Configuring CI to automate testing
- Configuring CD to automate the deployment
- Summary
1 Laboratorio en vivo in this lesson — see the labs panel →
07 Adding Authentication with JWT 5 topics · 1 Laboratorio en vivo +
- 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
1 Laboratorio en vivo in this lesson — see the labs panel →
08 Improving the Load Time Using Server-Side Rendering 5 topics · 1 Laboratorio en vivo +
- Benchmarking the load time of our application
- Rendering React components on the server
- Server-side data fetching
- Advanced server-side rendering
- Summary
1 Laboratorio en vivo in this lesson — see the labs panel →
09 Making Sure Customers Find You with Search Engine Optimization 3 topics · 1 Laboratorio en vivo +
- Optimizing an application for search engines
- Improving social media embeds
- Summary
1 Laboratorio en vivo in this lesson — see the labs panel →
10 Implementing End-to-End Tests Using Playwright 5 topics · 1 Laboratorio en vivo +
- 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
1 Laboratorio en vivo in this lesson — see the labs panel →
11 Aggregating and Visualizing Statistics Using MongoDB and Victory 5 topics · 2 Laboratorio en vivo +
- Collecting and simulating events
- Aggregating data with MongoDB
- Implementing data aggregation in the backend
- Integrating and visualizing data on the frontend using Victory
- Summary
2 Laboratorio en vivo in this lesson — see the labs panel →
12 Building a Backend with a GraphQL API 5 topics · 1 Laboratorio en vivo +
- What is GraphQL?
- Implementing a GraphQL API in a backend
- Implementing GraphQL authentication and mutations
- Overview of advanced GraphQL concepts
- Summary
1 Laboratorio en vivo in this lesson — see the labs panel →
13 Interfacing with GraphQL on the Frontend Using Apollo Client 4 topics · 1 Laboratorio en vivo +
- Setting up Apollo Client and making our first query
- Using variables in GraphQL queries
- Using mutations on the frontend
- Summary
1 Laboratorio en vivo in this lesson — see the labs panel →
14 Building an Event-Based Backend Using Express and Socket.IO 5 topics · 1 Laboratorio en vivo +
- 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
1 Laboratorio en vivo in this lesson — see the labs panel →
15 Creating a Frontend to Consume and Send Events 4 topics · 1 Laboratorio en vivo +
- Integrating the Socket.IO client with React
- Implementing chat functionality
- Implementing chat commands with acknowledgments
- Summary
1 Laboratorio en vivo in this lesson — see the labs panel →
16 Adding Persistence to Socket.IO Using MongoDB 4 topics · 1 Laboratorio en vivo +
- Storing and replaying messages using MongoDB
- Refactoring the app to be more extensible
- Implementing commands to join and switch rooms
- Summary
1 Laboratorio en vivo in this lesson — see the labs panel →
17 Getting Started with Next.js 5 topics · 1 Laboratorio en vivo +
- What is Next.js?
- Setting up Next.js
- Introducing the App Router
- Creating static components and pages
- Summary
1 Laboratorio en vivo in this lesson — see the labs panel →
18 Introducing React Server Components 5 topics · 1 Laboratorio en vivo +
- 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
1 Laboratorio en vivo in this lesson — see the labs panel →
19 Advanced Next.js Concepts and Optimizations 5 topics · 1 Laboratorio en vivo +
- Defining API routes in Next.js
- Caching in Next.js
- SEO with Next.js
- Optimized image and font loading in Next.js
- Summary
1 Laboratorio en vivo in this lesson — see the labs panel →
20 Deploying a Next.js App 3 topics +
- Deploying a Next.js app with Vercel
- Creating a custom deployment setup for Next.js apps
- Summary
21 Diving Deeper into Full-Stack Development 5 topics +
- Overview of other full-stack frameworks
- Overview of UI libraries
- Overview of advanced state management solutions
- Pointers on maintaining large-scale projects
- Summary
Laboratorios prácticos Our edge
21 Laboratorio en vivos- Executing a Node.js Script
- Creating a Web Server
- Creating a Collection, and Inserting and Listing Documents
- Creating a Schema Using Mongoose
- Building a Basic Express Server
- Creating a REST API with Node.js and Express
- Creating an Image Upload Server
- Building a Simple Login/Signup System
- Benchmarking the Load Time of an Application
- Implementing Open Graph Meta Tags
- Setting Up Playwright for End-to-End Testing
- Defining the Event Model and the Service Function to Track Events
- Aggregating Data with MongoDB
- Building a Simple GraphQL Server with Node.js and Express
- Using Mutations on the Frontend
- Building a Real-Time Chat Application Using Socket.IO
- Styling a Real-Time Chat Application with Socket.IO
- Storing and Replaying Messages Using MongoDB
- Setting Up Next.js
- Using React Server Components
- Defining API Routes in Next.js
Los laboratorios se ejecutan en tu navegador; no hay nada que instalar.
03 / Preguntas frecuentes
Preguntas antes de empezar
Who is this course designed for? +
This Modern React Applications course is designed for anyone interested in learning full-stack web development. Whether you’re a beginner or have some programming experience, this course will develop your web app development skills.
What technologies will I learn in this course? +
You’ll learn a wide range of technologies, including:
- Front-end: React, JavaScript, HTML, CSS
- Back-end: Node.js, Express.js, MongoDB
- Tools: Git, Docker, CI/CD pipelines
Do I need prior experience with React to take this course? +
No prior experience with React is required. The full-stack react development course will start with the basics and gradually build up to more complex concepts.
How can this course benefit my career? +
Learning full-stack development can open up various career opportunities. This course can help you:
- Learn both backend and frontend development in one package
- Land a job
- Advance your career
- Start your own business
Keep going
You might also like
Build Modern Web Apps
Acquire the skills to create web applications that captivate users, drive results, and gain new career opportunities.
- 1 año de acceso completo
- 21 LiveLab incluido
- Certificado de finalización
No se requiere tarjeta de crédito