NextJS Chat App - Build & Deploy in 27 Minutes! (Best UI 🤩)

Рет қаралды 105,613

Күн бұрын

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...

Пікірлер: 96

@adam_la_morre Жыл бұрын

Heads up everybody 🚨 🚨 🚨 Make sure to disable Strict-Mode in next.config.ts otherwise your sockets might not connect in dev mode!

@yannickmathysable Жыл бұрын

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

@abc_cba 2 жыл бұрын

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

@arkahhhzzrisingto1071 Жыл бұрын

exactly

@AS-xz2ni Жыл бұрын

how to run this project cause yarn is not working what r the steps for npm??

@ishasethi_ 3 ай бұрын

@@AS-xz2ni Same

@varunpusarla2590 2 жыл бұрын

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.

@adam_la_morre 2 жыл бұрын

Will do! Thanks

@jacob_dmn 2 жыл бұрын

Very Simplified, Very Beautiful, Thank you so much for providing this great engine to the humanity

@adam_la_morre 2 жыл бұрын

You're very welcome! 😊

@adam_la_morre 2 жыл бұрын

Hahah happy to provide such an engine 😂

@jacob_dmn 2 жыл бұрын

@@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

@adam_la_morre 2 жыл бұрын

For 10k people its like $70/mo but yeah in general pretty cheap 👍🏼

@Meta_Club_0aura Жыл бұрын

how amazing i looked at so many tutorials and only this one went through the process of explaining good job you earned my subscribe

@uknowguy3531 2 жыл бұрын

Great! but please zoom in a little bit in vs Code before recording the video as it is really hard to see the code.

@adam_la_morre 2 жыл бұрын

Good idea, thanks for letting me know

@ignashie 2 жыл бұрын

when i do yarn it says the term yarn is not recognize, how do i fix this?

@anazi Жыл бұрын

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 .

@sahilaujla 2 жыл бұрын

Thank you bro

@besix Жыл бұрын

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?

@e.g.e4934 Жыл бұрын

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?

@eclarkhalid 11 ай бұрын

The react chat engine won't install. Depreciated packages

@BrianArtea 2 жыл бұрын

Pretty cool, thank you! How do you do email notifications?

@adam_la_morre 2 жыл бұрын

Thanks! Two options: you can either use Email Notifications in the website (no coding) or use the webhooks (requires coding)

@yoman9446 2 жыл бұрын

You voice sounds like Neetcode's :)

@gm42069 2 жыл бұрын

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?

@adam_la_morre 2 жыл бұрын

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 👍🏼👍🏼

@maverick173 2 жыл бұрын

Would love to see this tied to an app or existing app.

@adam_la_morre 2 жыл бұрын

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 👍

@emmanuelessien8286 Жыл бұрын

@@adam_la_morre can you share that with me?

@SalmanGhanem 4 ай бұрын

Why i got so many yarn issues?

@yifanyes 2 жыл бұрын

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 ?

@sasipreetham1482 2 жыл бұрын

Amazing walkthrough! Loving your content! I wanted to know if the users can chat only with one admin instead of all the users :)

@anthonyrubua1845 2 жыл бұрын

Mee too.Anyone?

@sahilaujla 2 жыл бұрын

@juleschristiancalamiong9915 2 жыл бұрын

I already finish the project but how can i use the direct message?

@507spidey 2 жыл бұрын

nice tutorial!

@adam_la_morre 2 жыл бұрын

Thanks!

@phatnq2002 2 жыл бұрын

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?

@giacomourbino 2 жыл бұрын

Dude It means that the variable that you are using in your if is undefined when the browser read your condition

@vladmamonov1795 2 жыл бұрын

