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 A...
Getting Started with AWS Lambda and Serverless Framework (article):
blog.tomasztarnowski.com/gett...
Working with Global Secondary Indexes (AWS Documentation):
docs.aws.amazon.com/amazondyn...
Links to the code from the video:
Backend: github.com/ttarnowski/serverl...
Frontend: github.com/ttarnowski/serverl...
Social Media:
Twitter: / t_tarnowski​
Linkedin: / tomasz-ta...​
GitHub: github.com/ttarnowski​
Software used in the video:
Visual Studio Code IDE: code.visualstudio.com/
Prettier Extension for automatic code formatting: 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

[@youmus6950]

You are very talented! You explain everything so clearly and understandable. I am just going through by coding along to to learn more about serverless and typescript! I hope the youtube algorithm will find you soon

[@tomasztarnowski4434]

Thank you 🙏

[@CK-ir2ke]

Great job brother, please do more projects as soon as possible.

[@tomasztarnowski4434]

Thank you! There will be more projects soon :)

[@node_python_lover454]

absolutely amazing tutorial!
Thanks alot!

[@tomasztarnowski4434]

Glad you liked it!

[@goodroyale7645]

Thanks for making this video you are awesome

[@testororo6091]

It`s awesome dude!
Please make some more projects of advanced level. I am realy thankful to you.

[@tomasztarnowski4434]

Thank you, Testoro. I will do my best!

[@maksymkyryliuk492]

Thanks for video!

[@ibrahimergen9615]

You are amazing good work🎉🎉

[@manishrawat5253]

woww.. amzing content man keep going.

[@tomasztarnowski4434]

Thanks, will do!

[@prashlovessamosa]

Thank you

[@shy-soonyubing]

hi tomasz, first of all thank you for great lectur
I have a question that I'd like to send a file or a picture from the chat app, is there any article or link that I can refer to ?

[@ibrahimergen9615]

Nice job bro can you do this for video chat

[@eR1cK92]

Great job dude, at my work they are using angular but nvm I am backend ajaj umm could you do upload a video Unit testing for anyone even or Mock Crud method ? Just miss that for Now , thanks for vídeo con ws

[@tomasztarnowski4434]

Hey Jhon, thank you. Yeah I keep getting comments about doing video with unit testing / TDD and I've got it on my list. With the web chat I decided to not add tests because it'd probably double the time making it 10 hours long 😅

[@malaythakur7703]

i am getting this error :
Stack serveless-chat-dev failed to deploy
Error:
CREATE_FAILED: MessagesTable (AWS::DynamoDB::Table)
Properties validation failed for resource MessagesTable with message:
#/AttributeDefinitions/1: required key [AttributeType] not found
#/AttributeDefinitions/1: extraneous key [AtrributeType] is not permitted
this comes when i go for serverless deploy, (cross red icon)UPDATE_ROLLBACK_COMPLETE
please do help me

[@user-ss6yc2kg4y]

doubt it's scalable