Build a Real-Time Slack Clone With Nextjs, React, Tailwind, Auth.js | Part 1/2 (2024)

[@codewithantonio]

🔴CSS FIX (READ DURING 00:02:29 CHAPTER) 🔴 add "./src/features/**/*.{js,ts,jsx,tsx,mdx}" to tailwind.config.ts: content: [ ... "./src/features/**/*.{js,ts,jsx,tsx,mdx}", ],

[@mohammad-aman1105]

This took me an hour to debug and after debugging i am seeing this comment 😢

[@KimJune-x2s]

The biggest reason I am grateful to Antonio is he actually starts step by step and START FROM SCRATCH and explaining each steps, I finished his 3 tutorials out of 20 his videos and understood everything he did and I actually learned a lot because of it. There are many other KZbinrs do very cool projects but the project keeps discouraging by keep telling me " Oh just copy this and paste it and don't worry about it" LOL and I have no idea what is going on, I believe the reason we are here because we are either new on this developing journey or we are stupid, that is why I really like the way Antonio teaches in his video and going to buy his subscription for premium course when I finish his free content first. Again thank you very much for your free content

[@isamalk7744]

Great comment. I would like to argue that you are not necessarily stupid for simply not being able to fire up your intuition and connect the dots of whatever thing that is being copy/pasted. The amount of nuance and possibilities of dependencies/utilities in and of themselves are huge, let alone when merging them with the code, but we are only interested in the functionality needed for this project. Not being thorough with the explanations makes you waste time by forcing you to jump out of the project towards another source of knowledge to try to piece it together, and it is not a given that you will successfully do this. Antonio is one hell of a blessing as a tutor because he understands the need for students to be in a compact, well built learning bubble, reducing immensely the friction caused by the unnecessary difficulty of leaving steps unexplained. To expect a student to go out of their way to reach something you could have given them is reckless at best and cruel at worst. It seems that in the software world, this is a very widespread way of letting knowledge "flow", as if this shit was some kind of egg hunt for the upcoming developers and not the pursue of a career. Once that a student is sufficiently prepared, a challenge here and there is not a bad thing, in fact, it is necessary to assess the progress of the student, but to compromise the main didactic source by being obtuse or uncaring about certain steps is plain and simply incompetent teaching. I read a quote a couple of hours ago that directly point out the importance of extremely well crafted tutorials like this one, it was something in the lines of "The path of accomplishment is not built by the quantity of time spent, but by the quality". It is only through dedicated and conscious effort that you will reach a worthy goal, but it is also true that you cannot do this alone, and you need a dedicated and conscious foundation to not shamble on your way to that goal, and Antonio has given us that.

[@kiransilwal]

Antonio, If my SaaS ever become successful, I will comeback for sure and donate to your cause so that you can continue helping the up and coming entrepreneurs out who are looking up to make this world a better place.

[@SuperPompey77]

Last message i sent was that Canvas was the best build I have ever seen. However I just finished the Slack tutorial and now I feel that that is the best project and tutorial that I have ever seen. The build went smoothly and you explained everything so well. This kind of teaching and explanations that you give are so valuable. I've never seen anyone explain it so well. Thankyou for all your effort in producing this and all the work that you do in explaining everything is so much detail. Its so much appreciated !!

[@akintobiafeez4070]

Antonio, I can't thank you enough for your contributions to me as a frontend developer, I have learned a lot from your videos that I have applied to work. I am forever grateful

[@codewithantonio]

Glad I could help!

[@codewithantonio]

Glad I could help!

[@catinzone]

Great tutorial! I just completed around 1 hour of the video, and I'm thrilled with what I've learned so far 🎉. You've introduced me to best practices and new stacks like Bun and Convex, which I hadn't heard of before. It's just the beginning, and I'm excited to continue and explore everything else you have to share. I truly appreciate your hard work and passion. Your dedication to covering every detail without skipping anything is admirable. You've earned a spot on my top KZbinrs list, and I can confidently say you're a fantastic mentor. Thank you so much for your efforts! 🙏