I got 403 error when i try to create new user. What`s wrong with this site?

@clutchycatz7040 8 ай бұрын

hello, is that library compatible with next js using react 18 typescript? thankyou

@V01D-999 Жыл бұрын

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

@AradhyaJavheri 10 ай бұрын

Same problem

@davidblitz8589 Жыл бұрын

I am getting lots of errors when deploying

@arkahhhzzrisingto1071 Жыл бұрын

nice but the MessageFormSocial comp.. is no more here plx gove the file ... cintent so taht we can make custm one 🙆‍♂🙆‍♂🙆‍♂🙆‍♂

@johnn992 2 жыл бұрын

Good video.. but just need to zoom in more

@adam_la_morre 2 жыл бұрын

Got that loud and clear!

@shashwatpandey201 2 жыл бұрын

ANY REPLACEMENT OF CHAT ENGINE?

@Hafsa0526 Жыл бұрын

Hey Shashwat. I hope your doubt has been resolved. Are you a fresher and open to opportunities in web development?

@Hafsa0526 Жыл бұрын

@@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.

@Maluda_Tech 11 ай бұрын

@@Hafsa0526well, I'm interested

@user-yi3rq7jk2r Жыл бұрын

can we switch between chats page ?

@simyop587 Жыл бұрын

Can't do it without credit card ?

@ellsonmendesYT Жыл бұрын

Title should be ChatEngine Chat Demos using Nextjs

@johncena-qr4yg 2 жыл бұрын

please increase your mic volume , its low

@lucario4399 2 жыл бұрын

Prerequisite for next js? , beautiful Ui

@adam_la_morre 2 жыл бұрын

Sorry not sure what you mean 🤔

@adam_la_morre 2 жыл бұрын

Thanks for the UI complement!

@lucario4399 2 жыл бұрын

@@adam_la_morre what are prerequisite for next.js

@serveshchaturvedi2034 2 жыл бұрын

@@lucario4399 You need to have an understanding of React.

@imsumit96 2 жыл бұрын

hello sir, i got this error while run the app - TypeError: setShowChat is not a function how can i solve it?

@sahilaujla 2 жыл бұрын

Is Chat Engine Created by you? because on the examples of API it's your name.

@adam_la_morre 2 жыл бұрын

Yup!

@hamshi_hameed Жыл бұрын

How to cancel chat engine subscription? I cannot see an option for it. Pls help

@adam_la_morre Жыл бұрын

In the site under your project > plans

@ProblemSolvingDaily Жыл бұрын

This would have worked safely last year, the new node and webpack versions won't allow it!

@shilparawat9008 2 жыл бұрын

its doesn't working if i closed my laptop . i upload it on vercel too

@Hafsa0526 Жыл бұрын

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?

@ranger.1 2 жыл бұрын

Step 1: download starter code only way to build an advanced app in 30 minutes

@bajantokhele9134 2 жыл бұрын

Sadly now i can't create a free chat Engine account :')

@tradingfamily6758 2 жыл бұрын

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.

@xxXAsuraXxx 2 жыл бұрын

Where’s the SSR implementation?!

@adam_la_morre 2 жыл бұрын

Lol wut?

@ahmedfattal9569 2 жыл бұрын

Cool project! Have you considered to use Tailwind as CSS framework instead of using a plain CSS?

@vadevess7273 2 жыл бұрын

I want to Integrate with my portfolio website as pop up chat button also compatible with mobile website

@adam_la_morre 2 жыл бұрын

Go to my channel and look at the support chat video!!

@montanavfx 2 жыл бұрын

what is the yarn code but in npm at 6:22

@CsCodeway Жыл бұрын

npm i

@krcpr007 2 жыл бұрын

is it working ?? after deploying at vercel ?

@Hafsa0526 Жыл бұрын

Hey Rajan. Have you created projects on React/Node js? Are you willing to explore internship/job opportunities in software development?

@krcpr007 Жыл бұрын

@@Hafsa0526 yup!!

@amilcartechnologies582 2 жыл бұрын

api is down for 3 weeks !!!!!!!!!!!!!!!!!!!!!!!

@mgr1282 2 жыл бұрын

So is it why I can't run the example? I'm getting error while making request by axios to create user!

@blackboxbs8642 2 жыл бұрын

is nextjs similar to react?

@yifanyes 2 жыл бұрын

It is built on top of React

@ferrad1 2 жыл бұрын

bro you gotta do better with the sound good video though

@adam_la_morre 2 жыл бұрын

Haha I have a good mic! Probably my Canadian accent 😅

@serveshchaturvedi2034 2 жыл бұрын

@@adam_la_morre your voice is fine. It's the background noise at some instances

@AmitSingh-ox7bx 2 жыл бұрын

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?

@Hafsa0526 Жыл бұрын

Hey Amit! Did you find a solution ? Have you built projects in JavaScript frameworks? Are you open to job opportunities in web development currently?

@a.anvarbekov 2 жыл бұрын

Wow, telegram clone