inflearn logo

Real-Time Video Consultations Built with NestJS · Next.js — A Full-Stack Platform Where Doctors, Patients, and Caregivers Meet in One Consultation Room

Complete the entire workflow yourself, from PostgreSQL to Socket.IO and WebRTC video calls, chat, and shared whiteboards.

1 learners are taking this course

Level Beginner

Course period Unlimited

HTML/CSS
HTML/CSS
JavaScript
JavaScript
React
React
PostgreSQL
PostgreSQL
Socket.io
Socket.io
HTML/CSS
HTML/CSS
JavaScript
JavaScript
React
React
PostgreSQL
PostgreSQL
Socket.io
Socket.io

What you will gain after the course

  • This is a full-stack course for those connecting NestJS and Next.js as a single project for the first time. You’ll build an entire hospital telemedicine workflow from start to finish, integrating REST APIs such as list retrieval and status changes, role-specific screens, real-time rooms and chat, WebRTC video calls, and a shared whiteboard into a single consultation room.

  • First, set up the pnpm workspace and PostgreSQL, then create APIs for the patient list, status changes, and conversation storage. On top of that, add doctor, nurse, and patient role entry points, a patient queue, and a responsive consultation room, followed by Socket.IO rooms and WebRTC connections, camera, microphone, and screen sharing, caregiver invitations, real-time chat and shared whiteboarding, whiteboard control, and voice captions. Finally, verify the results with completion records, follow-up consultations, linting, tests, and builds.

  • All lectures explain the material by highlighting lines from the actual source code and show terminal execution and the actions performed across two or more browser tabs exactly as they occur. All patient information shown on screen is fictional data; actual authentication, TURN servers, personal information encryption, and deployment are not covered and are instead outlined as expansion tasks for the operational stage.

A video call app is easy to build by following a tutorial, but where would you get stuck when trying to connect it into a “real service flow”? 🤔

The answer lies in the connection sequence. The patient's status is stored in the database, the screen reads it,

Browsers that have entered the same consultation room exchange connection information so that video, chat, and whiteboarding

Moving in a single room—we follow this entire journey through the actual source code.

In this course, you will build an educational telemedicine service from start to finish using NestJS and Next.js.

Read through the source line by line with each line highlighted, run it directly in the terminal, and

Open the doctor’s, patient’s, and guardian’s browsers side by side to verify that everything works.

Don’t stop at following the list lookup and video call examples separately; connect them into a single workflow.

Fix it, break it, and check again—that’s the fastest way to learn.

Features of This Course

📌 Every explanation highlights the relevant lines of the actual source code, and the described behavior is verified by running it in practice. (For example: why the connection fails when two people turn on their cameras at the same time, and how to fix it)

📌 Build the server so that it independently rechecks input validation and authorization. We’ll examine in code why the server blocks hidden buttons one more time.

📌 Instead of typing along line by line, you’ll work with the completed structure open, reading, running, and fixing it feature by feature. At the end of the course, you’ll receive five hands-on assignments and a list of the files to modify.

📌 We cover unit testing, linting, production builds, and troubleshooting steps for each symptom, taking you from “something that works” to “something you can trust.”

💡 NestJS + Next.js + PostgreSQL + Socket.IO + WebRTC + SVG whiteboarding + pnpm monorepo

Recommended for those who...

Have you never connected NestJS and Next.js in a single project?

We’ll first show you in code where the boundaries lie between modules, controllers, and services, as well as between server components and client components.



Web Developer / Backend Developer

What Socket.IO and WebRTC each carry—are you confused about which is which?

See in code that connection negotiation (signaling) and video transmission take different paths, and follow the sequence in which the offer, answer, and ICE candidates are exchanged.

Developers adding real-time features for the first time

Need a portfolio that goes beyond a bulletin board?

You will be able to explain and demonstrate a service that connects role-based screens, real-time rooms, video, chat, shared whiteboards, and completion records.

Developers preparing for employment or a job change


💡Developers moving on to the intermediate level

  • Want to learn permission rules and real-time synchronization as one cohesive flow?

    We’ll see how to write the rule “only the highest-ranking role in a room controls the whiteboard” once in a shared package and have both the frontend and server use it.


After the course,

  • You can structure the web, API, and shared packages using a pnpm workspace.

  • You can build a REST API with PostgreSQL tables and input validation.

  • You can implement Socket.IO rooms, WebRTC connections, and camera, microphone, and screen sharing.

  • You can implement chat history restoration, coordinate-based shared whiteboards, and role control.

  • You can verify the results with linting, testing, and building, and narrow down the cause of problems based on their symptoms.

