Build and Deploy a Realtime Next.js App with Permissions and Notifications | TypeScript, Tailwind

[@ruhaimhakeem6170]

Bro is not pregnant. But always delivers 🔥

[@suryakantasinha]

😂😂

[@sanju_1104]

Broo 😢😂😂

[@lekwapemamyala]

😂😂😂

[@javascriptmastery]

😂😂😂

[@akbarhafeez490]

😂

[@gideonodiokineh3145]

You are not only teaching people how to code but how to build products from the ground and make a living out of it. You are such an amazing person!

[@javascriptmastery]

I appreciate that!

[@bravehub]

The only KZbin channel where you can learn Graphic Design, Cybersecurity, Programming Languages, Web Development, Web Applications, AI & ML, and almost anything in the IT field.

[@javascriptmastery]

I try my best!

[@STP7431]

​@@javascriptmasterybro I paid for your course of Next.js and I can't access my account

[@daneze7560]

Ur tutorial is always addicting 😂​@@javascriptmastery

[@syedahmedullahjaser1150]

Let us catch a breath… I first need to complete that hospital app! Thanks a lot!

[@javascriptmastery]

Thank you!!

[@josephjohn494]

​@@javascriptmasteryI have completed the hospital management system and I am so proud I have. This is definitely next. Thanks for your efforts and impact ❤

[@mohitpanchal9313]

if you're stuck at 18:30 with the error: "env: ts-node: No such file or directory" you don't have typescript and ts-node installed globally on your machine, so do this npm install -g typescript ts-node

[@javascriptmastery]

Thank you for sharing!

[@BliitzPint]

Life saver! Thank you. And for all who still get a lot of ERR messages on a mac: Try it with "sudo npm install g- typescript ts-node" and enter your password afterwards.

[@miticosandroid5298]

thanks bro

[@adarsh-chakraborty]

thanks

[@darkknight0972]

that helps, thanks buddy

[@Tanatswa-q5k]

Honestly i haven't been coding through your tutorials coz im in my final year at school but still im subscribed because i cant lie, this is out of this world

[@javascriptmastery]

Thank you!

[@KillThread-kt]

A lot to learn from, I'm not even done learning from the previous patient management system. Great Work.

[@javascriptmastery]

Thank you so much!

[@northloo]

the portfolio website, the appointment app, and now this... you been poping off bro.. i remember when i first did your nextjs blog app video that was like 2022...we all have grown so much. Great chanel

[@javascriptmastery]

Appreciate that

[@zeeshanshaikh04]

Your content is top notch. I've never seen any channel that provides such detailed videos for free!

[@harshayyy9]

js mastery=> import tons of third party libraries make projects look fancy no logics just fancy showcase but nice work i appreciate

[@Sibixpur]

this is my his first video , and dyam like the project is nice , but bro just keep going without any explanation , imma just do on my own..

[@harshayyy9]

@@Sibixpur if u know socket io then this project is irrelevent

[@hexssoulld]

Wtf did I just read

[@JiroAiProd]

no devops 😅

[@omhedau3919]

I've been watching your videos, and they're amazing for learning! While creating applications, please mention any new features you've added beyond what's already available. This really adds value to the project, whether the feature is small or large-it just needs to be useful. Thank you! ❤

[@mohitpanchal9313]

if you're stuck at 1:21:54 and still not able to fix this issue then delete all users from clerk and try again, I’m not sure why but it was restricting from updating the default access, but after clearing up users there and signing in again, it works!

[@ahsankabir6810]

it's not working for me. I tried deleting the users and signing up again. but after I create a new document, I'm stuck with the loading page

[@truewisdom1123]

@@ahsankabir6810 same too, stuck inj the loading page

[@moizhabib9730]

did anyone resolve the loading issue. stuck there as well can't figure it out

[@VGS_7]

@@moizhabib9730 i suggest u to check if you have written tag or not at the end of collaborative room

[@moizhabib9730]

