antonioerdeljac / next13-discord-clone Goto Github PK

TypeScript 97.81% CSS 0.84% JavaScript 1.35%

next13-discord-clone's Introduction

Fullstack Discord Clone: Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL | Full Course 2023

This is a repository for Fullstack Discord Clone: Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL | Full Course 2023

VIDEO TUTORIAL

Features:

Real-time messaging using Socket.io
Send attachments as messages using UploadThing
Delete & Edit messages in real time for all users
Create Text, Audio and Video call Channels
1:1 conversation between members
1:1 video calls between members
Member management (Kick, Role change Guest / Moderator)
Unique invite link generation & full working invite system
Infinite loading for messages in batches of 10 (tanstack/query)
Server creation and customization
Beautiful UI using TailwindCSS and ShadcnUI
Full responsivity and mobile UI
Light / Dark mode
Websocket fallback: Polling with alerts
ORM using Prisma
MySQL database using Planetscale
Authentication with Clerk

Prerequisites

Node version 18.x.x

Cloning the repository

git clone https://github.com/AntonioErdeljac/next13-discord-clone.git

Install packages

npm i

Setup .env file

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_SIGN_UP_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=


DATABASE_URL=

UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=

LIVEKIT_API_KEY=
LIVEKIT_API_SECRET=
NEXT_PUBLIC_LIVEKIT_URL=

Setup Prisma

Add MySQL Database (I used PlanetScale)

npx prisma generate
npx prisma db push

Start the app

npm run dev

Available commands

Running commands with npm npm run [command]

command	description
`dev`	Starts a development instance of the app

next13-discord-clone's People

Contributors

Stargazers

Watchers

Forkers

kawishali6578 gaedong2 ramirezramirez125 nine-sarayut yasseralsaidi ajlborges julfikar-haidar imlevii moxmoussa kreivc cinemacafe badepojulateef mdraihanhasan darks4ys surajpratap10 mattyleggy markwonder oxiizen idcreativ 93dr02022 sanjai0py bledidalipaj zoli1212 ibrahim-isah uchelikk florian-bloechinger zuzengeek maddyonline hey-hey431 tradingjournalai ihalton ashkanbashiri manavkhadka0 bellatrix01 mungaben deivisonrpg bluntworks pepe004 vbmars tamapratamaongit yxian9 maxcodextc buyonjederrick devcrux giannifed miguelgargallo pushwireco tuliomssantos eatcumin ediigleonardo njihiamark hillarioh linecode ahmedabdelhaleemnoby everbliss7 darupong yash91989201 hachemouanes vseletskyi ssovit dbfl0 aritraop cps-user1 jamshedshoh alfred-a james-fl0 jaimetr mohamedelsabbagh doanhaivu shanatuyaertspxl anthnyrys-dev minhthuong031103 majeed4u trungtaxp boendestodet jamj2000 alex-dev-888 pileskyd malikalrizky destinguarnieri aiwizzard naingoted xd7282 ergaasdev anurag-majumdar fontom71 jeannot75 noblo8 bhalial igejfiijef 5-dee-studios saisawant1 babucarr32 shiftrdw thangstevebh swartex xcuzskillz ryo-s-hub bwigal22116 nhathoagn

next13-discord-clone's Issues

PDF upload throwing an error

PDF upload does not work for me. The upload succeeded, file is uploaded to uploadthing, but I then get routed to the following error, before I had any chance to click Send button in the message file modal:
Unhandled Runtime Error Error: Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref

Does anyone know what to do here?

Nav and Sidebar not rendering after sign in

Server ID Page renders, but the Navigation Sidebar and Server Sidebar are not rendering after signin.
I can refresh and then it all works, but it should work after successful signin.

Anyone else have this problem?

Authentication failed against database server

I put my username and password and its not working (roott is my username) ive also tried root@localhost and its not seeming to work.

datasource db {
provider = "mysql"
url = "mysql://roott:1234@localhost:3306/mydb"
relationMode = "prisma"
}

getting TypeError: Cannot read properties of undefined (reading 'role') on const icon = roleIconMap[member.role]; in server-member.tsx

