Build a Chat App in 9 minutes with AWS Amplify and Next JS

Learn how to create a real-time chat app using AWS Amplify subscriptions and Next JS. Setup AWS Amplify with Authentication and GraphQL API to subscribe to live updates and create a messaging app in 9 minutes.

Source Code:

We'll Set Up The following:
- AWS Amplify's User Authentication to Sign Up & Log In Users.
- Authenticated requests & Server-side rendering using Next.JS.
- Live Updates using AWS Amplify's Subscriptions. 🤯

Timestamps:
0:00 - What We're Making
0:40 - Creating The Project
1:56 - AWS Amplify Setup
3:15 - Backend Creation
4:58 - Frontend Authentication
6:00 - Serverside GraphQL
6:40 - Frontend Design
7:25 - Creating New Messages
7:54 - Displaying Messages
8:39 - AWS Amplify Subscriptions
9:08 - Amplify GraphQL Query
9:40 - Conclusion - Subscribe!

If you'd prefer, check out the text version of this article too:

Find me at:

[paulparker]

I appreciate the amount of effort it takes to make a tutorial this concise. Well done.

[khandoor]

Keep the Next / Amplify stuff coming brotha!

[deathdefier]

I'm so glad I found your channel man, you've helped me level up at work within a day!

[abhiramsatpute]

Fireship of Full Stack ! Great work !!

[mohammadalaaelghamry]

Thanks Jarrod, great video, very precise, straight to the point, it shows the big picture very clearly.

[chenxing]

Hello, I have recreate this app but the problem is, I have to refresh the browser everytime to get the message.

[yogpanjarale]

Awesome Fireship Quality Videos
Really underrated channel

[kristymclarnan]

please help....graphql is not being read in javascript, its being read like an environment variable

[satyak]

Amplify supports Next 11. How to install specific version ? I am automatically getting 12 version after using npx create-next-app

[chenxing]

Is this IaaS or PaaS? Does the Amplify instantiate VM?

[M-ABDULLAH-AZIZ]

would this work for like a chat with 100 or more messages? I have heard that polling would be required?

[anhadparashar]

Hi I am not able to see styles in localhost:3000

[bhurvasharma]

i'm having a lot of trouble with using amplify cognito in a flutter app, please make a video on that

[saurabrakshit]

Amazing Video !
Please make a separate vdo on below topic coz there is no resource available in internet related to this topic.
I want to know how to do the Sign Up, Login
& other MFA in React-Native App, if I already have a existing
backend in AWS Cognito .

And have the below details of the existing backend :-
aws_cognito_identity_pool_id:
aws_cognito_region:
aws_user_pools_id:
aws_user_pools_web_client_id:

[Test]

Great video! How can this be run in the cloud instead of only on my localhost? I see the app in Amplify, but the production link doesn't work. Thank you.

[smartengineer]

I have the UI and the source code for a react native application how do I built it in AWS Amplify? how do I upload the Icons, Ui and the code in my app? Please help!

[althafrifath]

Can i do all these for free on AWS or i have to pay this ?

[student]

In a short time, much knowledge was given. great job! thanks.
But one issue, I am facing when amplify push
× An error occurred when pushing the resources to the cloud
Cannot read property 'length' of undefined
An error occurred during the push operation: Cannot read property 'length' of undefined.
has anybody faced this issue?

[buildappswithevan]

Too fast and I just did the tutorial and it doesn't work. I have several errors with user not defined. etc.

[subujekupadupa]

Programming videos without the project's example at the beggining are so bad