@@mohitpanchal9313 for me the name the error was cause by the name of the file api/liveblock/route whereas I wrote api/liveblocks/route and that caused the issue for me

[@multipartgaming]

I was lucky to find this amazing KZbin channel about IT programming. Great work!

[@OPGAMER.]

Completing the healthcare platform for now. Starting this project next.

[@javascriptmastery]

Amazing work!

[@seveto3911]

Me too 🎉

[@Sun_powered]

I made your Aceternity UI Portfolio project and it's cool! Can't wait to dive in into this one!

[@javascriptmastery]

Awesome! Thank you!

[@vijay_you]

This channel is a gem 💎

[@javascriptmastery]

Thank you! 😊

[@AwwdLabs-ce4yl]

Ooooooohhhhhh! You bugger. Another one, right on time!! I really needed to know about this software

[@javascriptmastery]

Amazing, hope you enjoy it!

[@jehnzcode]

The only KZbinr with zero haters 😁

[@javascriptmastery]

Thank you! 😁

[@IsaacOladimeji]

Full blast Adrian! Love this🚀🚀

[@miracleokonkwo4130]

You are the best!! Got a react native gig after taking your tutorial

[@javascriptmastery]

That is awesome!

[@ahsankabir6810]

Hey Adrian! Just wanted to let you know that I have finished and deployed the project. I have learnt a lot while doing so. All credit goes to you! Take love. And keep blessing us with your extraordinary contents. I'd personally love some react native projects. But whatever you bring to the table, I believe, it's always gonna be as awesome as this one! Godspeed!

[@truewisdom1123]

how did you resolve the error in 1:19:50, i keep seeing th eloading page

[@mrwhosetheuneek]

Only the channel who responds to all comments. ❤

[@statuschannel8572]

for 18:30 install ts-node as a dev dependency npm i -D ts-node OR pnpm add -D ts-node and now run the npx jsm-editor add editor

[@katadayat3746]

Bro I love u so muchhhhh

[@sagyblecher9258]

Wow thank you so much!

[@abhinavsingh5099]

dude you are awesome

[@paulbananzi6639]

Thanks for always building real world projects

[@javascriptmastery]

You got it!

[@senlee325]

I watch your tutorials to upgrade or add new features on my websites. Thank you💚

[@ryan_roga]

9:02 NOTE: Since React 19 is the latest and greatest, there may be issues with your shadcn installation. You may be asked to "Use --force or Use --legacy-peer-deps". As far as I can tell, the "--force" option is the one you can select. Be aware that because this video is out of date, you may run into issues. The only other option you could try to use is to install a previous version of next.js and react, so that you don't run into issues. The project uses the following versions of React and Next: "next": "14.2.5", "react": "^18",

[@curtismuasya1865]

Woooowwwww, who else prefers these kind of projects 🖐. Of late I am quite enjoying these stalk apps and am quite learning a lot. Thank you so much, Adrian.

[@_sid.m]

I just decided to start learning Next.js today before moving on to React Native and Boom! Here is the new video.

[@javascriptmastery]

Amazing! ❤

[@yashshinde1881]

I highly recommend utilizing NextAuth for authentication in your upcoming Next.js project.

[@kennedymungai1]

Clerk is just hosted next auth

[@charliegunthers]

I just finished it and got it deployed! Thank you JSM I learned quite a bit

[@aadarshdubey5738]

from 1:04:10- 1:05:10 when i click on start a blank document it's showing 404 error....do you know how to fix it

[@atiquabd6009]

@@aadarshdubey5738 maybe your routes doesn't to navigate to start new page, check import

[@138_zishankhan9]

how do you run the code, i got Error: cannot read properties of undefined (reading 'data')

[@TheNightValley]

Also waiting for your react native course boss, your teaching method is second to none ❤

[@javascriptmastery]

Thank you, coming soon! ❤

[@liveblocks]

Thanks for featuring us! 🖤

[@javascriptmastery]

Any time! 🖤

[@ryanhajji]