You’ll learn the following.

Section 0. Course Introduction

-.0.1 Completed Project Demo

-.0.2 Overall Structure and Learning Sequence

Section 1. Development Environment and Monorepo

-.1.1 Creating a pnpm workspace

-.1.2 Preparing Next.js and UI Components

-.1.3 Preparing the NestJS API

Section 2. PostgreSQL and NestJS API

-.2.1 Connect to Docker PostgreSQL

-.2.2 Designing Tables for Educational Purposes

-.2.3 Patient List and Status Change API

-.2.4 Conversation Storage API

Section 3. Next.js Screens by Role

-.3.1 Demo Role Entry

-.3.2 Clinician Patient Queue

-.3.3 Consultation Status Transitions

-.3.4 Responsive Consultation Room Layout

Section 4. Socket.IO and WebRTC Consultation Room

-.4.1 Consultation Room and Participants

-.4.2 WebRTC Connection Structure

-.4.3 Camera and Microphone Connection

-.4.4 Remote Video and Playback Restriction Handling

-.4.5 Inviting a Guardian and Screen Sharing

Section 5. Chat · Shared Whiteboard · Subtitles

-.5.1 Real-Time Chat and Database Records

-.5.2 Shared whiteboard coordinate synchronization

-.5.3 Whiteboard and Caption Control

-.5.4 Whiteboard Theme and Image Saving

-.5.5 Scope and Limitations of Voice Subtitles

Section 6. Completion Records and Wrap-Up

-.6.1 Completed Patient Records and Follow-up Visits

-.6.2 Error Checking and Build

-.6.3 Next Steps

Notes Before Taking the Course

Practice environment

  • The course is conducted using Windows 11 screens as a reference. Chrome is used as the browser.

  • Node.js 22.22 or later, pnpm 10.18, and Docker Desktop (PostgreSQL container) are required. We use Next.js 16, React 19, NestJS 12, and PostgreSQL 16.

Learning materials

  • All source files used in the course are provided as a compressed file (c2i_seeu_full.zip, Lesson 1.1 materials). Create a new folder, extract the archive into it, and get started. The README contains the steps for running it.


Prerequisites and Notes

  • You need a basic understanding of TypeScript syntax and React components. No prior experience with NestJS or WebRTC is required.

  • The camera and microphone scenes are shown using simulated video in an automated environment. If you follow along yourself, you must allow access to your actual camera and microphone, and the camera will only open on localhost or an HTTPS address.

  • All patients, hospital rooms, and medical notes shown on the screen are fictional data and cannot be used for actual medical services. Real authentication, TURN servers, personal information encryption, and deployment are not covered and are summarized as operational scaling tasks.

  • The lecture audio was recorded directly by the instructor.

  • The copyright of the course and source code belongs to the instructor. Students may use and modify the source code in their own projects (work or products). However, selling or redistributing the source code itself, posting it to public repositories (Git Public), or using it for educational purposes such as courses or textbooks is not permitted.

  • If you leave your question on the class questions board, we will respond within 3 days.

Recommended for
these people

Who is this course right for?

  • A developer who wants to set up NestJS and Next.js as a single project

  • A developer who wants to understand the difference between Socket.IO and WebRTC through actual code

  • A developer who wants to build a portfolio (real-time collaboration service) that goes beyond a bulletin board.

  • For those who want to learn state management, authorization rules, and real-time synchronization in a single flow

Need to know before starting?

  • Basics of TypeScript Syntax and React Components

  • Node.js 22.22 or later, pnpm 10, Docker Desktop (for the PostgreSQL container), a PC with a camera and microphone, Chrome or Edge

  • You don’t need to know NestJS or WebRTC. Any necessary concepts will be explained as soon as they appear in the code.

Hello
This is GregHan

Career Verified

Having spent a long time adapting to technological changes, I now hope to share my skills and experience with beginners and intermediate developers, however modestly, and help them grow quickly.

Tech Stack

-.Mono-Repo (Turbo: "^2.3.4"), FCM(Firebase Cloud Message), WebHook, Redis, MQTT

-. MUI-X, Material-UI, and other UI libraries in the Next & React ecosystem

-. OCR (Naver), RIMS, Popbill, SNS Login (Google, Naver, Kakao)

-.Js, Vue/Nuxt (VueX, Pinia), AngularJS, React/Next (Redux,Zustand,Recoil), Svelt,

D3, Three (WebGL), C2i: BI charts delivered to the Blue House, echarts, Vuetify, Quasar, Telerick(Progress)

IndexedDB & SqlLite, css, scss, sass, Tailwind, Bootstrap...