Here is my code
`"use client";

import { cn } from "@/lib/utils";
import { Member, MemberRole, Profile, Server } from "@prisma/client";
import { ShieldAlert, ShieldCheck } from "lucide-react";
import { useParams, useRouter } from "next/navigation";

interface ServerMemberProps {
member: Member & { profile: Profile };
server: Server;
}

const roleIconMap = {
[MemberRole.GUEST]: null,
[MemberRole.MODERATOR]: (

),
[MemberRole.ADMIN]: ,
};

export const ServerMember = ({ member, server }: ServerMemberProps) => {
const params = useParams();
const router = useRouter();
console.log(roleIconMap[member.role]);

const icon = roleIconMap[member.role];
console.log(icon);

return (

<button
/* className={cn(
"group px-2 py-2 rounded-md flex items gap-x-2 w-full hover:bg-zinc-700/10 dark:hover:bg-zinc-700/50 transition mb-1",
params?.memberId === member.id && "bg-zinc-700/20 dark:bg-zinc-700"
)} */
>
ok

);
};
`

credit card is needed in planetscale

It seems a credit card is needed for create free database in planetscale.As a foreign student，I don‘t have a credit card，would someone help me invite me to thier organization so I can create a free database.It will be very helpful.

Profile Image not loading from Clerk

Google account - Profile image shows in the chat. Other accounts, even with image uploaded in clerk, shows the default image.

Cannot read propertiess of undefined (reading 'bind') at DevServer.handleRequestImpl

This happens when I'm wrapping children inside SocketProvider tag

const RootLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <ClerkProvider>
      <html lang="en">
        <body className={cn(font.className, "bg-white dark:bg-[#313338]")}>
          <ThemeProvider
            attribute="class"
            defaultTheme="system"
            enableSystem
            storageKey="discord-theme"
          >
            <SocketProvider>
              <ModalProvider />
              <QueryProvider>{children}</QueryProvider>
            </SocketProvider>
          </ThemeProvider>
        </body>
      </html>
    </ClerkProvider>
  );
};

export default RootLayout;

How to fix this problem

After signup

After finishing everything you go to sign up Application error: a server-side exception has occurred (see the server logs for more information).
Digest: 4164108920 Im deploying on a live vps using a domain (bloxcreate.com) the page also just stays sitting on that page

Navigation sidebar and Server sidebar not redering after leaving the server or deleteing the server

After I leave a particular server, the page gets refreshed and I get redirected to the "/" page. However, the server sidebar and navigation sidebar are not rendered.

Unhandled Runtime Error : Clerk: auth()

Hi, I'm running into an error that says:
Error: Clerk: auth() was called but it looks like you aren't using authMiddlewarein your middleware file. Please useauthMiddleware and make sure your middleware matcher is configured correctly and it matches this route or page. See https://clerk.com/docs/quickstarts/get-started-with-nextjs

The source is:
const { userId } = auth(); in lib/current-profile.ts (6:25) @ auth. It seems to be a problem only when I paste the invite url in the browser which should leads me to current server site.

Sidebar gone

After I added the ModalProvider tag above {children} in the main layout.tsx the sidebar had disappeared completely. I tried taking the code directly from github for many files, but is it nowhere to be seen even after countless reloads and npm run dev's.

Unauthorized access when click on create button to make new servers

I am getting an error after i click the create button for making new servers, it does not make the new server and gives me unauthorized access - 401 error although i have just logged in using my google account.
my mongodb database and prisma studio both show my profile. attaching code snippets
)

this the error for ref

Sign in and Sign up

absolute path error

Unhandled Runtime Error
Error: destination url or return back url should be an absolute path url!

Naming a channel "General" or "gEneral", etc...

If you create a new channel and name it "General" or anything else (other than "general") , it gets created, but you cannot delete it afterwards. It sends a 500 status response.

What would be a fix for this?

video title: server sidebar - DropdownMenuItem for role MODERATOR not visible

Hi, can anyone help me with this issues, my DropdownMenuItem component only display item for role ADMIN