[@codewithantonio]

Great job!

[@miraclenerdkidchiki6249]

how many hours have you completed so far? or are you on the part 2?🤔🤔

[@codewithantonio]

Hi all 👋 In this 15 hour tutorial split in two parts you will learn how to create an end-to-end fullstack and real-time slack clone, all with workspaces, channels, 1:1 conversations, threads, reactions, editing and deleting messages as well as member roles. By the end of this course you will gain knowledge on how to use cutting edge technologies to build your very own professional collaboration tool!

[@braydenfulken2495]

Keep it up bro. I'll keep sharing your channel to other developers to subscribe. Great work.

[@johndoe-o4i]

thank you :)

[@talalanwer809]

Can you please tell me what browser you're using in this tutorial??

[@DoingCoding]

@@talalanwer809 its arc browser

[@gmd9767]

Is anyone else having a problem with convex auth on safari? It doesn’t redirect to the home page. Works fine on Chrome.

[@ggr0go]

Hey Antonio, I just wanna say thank you so much for everything 🙏🏻

[@浪心宅人]

太厉害了主播，看过youtube没有见过这么好的视频👍👍👍

[@shivammittal5119]

Bro you are helping thousands of freshers without spending any kind of 👍🙏👌💰😊

[@maliksuleman9474]

Antonio you are a great instructor for developers. Love from Pakistan

[@pratikgupta3046]

Was about to finish my final leg of the super comprehensive financial platform🤣... and I see another banger! You rock, Antonio! God bless you!

[@codewithantonio]

You got this!

[@joker-wr8pt]

One day bro will create his own KZbin 👀🐐

[@iamdanajr]

if he created his own canvas, slack, notion and llm clones, youtube is not an issue.

[@willzerawz581]

Friend, you are very good, I am passionate about your content and I watch all your videos, honestly you are the best channel related to programming that you currently have on KZbin, your teaching is excellent, please don't stop I beg you haha

[@IvanGregorTabalno]

What I like most about Sir Antonio is that he never gets tired of repeatedly explaining the step-by-step basics, like configuring things such as ShadCN or setting up a new Next.js project. Especially when it comes to setting up authentication, even though these tutorials are already in his previous videos, he still doesn't get tired of explaining them in his new videos. His tutorials are a huge help, especially for those who are new to his channel.

[@miraclenerdkidchiki6249]

right?..i just love that about him...he doesnt assume that you already know or have don those steps before even though he has used it countless times in past projects..the guy is a God-sent for fullstack Next js devs

[@rntbuilds]

@@IvanGregorTabalno that's so important. Thanks for pointing it out

[@Blck4004]

Antonio Is The Best One That Makes Turtorials In Full-satck Apps

[@Sapiens-dev]

Thank you very much, you're the best teacher! Your lessons on website development on KZbin are clear and easy to understand. I've learned so much from your videos. Thanks again! 💖

[@codewithantonio]

Wow, thank you! ❤️

[@youneshenni5417]

You are the GOAT of Next JS tutorials !!!

[@technoinfoworldwide2329]

wow.this is a begineer friendly tutorial.Thanks man ! It would be better if you had mention begineer to advanced in title so that it can reach directly to us.

[@Metovski]

You are king of the web dev instructors!

[@MohammedMaaz-un2gp]

Been waiting a long time. Thank you for this!!

[@gambomaster]

Legend is back with yet another amazing tutorial. 🙏🙏🙏

[@SK_Covers]

Bro is back with the banger 🎉 Sharing is caring ❤❤❤❤ Love your work 😻

[@Deus-lo-Vuilt]

Thank you Antonio, it is appreciated that you do everything step by step and can see the process.

[@smartbeeinc]

My Odogwu Antonio! you're just amazing. God bless you, man

[@0xOmzi]