-.Leaflet.js, Cesium.js, Daum & Naver Maps

-.WebRTC & WebSocket, MQTT, Silverlight(C#) & ASP.Net

-.Node, Nest, Spring Boot, Docker, Git, pm2

-.AWS, Azure, nCloud(Naver)

-.Oracle, PostgreSQL, MySQL, MariaDB, MS-SQL, MongoDB(mongoose), InfluxDB, Supabase

-.Python, Numpy/Scipy, Jupyter, Django(DRF: Django Rest Framework)/Flask,

-.TensorFlow, Keras, ScikitRun, LangChain

Solutions

  • IAM-Guardian – SGC + ML + AI + Graph Platform

  • IAM-MES – A full-stack integrated platform for discrete, batch, and continuous manufacturing across industries

  • IAM-ERP – AI accounting ERP · automatic journal entries from supporting documents · locked ledger

  • IAM-FREE-BI – Free browser BI for shopping malls and small and medium-sized enterprises

  • IAM-SPC – Metadata-based General-Purpose SPC · Edge + Central · IATF 16949

  • IAM-VeloMap – AI-based Lidar post-processing automation solution (+Guardian integration)

-.City-Wow: 3D simulation for land, defense, public sector, hospitals, and manufacturing companies, etc.

Real-time monitoring service ('23.10 ~ present; Three, Vanila.js)

-.SeeU (SeeU): Industry-specific video chat service (hospitals, manufacturing, etc.) (Google Meet + chroma key, STT & TTS Chatting)

('23.02 ~ 23.10; WebRTC, WebSocket, Vue3 & Pinia, Quasar, Node, MySQL)
-.Survey-Wow: Simply analyze survey results from Google Forms, MS Forms, and Naver Forms, and

Shared data analysis web service ('22.03 ~ 23.01; Vue2 & VueX, Quasar, Node, MySQL)

-.Data-Wow: Automated analysis and visualization of public data, including xls, json, csv, and API integrations

('22.01 ~ 22.12; Vue2 & VueX, Vuetify, Node, MongoDB) - Ministry of the Interior and Safety Public Data Award
-.DDMV(Data-Dam Multi-Dimensional Vis-): Data-Dam multidimensional exploratory visualization analysis service

('20.01 ~ 20.08; Vue2 & VueX, Vuetify, Node, MongoDB) - Incheon City Public Data Award
-.C2i (C2i: Chart Inteiiligence Insights) chart component: Chart gallery menu

BI-based charts (with D3.js): '15.04 ~ present; A BI-pattern chart solution based on D3.js (v3.3 ~ v7.9)

(Supplied a job dashboard to the Moon Jae-in administration’s Blue House and delivered a Mongolian national fiscal management project. Multilingual support.

 

Various technology stacks, including Data Mart & Warehouse, ROLAP, BI, visualization, cloud infrastructure, and

Possesses specialized knowledge and experience in business analysis and Oracle (v6.3 ~ ) modeling & tuning.

 

-.CTO at Casual-Insights Co., Ltd. (Casual-Insights)

- Former KISTI Researcher

-. Former LG-CNS Oracle Modeler, DBA & Senior Researcher

- Former employee in the IT Department of Far East (Hyundai) Oil Refinery

**. Data Dam Multidimensional Visualization -. Comprehensive Introduction (Required): https://youtu.be/noZ9H7wftsI

-.Consumer/Commercial Districts-I (Required: Department store POS data - General manufacturing and distribution companies): https://youtu.be/ArL-Pv3U-40 -.Consumer/Commercial Districts-II (Korean KDX, data provided by Siksin): https://youtu.be/Wcpu29gI53Y

-. Health and Medical Care (Korea KDX, data provided by Onnuri H&C): https://youtu.be/I8WBqAFp9L4-

.Public Data (public data provided by Hwaseong City Hall, Gyeonggi Province): https://youtu.be/2QCw_6aeRVE

*.D3 & ThreeJS Chart Gallery: https://gregory-han.github.io/chart/

* Awards

1999.08 Hankyoreh Newspaper & UTC Venture 21 Grand Prize awarded. (Prize money: 50 million won)
2000.10 SoftDime Co., Ltd. received the Presidential Award (PowerSi OLAP)
November 2002: Received the Minister of Commerce, Industry and Energy Award at the Korea e-Business Awards
2020.08 Incheon City Public Data Award
2022.12 Ministry of the Interior and Safety Public Data Award
More

Curriculum

All

26 lectures ∙ (2hr 37min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

GregHan's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!

Limited time deal

$1,377,923.00

49%

$102.30