and this is my code in server-header.tsx
<DropdownMenuContent className="w-56 text-xs font-medium text-black dark:text-neutral-400 space-y-[2px]"> {isModerator && ( <DropdownMenuItem className="text-indigo-600 dark:text-indigo-400 px-3 py-2 text-sm cursor-pointer" > Invite People <UserPlus className="h-4 w-4 ml-auto" /> </DropdownMenuItem> )} {isAdmin && ( <DropdownMenuItem className=" px-3 py-2 text-sm cursor-pointer" > Server Settings <Settings className="h-4 w-4 ml-auto" /> </DropdownMenuItem> )} {isAdmin && ( <DropdownMenuItem className=" px-3 py-2 text-sm cursor-pointer" > Manage Members <Users className="h-4 w-4 ml-auto" /> </DropdownMenuItem> )} {isModerator && ( <DropdownMenuItem className=" px-3 py-2 text-sm cursor-pointer" > Create Channel <PlusCircle className="h-4 w-4 ml-auto" /> </DropdownMenuItem> )} </DropdownMenuContent>

If their is no lastname attached in the google profile, null value is being shown in the application.

Account Name

Chat Section

silently does nothing on create server

Hi, thank you for this great project. I am enjoying getting started with it.
Here is my problem. I set up clerk and the database.

When I try to create a server like this:

It silently does nothing. I don't see any error in the javascript console or in the terminal.

The only error I see anywhere is this but I don't think it is relevant:

How do I find the problem or see the actual error? Thanks.

Server Settings function error

it opens a window with correct data loaded, but when you close the window and click Server Settings again, without refresh the whole page, and data disapears.

it seems data has been reset and not load again.

File title too long - Modal doesn't shorten or wrap

If a upload title is too long, the text should wrap. Text runs off the modal expanding the submit button. Text should wrap or have a max car count that its shortened to.

No validation Message when server image is not added

Validation Message During Server Creation

No validation message is seen during server creation if server image is not uploading.
Gives a buggy feeling if something is wrong with the api calls.

does anyone solved the the error of useinfinitequery hooks and the messages are not showing because of it or there is any other reason? please help

Getting 500 Error while deleting the channels