Thanks so much for this mini course sensei 🙏🏽❤️. Time to level up!

[@leomelegari]

Thanks man! This is insane! Excited for the part 2 already

[@codewithantonio]

Coming soon!

[@SirEdges_Adejo]

Another great tutorial that builds its own Auth with open source package unlike others who just advertise for 3rd party commercial companies packages and call it tutorials. Great tutorial as always 🎉

[@SuperPompey77]

I am still going through the last build on your paid site. I have to tell you it is the best site I've ever joined and am learning so much. Once i finish that build I will start this one. I'm at the point in that build where you are explaining Hono which seems very good for API's

[@codewithantonio]

Thank you for supporting my work ❤️

[@hashblast3r]

The GOAT drops another banger!

[@tmk2462]

The GOAT, nothing else to say ! THANK YOU man ! Hi from Paris !!!!!!!!!!!!!!!

[@S.AdithyaVardhan]

The wait is over 🔥

[@hienluongvi3533]

Super cool, thanks for the hard work ❤❤❤

[@mohammadabbas1623]

My man is back ❤

[@mkhanyisisimelane3477]

Here we go! 🐐 is back

[@Miguel_Castaneda]

Let's go! Another great video!

[@MatheusGrizaEstrazulas-f9g]

Cheers from Brasil, Antonio! Your videos make me get up from the bed and start coding with u. Thanks for the amazing classes and the amazing channel you have!

[@patrickmullot73]

Antonio's tutorials are really high quality. I just miss a mention of the tech stack in the comments or at the beginning of the video.

[@KimJune-x2s]

Holy shit I just finished your discord tutoral and then refresh I see this? and its currently 2am, I don't think I will sleep tonight

[@padamsubba1973]

😅 baby calm down 😂😂

[@KimJune-x2s]

@@padamsubba1973 Hehe just started my journey with coding for 6 months, try to learn as much as I can from Antonia then put all things together to create my own project, all tutorials from Antonio is no joke not like useless shit I learned from my schools

[@hameeeed5992]

@@KimJune-x2s why not try and build this on your own with the knowledge you got from the discord, they are almost same.

[@shadowslayer2248]

KZbin's not gonna delete it and there's always tomorrow 😂

[@JourneyGoesOn1]

hey yo the Clone Is Worked The Discord Plese Tell me

[@ahmedaq9018]

amazing as always Antonio... please consider making a comprehensive tutorial on Supabase or using Supabase (like what you did with Convex)-- using the Supabase Auth and without using Primsa or Drizzle -- exactly as you do with Convex... just consider that please... would be really amazing to see Supabase in the Antonio way... really thanks a lot for everything you do and for the amazing, authentic tutorials.

[@DeepakSankhyan]

The Antonio Magician developer pull another rabbit from the hat , Enjoy folks, bow down to you Antonio........

[@jovincebrillantes1042]

Can't wait for your React 19 tutorials when React 19 is finally released.

[@3aw-3aw]

Awesome course! Thanks a lot for your efforts Antonio once again.

[@codewithantonio]

Glad you like it!

[@andyloren4826]

This boy single-handedly builds an entire software.

[@not_a_human_being]

Your vids are such a treat! :D

[@shariqshaikh721]

Amazing Tutorial. Easy to understand and clear step by step explanation

[@codewithantonio]

Thank you very much!

[@DarkAcademyUniversity]

Damn bro, you almost have 350k subscribers. Congrats bro! When I subscribed to your channel, the numeber of your subscribers was 12-15k. Keep going ! Nice growth!

[@codewithantonio]

Thank you for your support!

[@brunoaalexandre]

Amazing 🔥🔥🔥

[@bigwillkilgallon]

14 seconds ago, get in. Always got time for you Antonio

[@Fr4nz2K]

Bro im here right now because my groupmate just said to the professor that we will create a application like Slack and he was ecstatic because most groups just decided to go with ecommerce app. Bro I thought I was cooked until I saw this 😂 So Antonio thank you.