W liveblocks

[@Tapadar.Monsur]

Adrian never disappoints.

[@javascriptmastery]

I give my best!

[@StudyBuddy-jj5pb]

this will be fourth project I will be building from watching your tutorial. thanks you a lot.

[@javascriptmastery]

You are welcome!

[@oussamamidouch1286]

You are just the most awesome content creator for me personaly, thank youna lot !

[@javascriptmastery]

Wow, thank you!

[@amberforrester.m]

Thank you again for another special project!

[@lasindumaduranga7530]

bro im doing next.js because of you!!! keep up the good work ❤

[@javascriptmastery]

Amazing!

[@echelachristopher6532]

You're simply the best.... Bro u deserve the 👑🎉

[@javascriptmastery]

Thank you so much 😀

[@mostafaabdelazeeem]

Amazing work and effort, always waiting for new amazing content the best channel in the world! Keep Going Bro :)

[@javascriptmastery]

Thank you so much 😀

[@mileslegend]

this one caught me off guard 😇😇i dint see thuis coming ..thank you for not allowing us to grow stale

[@javascriptmastery]

Always!

[@ryuu5768]

Bro can you tell me should I add tutorial watched projects in my resume ,as a fresher ​@@javascriptmastery

[@-mahmoudadel2628]

Coool, keep going in these real-time and real world features ❤❤❤

[@javascriptmastery]

Thanks! ❤

[@ninamohamed490]

I can’t tell you how much I needed that video

[@ahmedbahnasy2243]

You're a legend as usual bro 💪💪

[@javascriptmastery]

Appreciate it!

[@thoriq_aulia]

bro casual mode: legend bro legend mode: (beyond you can imagine)

[@nnlife-zv9yj]

Fan-fantastic buddy its fantastic ✨✨✨keep it up 💪💪💪

[@javascriptmastery]

Thank you!!!

[@Devin69786]

Love from India ❤❤❤

[@javascriptmastery]

🎉

[@faraz9641]

this Weekend Gonna be Wonderful! 🥰🥰

[@javascriptmastery]

Enjoy!

[@Omi-rn4cg]

JSM, I'm in your Discord community. You're amazing! Well done! Permit Me would just go to your github and get started

[@javascriptmastery]

Awesome, thank you!

[@p4pichul0]

Amazing video, explanations and documentation - love it!

[@TeslaIL]

Can I deploy the apps in the tutorials by Render or Netlify Without using Vercel or Hostinger?

[@javascriptmastery]

Sure, you can use whatever you prefer :)

[@robertwabuti9984]

I wish there were 2 like buttons just for videos like these!

[@Nafeed-i6r]

Great video again🔥🔥❤

[@javascriptmastery]

Thanks 🔥

[@limit9483]

Great video idea. You are the best, I appreciate your work. Keep up! 😃

[@javascriptmastery]

Thank you!

[@alexanderchepkiyeng]

Clean and Precise 👌🏽 👏🏽 🥳

[@javascriptmastery]

Thank you 🙌

[@oviemenaokpowodu926]

Man,you are a blessing

[@javascriptmastery]

Appreciate it!

[@InspireSphere974]

U are jus wonderful 👍. Always delivers

[@javascriptmastery]

Thank you so much 😊

[@Nothwarren]

Incredible work ! third course I'm following, not disapointed

[@amajangbah9265]

The goat 🐐 is back

[@javascriptmastery]

Thank you!

[@jancodebeer7779]

Loving the content man!!!

[@javascriptmastery]

Thanks!

[@firewatermoonsun]

1:26:28 const inputRef = useRef(null);. It should be "HTMLInputElement". Also Input element has "disabled" attribute instead of "disable".

[@R0VERKAI]

Thank you so much for using free tools for your tutorials. I really appreciate it 🙏.

[@blackrainbow0]

only youtube channel that I subscribed

[@javascriptmastery]

Woah, amazing!

[@Aleksandra-fw1uz]

