Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/exprays/yarn
A Full-Stack messaging platform with real-time messaging, audio-video channels and emoji support
https://github.com/exprays/yarn
aiven-cloud livekit nextjs14 prisma socketio typescript zod
Last synced: about 1 month ago
JSON representation
A Full-Stack messaging platform with real-time messaging, audio-video channels and emoji support
- Host: GitHub
- URL: https://github.com/exprays/yarn
- Owner: exprays
- Created: 2024-03-07T10:25:54.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-08-04T06:30:39.000Z (5 months ago)
- Last Synced: 2024-08-04T07:35:30.057Z (5 months ago)
- Topics: aiven-cloud, livekit, nextjs14, prisma, socketio, typescript, zod
- Language: TypeScript
- Homepage: https://yarn.thestarsociety.tech
- Size: 4.39 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A Full-stack OpenSource Discord clone built using NextJS 14! This is the project which I built to learn WebSockets and how it is used in a real world application.
> [!WARNING]
> As it is deployed on vercel which is a serverless deployment platform sockets may or may not work due to the time limit o the function execution. But still the messaging will work due to polling.
## Features
- Light/dark mode toggle
- Authentication
- Realtime Text, Audio & Video chats
- Emoji support
- Channels (Discord like)
- Send attachments as messages
- 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
- Responsive web design
- Websocket fallback (Polling with indicators)
## Tech Stack
- **Next.js:** React framework for server-side rendering and static site generation.
- **React:** Library for building user interfaces with a component-based approach.
- **TypeScript:** Typed superset of JavaScript for better code quality and development experience.
- **LiveKit:** Real-time webRTC based audio and video communications.
- **TanStack Query:** Powerful data fetching and state management for React.
- **Zod:** TypeScript-first schema declaration and validation library.
- **Zustand:** Small, fast, and scalable state management for React.
- **Uploadthing:** Simple file upload solution for web applications.
- **Tailwind CSS:** Utility-first CSS framework for rapid UI development.
- **React Hook Form:** Performant, flexible, and extensible forms with easy-to-use validation.
- **Socket.io:** Real-time, bidirectional communication between clients and servers.
- **Prisma:** Next-generation ORM for Node.js and TypeScript.
- **Aiven:** MySQL database hosting
       
## Run Locally
Clone the project
```bash
git clone https://github.com/fxso/Harmony.git
```
Go to the project directory
```bash
cd Harmony
```
Install dependencies
```bash
npm install
```
Start the development server
```bash
npm run dev
```
## Environment Variables
To run this project, you will need to add the following environment variables to your .env file
`NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=`
`CLERK_SECRET_KEY=`
`NEXT_PUBLIC_CLERK_SIGN_IN_URL=/secure/sign-in`
`NEXT_PUBLIC_CLERK_SIGN_UP_URL=/secure/sign-up`
`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=`
After deploying add another variable:
`NEXT_PUBLIC_SITE_URL= Your deployment URL`
## Deployment
To deploy this project to vercel,
- Install vercel CLI
```bash
npm install -g vercel
```
- **Add a deploy script to package.json:** In your package.json, add a script to deploy your project. Here is an example of how you can do this:
```bash
{
"name": "your-project-name",
"version": "1.0.0",
"scripts": {
"deploy": "vercel --prod"
}
}
```
- **Deploy the project:** Now, you can deploy your project to Vercel by running the following command in your terminal:
```bash
npm run deploy
```
### Info!
Please note that Vercel does not support WebSockets due to the time limit in edge function execution. So this project will work on polling on vercel due to absence of websockets. If you want to use the WebSockets feature then you can deploy it on AWS etc. or managed servers like Render.com or fly.io!
## Support
For support, email [email protected] or join our Discord channel.
## License
[MIT](https://choosealicense.com/licenses/mit/)
## Feedback
If you have any feedback, please reach out at @rayxdev on x.com