Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sgbj/discord-clone
Discord clone built with React.js, Next.js, Tailwind, Prisma, and MySQL
https://github.com/sgbj/discord-clone
clerk livekit nextjs planetscale prisma railway react shadcn-ui socket-io tailwindcss tanstack-react-query uploadthing zod
Last synced: 8 days ago
JSON representation
Discord clone built with React.js, Next.js, Tailwind, Prisma, and MySQL
- Host: GitHub
- URL: https://github.com/sgbj/discord-clone
- Owner: sgbj
- Created: 2023-09-19T02:22:16.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-27T00:37:48.000Z (about 1 year ago)
- Last Synced: 2023-09-27T08:59:09.091Z (about 1 year ago)
- Topics: clerk, livekit, nextjs, planetscale, prisma, railway, react, shadcn-ui, socket-io, tailwindcss, tanstack-react-query, uploadthing, zod
- Language: TypeScript
- Homepage: https://discord-clone-production-7bb9.up.railway.app
- Size: 232 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Discord Clone
A fullstack Discord clone built with Next.js, React, Tailwind, Socket.IO, Prisma, and MySQL.
## Features
* 🔐 Authentication using Clerk
* 📊 MySQL database with PlanetScale and Prisma ORM
* ✉️ Real-time messaging using Socket.IO with polling as a fallback
* 🔉 Audio and video calls with LiveKit
* 🔃 Infinite scroll for loading messages using @tanstack/react-query
* 🚀 Deployed using Railway
* ⚙️ Create and customize servers and channels
* 📝 Edit and delete messages
* 👨👩👧👦 Invite and manage members
* ✨ Responsive UI and light/dark mode built with Tailwind and shadcn/ui
## Getting Started
### Clone the repo
```bash
git clone https://github.com/sgbj/discord-clone.git
```
### Install dependencies
```bash
npm install
```
### Setup .env file
```env
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
```bash
npx prisma generate
npx prisma db push
```
### Start the app
```bash
npm run dev
```
### Credit
Created by following along with [AntonioErdeljac/next13-discord-clone](https://github.com/AntonioErdeljac/next13-discord-clone).