Web Development · WDC-93

React and NodeJS with Docker Workshop

React and NodeJS with Docker Workshop is a hands-on course in building a full-stack web application with React and TypeScript on Vite and Strapi 5 on Node.js with PostgreSQL, all running in Docker, from sign-in and CRUD over an API to deployment with Docker Compose. It suits developers and IT managers with basic HTML, CSS, JavaScript and Docker.

Updated 8 Oct 2026

From 8,550 THB / person 9,500 −10% excl. VAT 7% · group rates available

Corporate training quote Join the waiting list

PDFDownload the course outline

Duration18 hours · 3 days
FormatOnsite / live online
Next roundOn request
CertificateIncluded

Course overview

Full-stack web development today usually separates the frontend from the backend, connects them through an API, and uses Docker so that everyone on the team runs the system the same way, from a developer laptop to the production server. React with Vite is a popular choice for the frontend, while Strapi is a headless CMS on Node.js that provides a ready-made REST API and admin screens, so a small team can build the backend quickly without hand-writing every endpoint.

This course is a hands-on workshop across all three days. Learners build a simple inventory system with React 19 and TypeScript on Vite 8, design the interface with Material UI, and use Strapi 5 with PostgreSQL on the backend, with everything running in Docker containers, including hot reload during development. They add sign-in with JWT, protected routes and CRUD over the API with TanStack Query, then build and deploy the whole system with Docker Compose. Learners see how a full-stack system fits together and can apply it to their own work. (3 days, 6 hours per day, 18 hours in total, Intermediate level.)

What you’ll gain

Set up a React and Node.js development environment on Docker that works the same on every machine
Create a React 19 and TypeScript project with Vite 8, with hot reload inside a container
Design screens with Material UI and handle page routing with React Router
Build a REST API and admin screens with Strapi 5 and PostgreSQL
Add sign-in with JWT and guard pages with protected routes
Read and change data over the API with CRUD operations using TanStack Query
Build and deploy both the frontend and the backend with Docker Compose

Who this course is for

Developers who want to build full-stack web applications with JavaScript and TypeScript
Frontend developers who want to understand the backend and Docker
IT managers and team leads who want an overview of a modern web system
Students and enthusiasts with a grounding in HTML, CSS and JavaScript

Prerequisites

Basic HTML and CSS
Modern JavaScript such as let, const, arrow functions, modules and async/await
Basic Docker knowledge such as images, containers and common commands
A laptop that can run Docker Desktop, Node.js 24 LTS, Git and VS Code, with permission to install software

Curriculum

Course Details

This course is the 2026 edition that replaces the previous React and NodeJS with Docker Workshop, which was taught on React 18 and Strapi 4. It runs for 3 days, 6 hours per day (18 hours in total, 09:00-16:00), as a workshop that builds one inventory system from start to finish. Intermediate level. It uses React 19 with TypeScript on Vite 8, the current React Router, Material UI, and Strapi 5 with PostgreSQL on Docker Compose. API calls follow the new Strapi 5 response format with documentId, and new topics include TanStack Query, validated forms and multi-stage Docker deployment. Learners take home a lab guide, source code for every lab and Docker files to reuse.

Day 1 Tooling and a React Frontend on Docker

Section 1: Lab: Installing the Development Tools

An overview of the workshop architecture: frontend, backend, database and containers
Install Docker Desktop on Windows (WSL 2) or macOS and check it works
Install Node.js 24 LTS, Git and VS Code with the extensions you need
Install React Developer Tools in the browser
Lab: run a first container and check the versions of every tool

Section 2: Lab: A React Project with Vite on Docker

Create a React and TypeScript project with Vite 8
Write a Dockerfile and docker-compose.yml for development
Configure Vite so hot reload works inside the container with the code folder mounted
Install npm packages through the container and manage node_modules
Lab: run the app, edit code and see the change in the browser straight away

Section 3: React for Real Projects

Components, props and typing with TypeScript
useState, useEffect and extracting logic into custom hooks
Rendering lists and conditions, and handling events
Context for app-wide data such as the signed-in user
Lab: a product list component built from sample data

Section 4: Lab: Page Routing with React Router

Install the current React Router with the react-router package
BrowserRouter, Routes, Route and nested routes with layouts
Link, NavLink and route parameters
A not found page and redirects
Lab: the dashboard, product list and product details pages

Section 5: Lab: Designing the UI with Material UI

Install and configure Material UI in the project
Layout with Grid, Box, Container, AppBar, Toolbar and Drawer
Icons and form components such as TextField, Select, Checkbox and Button
Customise the theme colours, fonts and dark mode
Lab: a responsive dashboard for the inventory system

Day 2 A Strapi 5 Backend and Sign-in

Section 6: Lab: Strapi 5 with PostgreSQL on Docker

What a headless CMS is, and how Strapi speeds up backend work
Create a Strapi 5 project connected to PostgreSQL
Run Strapi and PostgreSQL together with Docker Compose
Keep secrets in a .env file and data in volumes
Lab: open the admin panel and create the first administrator