○ Compiling /api/channels/[channelId]/route ... ✓ Compiled /api/channels/[channelId]/route in 524ms (838 modules) [CHANNEL_ID_DELETE] PrismaClientKnownRequestError: Invalid prisma.server.update()` invocation:

The records for relation ChannelToServer between the Server and Channel models are not connected.
at Cn.handleRequestError (D:\Next JS\discord-clone\node_modules@prisma\client\runtime\library.js:123:6817)
at Cn.handleAndLogRequestError (D:\Next JS\discord-clone\node_modules@prisma\client\runtime\library.js:123:6206)
at Cn.request (D:\Next JS\discord-clone\node_modules@prisma\client\runtime\library.js:123:5926)
at async l (D:\Next JS\discord-clone\node_modules@prisma\client\runtime\library.js:128:9968)
at async DELETE (webpack-internal:///(rsc)/./app/api/channels/[channelId]/route.ts:34:24)
at async D:\Next JS\discord-clone\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:61856 {
code: 'P2017',
clientVersion: '5.5.2',
meta: {
relation_name: 'ChannelToServer',
parent_name: 'Server',
child_name: 'Channel'
}
}
[CHANNEL_ID_DELETE] PrismaClientKnownRequestError:
Invalid prisma.server.update() invocation:

Hydration error

1 of 3 unhandled errors
Next.js is up to date

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching in .

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
button
button
eval
./node_modules/@radix-ui/react-primitive/dist/index.mjs (44:26)
eval
./node_modules/@radix-ui/react-dialog/dist/index.mjs (109:28)
Provider
./node_modules/@radix-ui/react-context/dist/index.mjs (47:28)
$5d3850c4d0b4e6c7$export$3ddf2d174ce01153
./node_modules/@radix-ui/react-dialog/dist/index.mjs (77:28)
div
div
Call Stack
throwOnHydrationMismatch
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (7076:0)
tryToClaimNextHydratableInstance
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (7105:0)
updateHostComponent$1
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (16503:0)
beginWork$1
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (18390:0)
HTMLUnknownElement.callCallback
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (20461:0)
Object.invokeGuardedCallbackImpl
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (20510:0)
invokeGuardedCallback
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (20585:0)
beginWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (26763:0)
performUnitOfWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25587:0)
workLoopConcurrent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25573:0)
renderRootConcurrent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25529:0)
performConcurrentWorkOnRoot
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24382:0)
workLoop
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (261:0)
flushWork
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (230:0)
MessagePort.performWorkUntilDeadline
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (534:0)

Unhandled Runtime Error Error: @clerk/clerk-react: Missing publishableKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys.

I configured everything mentioned in discord-clone tutorial but I got this issue how to fix even I downgrade my clerk package version

Stream Timeout Issue Upon Deployment On Railway.

Deployment issues.

INFO: Clerk: The request to /api/socket/io is being protected (401) because there is no signed-in user, and the path is included in `apiRoutes`. To prevent this behavior, choose one of:

To prevent Clerk authentication from protecting (401) the api route, remove the rule matching "/api/socket/io" from the apiRoutes array passed to authMiddleware.
To make the route accessible to both signed in and signed out users, add "/api/socket/io" to the publicRoutes array passed to authMiddleware.
To prevent Clerk authentication from running at all, pass ignoredRoutes: ["/((?!api|trpc))(_next|.+\..+)(.*)", "/api/socket/io"] to authMiddleware.
Pass a custom afterAuth to authMiddleware, and replace Clerk's default behavior of redirecting unless a route is included in publicRoutes.

Warning.

npm WARN config production Use --omit=dev instead.

Add friend request feature

Error handling for invalid invite code

Hi! First of all, I would like to thank you for your wonderful course.

I found something related to error handling in app/(invite)/(routes)/invite/[inviteCode]/page.tsx.

If I try to access an invalid invite link like http://localhost:3000/invite/invalidInviteCode, the following error occurs.

Unhandled Runtime Error
Error: 
Invalid `prisma.server.update()` invocation:

An operation failed because it depends on one or more records that were required but not found. No 'Server' record (needed to inline the relation on 'Member' record) was found for a nested create on one-to-many relation 'MemberToServer'.

So first, I check if the inviteCode exists in db.server at the if statement breakpoint.
After that, I verified existingInviteCode and solved the problem.

The result code is as follows.

// app/(invite)/(routes)/invite/[inviteCode]/page.tsx

import { redirectToSignIn } from "@clerk/nextjs";
import { redirect } from "next/navigation";

import { db } from "@/lib/db";
import { currentProfile } from "@/lib/current-profile";

interface InviteCodePageProps {
  params: {
    inviteCode: string;
  }
}

const InviteCodePage =  async ({
  params
}: InviteCodePageProps) => {
  const profile = await currentProfile();

  if (!profile) {
    return redirectToSignIn;
  }

  if (!params.inviteCode) {
    return redirect("/");
  }

  // ------------- this part
  const existingInviteCode = await db.server.findUnique({
    where: {
      inviteCode: params.inviteCode,
    }
  })

  if (!existingInviteCode) {
    return (
      <div className="w-full h-full flex items-center justify-center">
        <h2>Invite Invalid</h2>
      </div>
    )
  }
  // -------------

  const existingServer = await db.server.findFirst({
    where: {
      inviteCode: params.inviteCode,
      members: {
        some: {
          profileId: profile.id
        }
      }
    }
  });

  if (existingServer) {
    return redirect(`/servers/${existingServer.id}`);
  }

  const server = await db.server.update({
    where: {
      inviteCode: params.inviteCode,
    },
    data: {
      members: {
        create: [
          {
            profileId: profile.id,
          }
        ]
      }
    }
  });

  if (server) {
    return redirect(`/servers/${server.id}`);
  }

  return null;
}
 
export default InviteCodePage;

I'm still in the process of this discord course, so please let me know if there's anything wrong or dealing with this at the end of the course!