Building a Discord Clone using Next.js, TailwindCSS, Clerk, and Stream

🔗 Links
Github Project:

Stream on X:

Stream on LinkedIn:

Used technologies:
-----------------------------

TailwindCSS:

Clerk:

Stream Chat SDK:

Stream Audio and Video SDK:

Stream Chat React:

Stream Video React:

Helpful Guides:
------------------------

What is React Context:

React Context in NextJS:

Heroicons:

⏱️ Timestamps
00:00:00 Demo
00:01:02 Intro & Tech-Stack
00:05:10 Project Setup
00:10:20 Authentication with Clerk
00:21:56 Stream Setup
01:13:45 Discord Context
01:20:40 Server List
02:02:16 Creating a Server
03:27:55 Channel List
04:41:20 Creating a Channel
05:01:00 Message List
05:43:52 Audio Channels & Video Calls
06:32:59 Summary

#nextjs #tailwindcss #clerk #getstreamio #discord

[earnstein]

I can't begin to thank you for how important this project is to me and the start up I am working for, we choose to use stream as our SDK for our chat feature and I've been having a lot of issues. I'm super excited that this was released by stream themselves ❤

[jamoni]

export default clerkMiddleware((auth, req) => {
if (!auth().userId) {
return auth().redirectToSignIn();
}
});

export const config = {
// The following matcher runs middleware on all routes
// except static assets.
matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

[hybrid]

Very interesting, the security level? is it safe?

[rexyrex]

Hello Stefan / Stream Developers, really enjoyed your tutorial guide and learnt a lot. I would love to see a continuation on this project like a part 2 or 3 if needed and build upon the initial app to add further more features and understand the scalability aspect. features like upload an image or file, send voice msg along with text instead of calls being the only way to send voice. Maybe expand other features that offline msgs, archiving etc etc etc... i mean the list can go on and on but i would really love to see a continuation to build upon this awesome guide... Thnx

[x_kirito_x]

wow the explaination is crazy.. just found you and im glad i did, but im not seeing any other clone projects or complicated project. are u planning to make new ones...

[natab]

Could you do a video building an online tutoring or appointment booking platform like preply or classgap? Thanks!!

[singhsu]

Please update it as authentication not working properly and showing both secret and user token not set.

[vitu]

Hello, I'm facing a problem similar to the one that appeared at 01:04:50 where my HomeState is not receiving data, I've already done the same thing that appeared in the video, but nothing still appears, would there be a way to solve this problem?

[Raghav_Bajpai_]

I have trouble turning the documentation into code. How can I overcome this problem?

[SoumyaranjanBehera-nh]

where is the source code of the video ?

[rythianenderborn]

Is this any different from Code With Antonio's app?

[selk]

what if we trying to make it cross-platform, mobile and desktop?

[peterabouabsi]

Can you do other tech than nextjs. We got frustrated like there is no tech than next. Or mention that your services are fucked up

[Raghav_Bajpai_]

@streamdevelopers thnx for this Amazing project for free..

Sir Plzz Make a Real-time chat app project by explaining it step by step. This way, I'll also get an idea of how to create own side projects by reading documentation.

[rorozoro]

Hi, can you please help me with something, this is the first time that I'm using clerk, and in your authentication with clerk part it, authMiddleWare doesn't seem to work for me, any solution?

[AminRaziVulu]

How much will it cost if you have 100 active users talking for hours? Sounds like 30, 000$….

[DudeFrom]

I wonder if the AuthKit library for Next.js wouldn't be a good solution and alternative to Clerk authentication ?

[jorgeveega]

clerk sucks, good luck if you deploy to production

[MahmutAyabakan]

Thompson Mary Allen Mary Thomas Sandra

[CoIdestMoments]

it's stupid to use clerk in a project like this, it's a tool to fast forward development in a production project. In a project like this well the goal is teaching, you should 100% use a classic auth so that students learn the complex road of creating and managing authing without relying on an external service that you can install and setup in 5min tops and do everything for you. It's like teaching people how to buy a wordpress theme.