NextJS Chat App - Build & Deploy in 27 Minutes! (Best UI 🤩)
HTML-код
- Опубликовано: 21 авг 2024
- This NextJS Chat App will teach you how to use React Context, Routing, NextJS and more to build & deploy a beautiful chat experience!
Please comment feedback and subscribe for more lessons / videos 🙏
Starter Code: github.com/ala...
Starter Code: chatengine.io
Hosting Website: vercel.com
1 - Context
Time: 2:03
Code: github.com/ala...
2 - Auth Page
Time: 5:01
Code: github.com/ala...
3 - Chats Page
Time: 11:35
Code: github.com/ala...
Heads up everybody 🚨 🚨 🚨 Make sure to disable Strict-Mode in next.config.ts otherwise your sockets might not connect in dev mode!
when i log in at the end it say that ive used wrong credentials but if put in the good ones.. they redirect me to chatengine site
I am amazed at how easy you made it appear and how quick and simple you made it. Big Cheers all the way from India
exactly
how to run this project cause yarn is not working what r the steps for npm??
@@AS-xz2ni Same
how amazing i looked at so many tutorials and only this one went through the process of explaining good job you earned my subscribe
Just found your channel. Your content is great. A small suggestion,zoom in the vs code window so that we can see the code clearly.
Will do! Thanks
Very Simplified, Very Beautiful, Thank you so much for providing this great engine to the humanity
You're very welcome! 😊
Hahah happy to provide such an engine 😂
@@adam_la_morre Haha, but seriously it saved me one week of work, what if there's 10k people using this.. is it really 10.000 week OMG Thank YOUU
For 10k people its like $70/mo but yeah in general pretty cheap 👍🏼
Great! but please zoom in a little bit in vs Code before recording the video as it is really hard to see the code.
Good idea, thanks for letting me know
when i do yarn it says the term yarn is not recognize, how do i fix this?
Thank you bro
25 - 30 lines of code is the best ratio to have your mobile viewers ready the code along. So you were messing that but other than that... thank you very much great tutorial and amazing person you are .
Pretty cool, thank you! How do you do email notifications?
Thanks! Two options: you can either use Email Notifications in the website (no coding) or use the webhooks (requires coding)
Thank you for this cool tutorial and Chat engine which is a great tool
When installing react-chat-engine I do get a lot of vulnerabilities due to deprecated dependencies and it worries me if that could potentially make this app unsafe?
Great question! We use Snyk to monitor the transitive dependencies, and the only true positive issue which got brought up has been addressed before it was every released 👍🏼👍🏼
Would love to see this tied to an app or existing app.
If you have an existing app it's very easy to tie into it. There is a doc for syncing existing user-bases too if you have on already 👍
@@adam_la_morre can you share that with me?
You voice sounds like Neetcode's :)
Hi Adam, all. I'm trying for some days now, trying to run the code, but I get an error saying something to webpack5, digital envelope routines::unsupported, has anyone else faced this kind ot error? Is there any other way to run the code?
Amazing walkthrough! Loving your content! I wanted to know if the users can chat only with one admin instead of all the users :)
Mee too.Anyone?
+1
Prerequisite for next js? , beautiful Ui
Sorry not sure what you mean 🤔
Thanks for the UI complement!
@@adam_la_morre what are prerequisite for next.js
@@lucario4399 You need to have an understanding of React.
Thank for your sharing. I have a problem when follow your code, so I need some help. After login, there is an error: TypeError: Cannot read properties of undefined (reading '_context'). Source: .next\static\chunks\main.js (1492:0) @ useContext, and points to line: if (Context._context !== undefined) { var realContext = Context._context; ... Am I missing something here?
Dude It means that the variable that you are using in your if is undefined when the browser read your condition
The react chat engine won't install. Depreciated packages
nice tutorial!
Thanks!
Good video.. but just need to zoom in more
Got that loud and clear!
The term 'yarn' is not recognized as the name of a cmdlet, function, script
file, or operable program. Check the spelling of the name, or if a path was included,
verify that the path is correct and try again.
At line:1 char:1
+ yarn dev
+ ~~~~
+ CategoryInfo : ObjectNotFound: (yarn:String) [], CommandNotFoundExcepti
on
+ FullyQualifiedErrorId : CommandNotFoundException
Same problem
I got ` FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory ` when runngin `npm run dev` on the terminal, any ideas how can I solve this ?
I am getting intersection observer is not defined, npm install does not seem to resolve the issue. What is the path of action or is anybody else facing the same issue?
Is Chat Engine Created by you? because on the examples of API it's your name.
Yup!
Title should be ChatEngine Chat Demos using Nextjs
I already finish the project but how can i use the direct message?
ANY REPLACEMENT OF CHAT ENGINE?
Hey Shashwat. I hope your doubt has been resolved. Are you a fresher and open to opportunities in web development?
@@shashwatpandey201 Hey Shashwat. Thanks for responding.
Are you interested in exploring job opportunities in web development?
If yes, then you can connect with me using the contact information in the About section of my profile.
@@Hafsa0526well, I'm interested
please increase your mic volume , its low
hello, is that library compatible with next js using react 18 typescript? thankyou
This would have worked safely last year, the new node and webpack versions won't allow it!
Why i got so many yarn issues?
I am getting lots of errors when deploying
hello sir,
i got this error while run the app -
TypeError: setShowChat is not a function
how can i solve it?
I got 403 error when i try to create new user. What`s wrong with this site?
Step 1: download starter code
only way to build an advanced app in 30 minutes
Cool project! Have you considered to use Tailwind as CSS framework instead of using a plain CSS?
nice but the MessageFormSocial comp.. is no more here plx gove the file ... cintent so taht we can make custm one 🙆♂🙆♂🙆♂🙆♂
How to cancel chat engine subscription? I cannot see an option for it. Pls help
In the site under your project > plans
its doesn't working if i closed my laptop . i upload it on vercel too
Hey Shilpa. I hope you found a solution to it. Have you built projects in React js? Would you be interested in exploring job opportunities in software development?
can we switch between chats page ?
Hey, this video is awesome. I sent you a email regarding an account for chat engine. Hope to hear from you soon. thanks for the tutorial.
Can't do it without credit card ?
Sadly now i can't create a free chat Engine account :')
bro you gotta do better with the sound
good video though
Haha I have a good mic! Probably my Canadian accent 😅
@@adam_la_morre your voice is fine. It's the background noise at some instances
Where’s the SSR implementation?!
Lol wut?
I want to Integrate with my portfolio website as pop up chat button also compatible with mobile website
Go to my channel and look at the support chat video!!
api is down for 3 weeks !!!!!!!!!!!!!!!!!!!!!!!
So is it why I can't run the example? I'm getting error while making request by axios to create user!
what is the yarn code but in npm at 6:22
npm i
is it working ??
after deploying at vercel ?
Hey Rajan. Have you created projects on React/Node js? Are you willing to explore internship/job opportunities in software development?
@@Hafsa0526 yup!!
is nextjs similar to react?
It is built on top of React
i am facing some issue can you please help me out , when I write the yarn its shows bunch of errors what may I do?
Hey Amit! Did you find a solution ? Have you built projects in JavaScript frameworks? Are you open to job opportunities in web development currently?
Wow, telegram clone