How to Build a Realtime Web Chat and Deploy it to AWS

In this video, we will build a full-stack serverless chat application with TypeScript, Node.js, React.js & TailwindCSS, and then deploy it to AWS with Serverless Framework. 👍 Subscribe for more cloud and programming tutorials like this:    / @tomasztarnowski4434   Getting Started with AWS Lambda and Serverless Framework (video):    • Getting started with AWS Lambda and Server...   Getting Started with AWS Lambda and Serverless Framework (article): https://blog.tomasztarnowski.com/gett... Working with Global Secondary Indexes (AWS Documentation): https://docs.aws.amazon.com/amazondyn... Links to the code from the video: Backend: https://github.com/ttarnowski/serverl... Frontend: https://github.com/ttarnowski/serverl... Social Media: Twitter:   / t_tarnowski​   Linkedin:   / tomasz-ta...​   GitHub: https://github.com/ttarnowski​ Software used in the video: Visual Studio Code IDE: https://code.visualstudio.com/ Prettier Extension for automatic code formatting: https://marketplace.visualstudio.com/... Thank you for watching and see you soon! 00:00:00 Intro 00:00:37 Requirements 00:01:32 Solution/Project overview 00:05:37 Creating a new Serverless Framework project 00:07:52 serverless.yml - WebSocket event lambda functions 00:11:25 serverless.yml - AWS resources (DB tables) 00:13:01 What is DynamoDB Secondary Index? 00:17:35 Messages Table Definitions 00:21:48 Permissions 00:23:45 Env vars 00:24:40 handlers.ts - handle different event route keys 00:28:34 handlers.ts - handleConnect() 00:37:07 handlers.ts - handleDisconnect() 00:40:28 handlers.ts - getClients() 00:52:40 handlers.ts - notifyClients() 01:06:30 Code walk-through 01:13:31 Testing the code with CLI websocket client 01:20:10 Fixing issues found during the test 01:35:31 Another test 01:38:15 handlers.ts - handleSendMessage() 02:11:06 handlers.ts - handleGetMessages() 02:32:07 - Testing new websocket events with CLI 02:37:56 - Fixing "createdAt" timestamp issue 02:41:37 - Creating a new project for User Interface 02:46:39 - Looking for an open source TailwindCSS components 02:48:01 - Using TailwindCSS component in React 02:51:28 - Using Login TailwindCSS component in React 02:54:02 - Implementing a logic to show Login screen at the beginning 02:57:12 - Adding a nickname logic 03:08:18 - WebSocket connection from React & getting clients 03:28:47 - Building users sidebar with React and TailwindCSS 03:58:43 - Getting the messages with WebSocket client 04:08:53 - Sending the messages implementation 04:24:43 - Displaying the messages implementation 05:16:59 - Deployment to AWS S3 05:21:31 - Final Test