Live at https://discord-clone-production-80db.up.railway.app/. Please do not Ddos my free tiers 🙏

This is a Next.js project bootstrapped with create-next-app.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Clerk for authorization and user management.

Prisma database toolkit for easier management.

Using Neon DB Postgress database service free tier.

Uploadthing way to add file uploads to fullstack TypeScript app.

Livekit for realtime streaming service.

Zod TypeScript-first schema validation with static type inference and easy-to-use forms validation zodResolver from hookform/resolvers.

Zustand client-side simplified state-management.

tanstack/react-query server-side data state management.

Tailwind CSS styling and shadcn/ui UI copy-paste library for generating and extending UI components. Based on radix-ui primitives design system.

lucide-react icon library.

Emoji Mart emoji picker component.

WebSockets server and SocketIO for enabling easier communication between client and server.

• CRUD for discord Server, Channel, Messages and Roles management.
• Audio and Video feature with Livekit.
• In-chat emojies.
• Responsive template layouts and Dark mode.
• Attachements sending.
• Server-side state data syncronization, caching, and infinite messages scrolling with react query.
• Postgres DB with Prisma ORM.
• Authentication with Clerk.
• Real-time updates for messages using websockets.

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Install new UI library components from shadcn-ui:

npx shadcn-ui@latest add <component-name>

Run these 2 commands every time schema.prisma is modified.

Generate schema to add it to the node modules to develop with it:

npx prisma generate

Create the collections in database:

npx prisma db push

To re-migrate and reset all of database data:

npx prisma migrate reset

After re-migrate you need to run generate and push again.

Manipulate data in all of Prisma projects with Prisma Studio:

npx prisma studio

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.