Section 7: Designing Content Types and Relations

Collection types, single types and field types
Relations between products, categories and suppliers
Draft and publish, and managing images in the Media Library
Components and dynamic zones for flexible data
Lab: the inventory content types with sample data

Section 8: Lab: REST API, Permissions and JWT

The Strapi 5 REST API: the new response format and documentId
Filtering, sorting, pagination and populating related data
Users and Permissions roles, and opening access endpoint by endpoint
Registering and signing in through /api/auth/local to receive a JWT
Lab: test public and authenticated API calls with Postman

Section 9: Calling the API from React

Manage the API URL with Vite environment variables
Write a typed API client with fetch
TanStack Query: useQuery, useMutation and refreshing data
Showing loading and error states consistently
Lab: a product list page that loads real data from Strapi

Section 10: Lab: Sign-in and Protected Routes

Register and sign-in pages that call the Strapi API
Storing the token carefully: localStorage versus cookies, and the XSS risk
An auth context that attaches the token to every request
Protected routes with React Router, and signing out
Lab: keep signed-out users away from the product management pages

Day 3 CRUD Workshop and Docker Deployment

Section 11: Lab: Inventory CRUD Workshop

Write services to list, view, create, update and delete products
Show data in a Material UI table with search and paging
Format currency, dates and times with Intl
Refresh data after changes with TanStack Query
Lab: a fully working product management system

Section 12: Form Validation and Image Upload

Manage forms with React Hook Form
Validate with Zod and show errors field by field
Upload product images to the Strapi Media Library
A confirmation dialog before deleting, and a snackbar for results
Lab: an add-product form with images

Section 13: Lab: Multi-stage Builds

Prepare the React project for a build and check types
A multi-stage Dockerfile: build with Node, then serve files with Nginx
Build Strapi for production and leave out unneeded dependencies
Shrink images and use .dockerignore
Lab: build images for the frontend and the backend

Section 14: Deploying the Whole System with Docker Compose

A production docker-compose file: frontend, Strapi and PostgreSQL
Nginx as a reverse proxy that serves the frontend and API on one domain
CORS, environment variables and health checks
Backing up the database and uploaded files
Common problems when going live, and how to fix them

Section 15: Workshop: Extending the System Yourself

Brief: add stock in and stock out records with a summary report
Design new content types and screens, then build both frontend and backend
Deploy the new version with Docker Compose
Present the result, use an AI assistant to help write code with careful review, and plan next steps

Schedule & training options

For individuals — public rounds

No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770

Join the waiting list Ask about rounds

For organisations — in-house / private

Tailor the content to your team’s tools and projects
Your dates, at your office or live online
Quotation with tax ID for procurement

Corporate training quote

Instructors

Samit KoyomFounder & CEO, IT Genius Engineering

Frequently asked questions

How do you run a React and Vite project in Docker with hot reload?

Write a development Dockerfile based on an LTS release of Node.js, then use docker-compose to mount the code folder into the container while keeping node_modules inside it. Configure Vite to listen on all network interfaces with server.host and expose the matching port. On Windows, if file changes are not picked up, enable usePolling under server.watch or keep the code in the WSL 2 file system. Once set up, the page updates as soon as you edit the code.

What is Strapi, and how is it used to build a REST API?

Strapi is an open-source headless CMS built on Node.js. When you design content types in the admin panel, it generates a REST API to read, create, update and delete that data, along with user permissions and JWT sign-in. In Strapi 5 responses are no longer nested inside attributes, and documentId identifies each document. The API supports filtering, sorting, pagination and loading related data with populate.

How do you create a protected route in React with React Router?

Keep the signed-in user in an auth context, then create a component that wraps the routes you want to protect. If there is no user, redirect to the login page with Navigate; otherwise render the child pages through Outlet. With the current React Router you import from the react-router package. Remember that frontend protection is only the first line of defence, and the Strapi API must always check permissions too.

Who is the React and NodeJS with Docker Workshop course for, and what should I know beforehand?

It suits developers who want to build full-stack web applications, frontend developers who want to understand the backend and Docker, IT managers who want an overview of the whole system, and students. You should know HTML, CSS and modern JavaScript, and have basic Docker knowledge. TypeScript is explained as far as the workshop needs it.

What will I be able to do after the React and NodeJS with Docker Workshop course?

You will be able to set up a Docker development environment with hot reload, build a frontend with React, TypeScript, React Router and Material UI, build a backend with Strapi 5 and PostgreSQL, add JWT sign-in and protected routes, manage data with CRUD over the API, and deploy the whole system with Docker Compose. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.

Which tools are used on the React and NodeJS with Docker Workshop course?

The course uses Docker Desktop and Docker Compose, Node.js 24 LTS, VS Code, Git and Postman. The frontend uses React 19, TypeScript, Vite 8, React Router, Material UI, TanStack Query, React Hook Form and Zod, and the backend uses Strapi 5 with PostgreSQL. All the tools are open source or free to use. Learners bring a laptop that can run Docker Desktop.