[@codewithantonio]

Good luck!

[@datogogniashvili3304]

Duude u always drop bombs man

[@iMarkyJD]

Yet another banger! Thank you Antonio, you da man! I would love to see you feature other frameworks in a video. Possibly Remix, Astro or Svelte?

[@codewithantonio]

Thank you! I am eagerly waiting for Tanstack Start to become available. I am also eyeing Remix in the future

[@miraclenerdkidchiki6249]

@@codewithantonio Tanstack Start + Convex is going to be the tool to build my first SAAS 😁

[@atulkadyan1303]

amazingg once again. I always wait for your videos

[@codewithantonio]

Glad you like them!

[@nomadmack]

Grande Antonio!! Grazie mille

[@kei4248]

Thank you for adding timestamps!

[@mehmetyalvac7338]

appreciate your effort! Really helps getting in the dev after some time :)

[@muhammadusmanali3718]

Great tutorial man

[@ruturajbhandari7695]

I can really build the project right now but , Thanks for the super amazing mega project, By learing to do clones with you , I am able to grasp the key ideas or the key feature of the clone and i kind of get a mental model of it , which i can use in my own projects . Thanks again

[@Iamvijaypotnuru]

Really awesome sir ❤

[@michaelkuksov6795]

This is incredible! Thank you

[@7rkat701]

This guy this guy !! what amazing content !!!!!!

[@codewithantonio]

❤

[@Swizzy19891]

Great work!

[@codewithantonio]

Thank you!

[@achrefnabil2463]

Please please really we need mern stack projects especially back end part ❤

[@ADHDOCD]

Holy smoke! This man keeps dropping content one better than the other! Best KZbinr for coding! For your next idea, can you also build a CRM like Hubspot, GoHighLevel? PS: where's the donate/thanks button on your channel??

[@hellforall8140]

Ok Antonia thanx for introducing me with Jotai initially i thought u will use zustand which i didn't like much so i integrated with redux toolkit...and now i am managing state with that... kindly use redux toolkit in upcoming projects ❤❤❤thanx for this

[@AmirShakeel-kt6jg]

You ARE THE GOAT

[@jonedoe2163]

Thank you Antonio 🎉😊❤

[@wahidulislam-dl5cv]

amazing videos thanks for making this tutorial videos really appreciating 💕

[@codewithantonio]

My pleasure 😊

[@neonblaze1-c6x]

Great project ❤

[@prashlovessamosa]

Thanks Antonio indeed very helpful

[@AbdullahRajpoot117]

Grrreat!! 😎

[@galaxy792]

how to thank you man, you are great.

[@user-xy5sm5nn3v]

you are THE BEST

[@samincgs]

Just curious I don’t know if you mentioned in the video yet because I’m so early on, but is there a reason you switched to using the src directory instead of the app directory because in all your other projects you used the app directory. Thanks again for an amazing tutorial, always learning so much from you Antonio :)

[@codewithantonio]

No any special reason really, i just feel it is more structured that way!

[@MrPlaybook]

This guy rocks! True story

[@kasyfizamzam]

can't wait to see next tutorial using shadcn blocks and chart. maybe inventory management app?

[@motlalepulasello8775]

Consider me blown away. Your dedication is admirable! And not to be ungrateful but can you teach us how to build a merchant of record or any payment processing solution that can mimic or rival platforms like Paddle and Lemonsqueezy? 🥺

[@mr.fabian8471]

Thank you !!

[@alexawunor8853]

How do you figure all this things out? 😅🤣 You're the standard man. Keep up the good work. 👌👍

[@MrArod1207]

Another awesome tutorial. I am about to get started on it. Can you guys give me feedback on the best way to get through a long tutorial? Do yall watch all the way through, pause the video after a couple of minuets? Whats the best way to learn?

[@BliitzPint]

