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}", ],

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

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

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

[@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?🤔🤔

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

[@浪心宅人]

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

[@Blck4004]

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

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

[@shivammittal5119]

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

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

[@ggr0go]

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

[@maliksuleman9474]

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

[@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! ❤️

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

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

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

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

[@youneshenni5417]

You are the GOAT of Next JS tutorials !!!

[@andyloren4826]

This boy single-handedly builds an entire software.

[@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 ❤️

[@DeepakSankhyan]

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

[@SK_Covers]

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

[@Metovski]

You are king of the web dev instructors!

[@gambomaster]

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

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

[@Deus-lo-Vuilt]

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

[@MohammedMaaz-un2gp]

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

[@tmk2462]

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

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

[@smartbeeinc]

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

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

[@0xOmzi]

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

[@3aw-3aw]

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

[@codewithantonio]

Glad you like it!

[@hienluongvi3533]

Super cool, thanks for the hard work ❤❤❤

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

[@achrefnabil2463]

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

[@shariqshaikh721]

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

[@codewithantonio]

Thank you very much!

[@leomelegari]

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

[@codewithantonio]

Coming soon!

[@jovincebrillantes1042]

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

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

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

[@hashblast3r]

The GOAT drops another banger!

[@mehmetyalvac7338]

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

[@bigwillkilgallon]

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

[@not_a_human_being]

Your vids are such a treat! :D

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

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

[@atulkadyan1303]

amazingg once again. I always wait for your videos

[@codewithantonio]

Glad you like them!

[@michaelkuksov6795]

This is incredible! Thank you

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

[@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? 🥺

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

[@kei4248]

Thank you for adding timestamps!

[@muhammadusmanali3718]

Great tutorial man

[@datogogniashvili3304]

Duude u always drop bombs man

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

[@galaxy792]

how to thank you man, you are great.

[@wahidulislam-dl5cv]

amazing videos thanks for making this tutorial videos really appreciating 💕

[@codewithantonio]

My pleasure 😊

[@mohammadabbas1623]

My man is back ❤

[@S.AdithyaVardhan]

The wait is over 🔥

[@7rkat701]

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

[@codewithantonio]

❤

[@kasyfizamzam]

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

[@alexawunor8853]

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

[@Iamvijaypotnuru]

Really awesome sir ❤

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

[@bakedbash]

The signout is not redirecting to /auth automatically for me 1:20:00 I tried closing all other tabs yet it does not automatically redirect me to /auth unless i refresh the whole page. I found a work around by using nextjs client side navigation using useRouter: const router = useRouter() and inside the click signOut().then(() => { router.push("/auth"); // Redirect to the dashboard page after signing out }) . . Hope this help if anyone facing the same issue

[@Mateush444]

I’m not sure how it worked in the video, but you're right. You need to handle the redirect on the frontend because the middleware runs on the server side

[@TrungNguyen-tk6oz]

I know I can use useRouter, but why can antonio's code still redirect without reloading the page? @@'

[@bakedbash]

@@TrungNguyen-tk6oz my good guess is some update in convex library

[@chantalmoreno2190]

Thanks for the help, I fix it

[@pedrojorge2011]

Easter eggs of development kkkk, one place works, in another not... Perhaps different dependencies versions

[@brunoaalexandre]

Amazing 🔥🔥🔥

[@mauwe1152]

One friendly advice: Convex makes things extremely complex, and most of the time implementing a piece of code without even knowing what it does is not educational. Maybe it's just better to use everything separately rather than a development platform.

[@prashlovessamosa]

Thanks Antonio indeed very helpful

[@Miguel_Castaneda]

Let's go! Another great video!

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

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

[@nomadmack]

Grande Antonio!! Grazie mille

[@mkhanyisisimelane3477]

Here we go! 🐐 is back

[@learnanywhere139]

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

[@afaqahmad-ef4ky]

Hey anthonio. You always make premium content for free. Thank you so much and I've a question please do respond.

[@niltonschumacherfilho3368]

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

[@9622AX]

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

[@jonedoe2163]

Thank you Antonio 🎉😊❤

[@Swizzy19891]

Great work!

[@codewithantonio]

Thank you!

[@olowoniyidaniel]

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

[@chema3659]

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

[@fenixx0704]

Hello Antonio! Thank you for your great content ! One question to you , can you also use rutube for uploading your video , cause in some Russian regions KZbin almost stopped working:

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

[@gabrielchima6916]

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

[@elkekegrande4816]

I don't understand you get redirection. In signup or signin, i have to refresh the page, then I'm redirected to homepage.

[@zaizhouhu6483]

i got the same issue

[@hemanthreddy8014]

@@zaizhouhu6483 Did you guys solve it?, I am getting the same issue

[@elkekegrande4816]

@@zaizhouhu6483 I skip at the moment but once i'll do the upgrade to next js 15 I'll try fix it ( without useeffect ? )

[@AjaySharma-qc6mv]

I'm too getting the same issue. I tried modifying the file. It is working fine for me as when I click signout button, it reloads the page and redirects me to auth page. Below is the modified code: "use client"; import { Button } from "@/components/ui/button"; import { useAuthActions } from "@convex-dev/auth/react"; export default function Home() { const { signOut } = useAuthActions(); const handleSignOut = async () => { await signOut(); window.location.reload(); // Force a page reload after signing out }; return ( Logged in! Sign out ); }

[@TrungNguyen-tk6oz]

@@AjaySharma-qc6mv And SignIn or anything else page? Why does code Antonio still run without using window reload or useRouter @@?

[@neonblaze1-c6x]

Great project ❤

[@ashwinshaji2561]

Hey antonio, great project as always🥳. Can I know what browser are you using?

[@fishraider7897]

Antonia, you need to explain how did you figure all this out to build something like this? Like, from design phases to mocking. This stuff is just too long and feel like you just know how to so it from scratch.

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

[@gamingworldsg]

Hi Antonio I have Great idea of a project, based on physiotherapy consultation system to provide proper live exercise session, video call,and the full record of patients,Dr.even share there scheduled there recordesd videos,so please make some things related to this...😊

[@robinsingh5940]

Yeah

[@MrPlaybook]

This guy rocks! True story

[@pedrojorge2011]

Only me with tailwind issues? It seems next, tailwind or shadcn ui update and some things change...

[@codewithantonio]

you're correct. a new breaking change went out. easy fix though: add "./src/features/**/*.{js,ts,jsx,tsx,mdx}" to tailwind.config.ts: content: [ ... "./src/features/**/*.{js,ts,jsx,tsx,mdx}", ], added a pinned comment as well

[@pedrojorge2011]

​@@codewithantonio I ended up finding out. Thanks!! Your content it's amazing.

[@abhishekbaghel1917]

How do you do it man😂😂😂. I'm like 4 clones behind

[@AmirShakeel-kt6jg]

You ARE THE GOAT