The entire course is amazing, and you explain everything really well! I just ask if you could go a bit slower because I got lost many times and spent a lot of time fixing some silly mistakes. Greetings from Serbia

[@javascriptmastery]

Pozdravi Srbiji!

[@falaksherdev]

Thank you so much; this is exactly the work I needed.

[@javascriptmastery]

Perfect!

[@Cr7Nih]

Real world projects batman adrian 🔥🔥

[@javascriptmastery]

Thanks! 🔥

[@suryakantasinha]

Great video content again ❤

[@javascriptmastery]

Thank you!

[@0x--]

Love from Argentina 🇦🇷

[@javascriptmastery]

Greetings to Argentina!

[@popli10]

Thankyou so so much for everything u do for us people, really grateful

[@javascriptmastery]

Thank you!!!

[@imamachmadzulfikar5222]

Самый крутой канал по криптовалютам с лучшей ведущей🎄

[@EfeAsiughu]

Hi Adrian, you're awesome 😎👍

[@javascriptmastery]

Thank you!

[@BliitzPint]

45:50 - You forgot to provide that link in the description ;-)

[@Hillary_Nicholas]

yeah and i need it 😭

[@pemawangchuk2024]

You teach quite well, easy to understand. Your designs are best, and if you could prepare tutorials on how to design using Figma. Thanks and with regards and respect...

[@javascriptmastery]

Great suggestion!

[@sixtusdev]

Bro has arrived again 😊

[@javascriptmastery]

Always!

[@NyiHtut-h6x]

Hello guys, I am having a runtime error occurs at 1:59:35, specifically a TypeError. The error message, "Cannot read properties of undefined (reading 'getProvider')", indicates that the useEditorStatus function is attempting to access a property (getProvider) from an undefined object. How can I solve that?

[@artaman23423]

Same issue for me, stuck..

[@Pipu748]

Got u brother. I ecountered the same mistake. But i've been able to fix it. The problem was that the program was trying to install/use two different versions of liveblocks/core, some packages where trying to use liveblocks/core 2.6.0 while others were trying to use 2.6.1. Thats a nono, (liveblocks/core can be found in the packagelock.json under every instace of a liveblocks package). what i did first was to all my liveblocks dependecies, in package.json, inside peerDependencies, to ensure they all were the same. Then i added, "resolutions": { "@liveblocks/core": "2.6.1" } to make sure every package will use the same version. Hope this is useful for anyone in the future.

[@NyiHtut-h6x]

​@@Pipu748OMG! You really saved me, brother! Thanks a lot! I hope you have an amazing journey ahead.

[@rayyanazmi3753]

@@NyiHtut-h6x I am still getting the same error what did you do to fix it?

[@saifurrahman6972]

@@Pipu748 thank you brother

[@Imacul77Game]

Great project 🎉

[@javascriptmastery]

Thank you! 😊

[@МихаилТерновецкий-и1у]

This is incredible! Thank you so much!

[@chikungmedic]

Something that I like and that stands outs about your videos it is the voice so natural soft and intelligible, that it is explaining all the things that you are doing and building. Although at the beginning of this video voice seems to be faster than usual like a 1.25x playback speed. The voice it is from a real person or it is manipulated with AI?

[@javascriptmastery]

Everything is real. The beginning is sped up a bit to be a bit more engaging :)

[@RashiMalviya-m1f]

Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'resolveMentionSuggestions') Call Stack LiveblocksPlugin node_modules\@liveblocks eact-lexical\dist\liveblocks-plugin-provider.mjs (43:56) React, how to solve this

[@raiyaaaaa]

Up

[@aniketkhambal9186]

