No video :(

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

Подписаться 7 тыс.

Просмотров 14 тыс.

50% 1

📹 Video SDK: gstrm.io/video-docs-yt
💬 Chat SDK: gstrm.io/chat-docs-yt
Learn how to build your dream product with the example of cloning the Discord Application. We're using a state-of-the-art tech stack with Next.js, TailwindCSS, Clerk for Authentication, Stream Chat for chat functionality, and Stream Video for audio channels and video calling.
🔗 Links
Github Project:
github.com/GetStream/discord-...
Stream on X:
/ getstream_io
Stream on LinkedIn:
/ getstream
Used technologies:
-----------------------------
Next.js:
nextjs.org
TailwindCSS:
tailwindcss.com
Clerk:
clerk.com
Stream Chat SDK:
getstream.io/chat/sdk/
Stream Audio and Video SDK:
getstream.io/video/sdk/
Stream Chat React:
getstream.io/chat/docs/sdk/re...
Stream Video React:
getstream.io/video/docs/react/
Helpful Guides:
------------------------
Next.js Installation Guide:
nextjs.org/docs/getting-start...
What is React Context:
react.dev/learn/passing-data-...
React Context in NextJS:
vercel.com/guides/react-conte...
Heroicons:
heroicons.com
⏱️ 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

Опубликовано:

12 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 32

@rexyrex536 4 часа назад

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

@earnstein7607 3 месяца назад

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 ❤

@streamdevelopers 3 месяца назад

Glad to hear that this is useful to you! 💙 If there's anymore questions left, please let us know!

@jasonbrody539 Месяц назад

@@streamdevelopers bro your code is not working its not up to date. only ui is visible application is not working at all you have posted all wrong code on github please fix it asap

@jamoni2410 3 месяца назад

You can set up the middleware like this incase you are using the latest version of clerk; import { clerkMiddleware } from "@clerk/nextjs/server"; 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)(.*)"], };

@agtech3768 5 дней назад

Thank you bro.

@thegooseisblue 8 дней назад

How would you go about adding usage monitoring? I am trying to build a similiar app, but designed specifically for event translation and interpreting. (for conferences, schools, churches, etc.) The problem I have ran into, is I am not sure how to use Stream's API to track a customer's usage, so they can be billed accordingly.

@natab282 27 дней назад

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

@vitu3765 2 месяца назад

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_ 3 месяца назад

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

@selk2000 3 месяца назад

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

@singhsu6122 3 месяца назад

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

@streamdevelopers 2 месяца назад

Could you be more specific when this error appears? The secret should be located in your .env file. The user token is generated inside the /token route using a POST request.

@jasonbrody539 Месяц назад

@@streamdevelopers having same issue i have created this issue on your github with same project repository i have shared screenshot of the error.

@Raghav_Bajpai_ 3 месяца назад

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

@DudeFrom1972 3 месяца назад

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

@streamdevelopers 2 месяца назад

We haven't worked with this library before, but there are a lot of alternatives for Clerk authentication. Let us know if you're tried to build the project with AuthKit, we'd love to know how it went! :)

@peterabouabsi8427 3 месяца назад

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

@rythianenderborn5185 2 месяца назад

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

@streamdevelopers 2 месяца назад

Hey! Yes, this is different to Code with Antonio's app. The tech stack varies quite a bit since we're using Clerk for Authentication and Stream's Chat and Video SDKs. Antonio does a lot more manual setup with his own database solution using tools like PlanetScale, Prisma, and Socket.io. It's two different approaches to solving the challenge of building a complex tool like Discord. Have you seen both videos? Which style would you prefer for building an app like this?

@rorozoro513 3 месяца назад

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?

@therongovender9471 3 месяца назад

you need to update this to use clerkMiddleware import { clerkMiddleware } from "@clerk/nextjs/server"; export default clerkMiddleware(); export const config = { matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'], };

@rorozoro513 3 месяца назад

@@therongovender9471 Thankyou so much ♥

@singhsu6122 3 месяца назад

@@therongovender9471 @clerk/nextjs/server"' has no exported member named 'clerkMiddleware'. Did you mean 'WithClerkMiddleware'? This is showing can you help me to fix it?

@singhsu6122 3 месяца назад

@@therongovender9471 This error isshowing import error: 'clerkMiddleware' is not exported from '@clerk/nextjs/server'. Can you help me to remove this bug

@CyranicalGoated 3 месяца назад

Can you deploy this on Vercel?

@streamdevelopers 3 месяца назад

Yes! Project can be easily deployed and hosted on Vercel!

@CyranicalGoated 3 месяца назад

@@streamdevelopers for free credits right?

@nilabjodey4620 3 месяца назад

@@CyranicalGoated Yes

@jorgeveega 3 месяца назад

you can not, when you deploy to production the clerk auth wont work

@CoIdestMoments 3 месяца назад

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.

@jorgeveega 3 месяца назад

clerk sucks, good luck if you deploy to production