Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nayak-nirmalya/discord-clone

FullStack Discord Clone: Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL & TypeScript.
https://github.com/nayak-nirmalya/discord-clone

mysql nextjs13 planetscale prisma reactjs socket-io tailwindcss typescript

Last synced: 11 days ago
JSON representation

FullStack Discord Clone: Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL & TypeScript.

Host: GitHub
URL: https://github.com/nayak-nirmalya/discord-clone
Owner: nayak-nirmalya
Created: 2023-08-28T15:25:01.000Z (over 1 year ago)
Default Branch: master
Last Pushed: 2023-09-12T03:50:14.000Z (over 1 year ago)
Last Synced: 2024-11-21T20:30:29.256Z (2 months ago)
Topics: mysql, nextjs13, planetscale, prisma, reactjs, socket-io, tailwindcss, typescript
Language: TypeScript
Homepage: https://discord-clone-nirmalya.up.railway.app/
Size: 338 KB
Stars: 14
Watchers: 1
Forks: 19
Open Issues: 1
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# FullStack Discord Clone: Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL & TypeScript.

Credits: [Antonio Erdeljac](https://github.com/AntonioErdeljac)

Features:

- Client form validation and handling using react-hook-form
- POST, DELETE, and GET routes in route handlers (app/api & pages)
- 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

```shell
git clone https://github.com/nayak-nirmalya/discord-clone.git
```

### Install packages

```shell
npm install
```

### Setup .env file

```js
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 (PlanetScale)

```shell
npx prisma generate
npx prisma db push
```

### Start the app

```shell
npm run dev
```

## Available commands

Running commands with npm `npm run [command]`