We really have to speak about the different pronunciation of the words "modal" and "model" ;). Especially for someone in development it is important, as both exists but both are completely different things. modal = long "o" (with a u-sound, like in "low" or "boat"), soft "d" model = short "o", hard "d" (some say it with a long o, that's also correct, but here there's no u-sound)

[@DoingCoding]

not necessary lol. not everyone is native English speaker and have to give a shit about perfection

[@BliitzPint]

@@DoingCoding If you don't thrive for perfection, then you should avoid coding tbh... just saying. And I'm just saying this because there are also "data models". And "data models" and "modal windows" are something completely different. So when you pronounce them the same some learners here might get confused...

[@gabrielchima6916]

Wow, Antonio is not pregnant at all, Always delivery boom✨✨✨✨

[@9622AX]

Thanks for the project. We need BTS of all ur projects. 😅

[@learnanywhere139]

hope next time you will release a toturial related to drag and drop to create interface (CMS)

[@CarlosTello-m8h]

The best!

[@chema3659]

Eres el mejor, muchas gracias por compartir todos tus conocimientos.

[@olowoniyidaniel]

anthonio wtf is this now... let's go build this... and thank you for this resource ... GOD bless you 🙃🙃

[@AjaySingh-jz8qx]

2nd 💯💯

[@futshipcom]

Would you consider creating a tutorial video for React Native and Laravel? I haven't watched the tutorial yet, but I'm sure it's the best. 🎉

[@kamanipaul5972]

Hehehe. Another Anthonio course. 🥳🥳🥳

[@mahmoudtokura]

Would you consider a beginner tutorial playlist in React and NextJS? It would be nice to get some solid foundation knowledge for some of us who are new to React and Next. Thanks

[@dave3k]

Holy crap, I just checked the courses on the main site and you actually build fully functional clones with cool features. The problem is I'm a complete beginner and only know HTML/CSS at the moment. Can you guys recommend some courses/resources that I can learn from that'll help me to get to the level where I can take Antonio's courses? Paid or free is fine, I know it's gonna be a few years but I'm pretty excited to learn because I have a few app idea's of my own that I'd love to be able to build myself.

[@hellforall8140]

Learn js then react then some node back-end and then it will be fine to follow this tutorial

[@dave3k]

@@hellforall8140 thanks for the roadmap. Are there any courses you would recommend?

[@hellforall8140]

Everything on Hitesh chaudhary channel then come back here for next js project development..it will take over an year to grab those concepts​@@dave3k

[@cubeunicorn4055]

Thank you Antonio, just want to say please teach us how this types of projects run in production what tools are used to maintain this projects apps

[@paulnjau5444]

Great Great Job

[@anhoangbinh9602]

really really cool

[@dereksantossidi6850]

Ate 5:54:31 he was like waking up, remember to exercise antonio and sleep well man :))). PS: thanks so much for the course im in the middle of the amazon jungle and it's thansk to you that im practicing and learning typescript.

[@codewithantonio]

😅 while I usually do these late at night, that part of confusion was caused by my neighbor randomly drilling the wall, so i had to decide wether to continue talking, or pause the recording since i had no idea if the mic will pic it up. it does pic it up, so that chapter will be a bit weirdly split, but i think i mostly make it seem like a normal chapter 😅

[@dereksantossidi6850]

@@codewithantonio yeah you did haha thanks a lot for everything, have a blessed week mate.

[@Divas_Sagta_09]

Please build Stream Yard clone using MERN Stack

[@lalitsagta2629]

Yes please,, much needed project for resume

[@Divas_Sagta_09]

​​@@lalitsagta2629 Yah definitely.. None of the youtubers have made this project.. But I am sure this Legend can definitely ❤

[@niltonschumacherfilho3368]

Hey Antonio! Love you videos! Does paying on your website show extra content for all tutorials?

[@mdsalahuddin46464]

Awesome

[@programacaocomramon]

The legend, the myth