replace package.json file with this { "name": "amaze_live_docs", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@clerk/nextjs": "^5.2.5", "@clerk/themes": "^2.1.13", "@lexical/react": "^0.16.1", "@lexical/rich-text": "^0.16.1", "@liveblocks/client": "^2.3.0", "@liveblocks/node": "^2.3.0", "@liveblocks/react": "^2.3.0", "@liveblocks/react-lexical": "^2.3.0", "@liveblocks/react-ui": "^2.3.0", "@radix-ui/react-slot": "^1.1.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "jsm-editor": "^0.0.12", "lexical": "^0.16.1", "lucide-react": "^0.414.0", "nanoid": "^5.0.7", "next": "14.2.5", "react": "^18", "react-dom": "^18", "tailwind-merge": "^2.4.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.5", "postcss": "^8", "tailwindcss": "^3.4.1", "typescript": "^5.4.2" } } delete package-lock.json and node module files. then run npm install and nppm run dev it should resolve the issue

[@PauloJsx]

Muito bom. Muito obrigado pelo conteúdo, Adrian!

[@javascriptmastery]

Thank you! 😊

[@lokeshjoshi3345]

'"ts-node"' is not recognized as an internal or external command, operable program or batch file. getting this as error while running this command (npx jsm-editor add editor) what to do?

[@ami-inn]

same issue for me also please give an reply

[@javascriptmastery]

Npm install -g typescript ts-node

[@kenshalom6098]

wowowow wwoow your speed is just remarkable

[@knowwow6638]

Really helpful 🤩

[@javascriptmastery]

Appreciate it!

[@faraz9641]

@1:44:44 i used to think that you do all this in one sitting !!! Glad you are also a Human Like us :D

[@javascriptmastery]

Yes, that's why I wanted to share it :)

[@the_java_developer]

bro big fan from india big fan as a backend developer

[@nytek]

You need a basic to medium understanding of react OR next.js, or react AND next.js was intended?

[@sumayeablash952]

My hero ❤

[@javascriptmastery]

❤

[@WithBhavnish]

Love this. I should try this

[@javascriptmastery]

Let me know how it goes

[@mohitpanchal9313]

absolutely fantastic course

[@AbderrahmaneBelarbii]

Great work! Please do a similar project with NextAuth and MongoDB. I learn a lot from you and I'm continuing to learn more.

[@javascriptmastery]

Thanks, will do!

[@berkipekoglu]

Awesome!! Thank you!

[@javascriptmastery]

Thank you!

[@Tsukuyominaamhai]

AMAZING PROJECT

[@Rajesh-rg6fw]

Recently in a interview, i was asked, if you are building your own production level application you should use next.js or react? I said next, but he told me to use react never next. Because of the ssr things will not work efficiently, specially if its backend heavy application. But i see everyone in the youtube is using nextjs, for auth clerk( witch i feel not secure and can be compromised anytime). So im wondering what is the best approach?

[@Brown-e1o]

wow what a great app to add to my portofolio

[@javascriptmastery]

Amazing!

[@daneze7560]

Im currently learning html css and javascript once im done with those will definitely take this course

[@codehan]

I‘ll work on this one :) Thnx! Can you please do project with Web Component build with pure JavaScript/TypeScript without any helpers like Stencil.js etc. I think this topic deserves more attention :)

[@akashgudigar807]

We want a video where you tell us how you decide on Frontend part as in the CSS styling etc. coz if you are trying to build a new application its one thing to know all the logic but deciding what styles and where to get them from is a whole different ball game.

[@virajkoradia7468]

Awesome 🎉🎉🎉

[@javascriptmastery]

Thanks 🤗

[@Darvis227]

I love this guy.

[@amjadali-cs3si]

awesome content !!! I hope the next video full-stack Canva Clone With Nextjs

[@javascriptmastery]

I think Antonio did that one already 👌

[@destocot1729]

Just started the tutorial but will probably stop, I know it saves so much time but a huge part for me was not setting up lexical editor from scratch and just not having all copy and paste styles appreciate the content anyways hope it helps others!

[@javascriptmastery]

Maybe try setting it up on your own and then continue following along with the video? That might be an amazing learning experience!@

[@sathirabandara7981]

Good job man... ❤

[@javascriptmastery]

Thank you so much 😀