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:
github.com/jarrodwatts/amplif...
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:
blog.jarrodwatts.com/aws-ampl...
Find me at:
/ jarrodwattsdev
jarrodwatts.com
github.com/jarrodwatts
blog.jarrodwatts.com
www.buymeacoffee.com/jarrodwatts
I appreciate the amount of effort it takes to make a tutorial this concise. Well done.
Thanks Jarrod, great video, very precise, straight to the point, it shows the big picture very clearly.
Short and clear! Thank you!
Fireship of Full Stack ! Great work !!
Keep the Next / Amplify stuff coming brotha!
Thank you bro! Will do :)
I'm so glad I found your channel man, you've helped me level up at work within a day!
Awesome to hear Ananya!
Awesome Fireship Quality Videos Really underrated channel
Wow thank you! I've taken a lot of inspiration from Fireship, so that is the best compliment I can get :-), really appreciate that!
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:
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.
would this work for like a chat with 100 or more messages? I have heard that polling would be required?
Nice video bro
Thank you! Appreciate it :)
Is this IaaS or PaaS? Does the Amplify instantiate VM?
never misses 😈😈
Thanks for the love always!
Amplify supports Next 11. How to install specific version ? I am automatically getting 12 version after using npx create-next-app
please help....graphql is not being read in javascript, its being read like an environment variable
i'm having a lot of trouble with using amplify cognito in a flutter app, please make a video on that
Hey - thanks for the suggestion, unfortunately I don't have much experience with Flutter - so I don't think I would be much help!
Can i do all these for free on AWS or i have to pay this ?
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!
Hey mate, I'm not sure I fully understand what you are asking. Are you using an existing AWS Amplify backend?
@@JarrodWatts I have the source code and the UI for a react native app and icons in a folder in my laptop do I have to use the AWS Amplify cli to create the app or can I deploy it directly using AWS Amplify console?
It does not contain config file. I guess I have to use expo cli that I saw in the video but how do I upload my UI(.XD) file in my app. I am new to react native please help.
@@JarrodWatts I have not created any do I have to create backend too?
Sure I can try my best to help out. Just wanted to let you know this video is using React, not React Native so the code in this video won't work for React Native. If you've already got the source code for a full project and it doesn't use AWS Amplify then there is no need to use AWS Amplify really. AWS Amplify offers a set of services for helping create backends for web apps & mobile apps. I'm a little bit confused about what exactly you're trying to achieve but hopefully this helps.
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?
Thanks for the kind feedback! Did you end up resolving your issues?
Hi I am not able to see styles in localhost:3000
Hello, I have recreate this app but the problem is, I have to refresh the browser everytime to get the message.
and also would you mind tell me where does the data stored in AWS? I can not find it in AWS appsync
Too fast and I just did the tutorial and it doesn't work. I have several errors with user not defined. etc.
100 % doesnt matter how fast he does it if it doesnt work for us
Programming videos without the project's example at the beggining are so bad