Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/meharsulaiman/discord-clone
Discord but with our own set of tools
https://github.com/meharsulaiman/discord-clone
clerk nextjs prisma reacthookform shadcn-ui socket-io uploadthi zod zustand
Last synced: 3 months ago
JSON representation
Discord but with our own set of tools
- Host: GitHub
- URL: https://github.com/meharsulaiman/discord-clone
- Owner: meharsulaiman
- Created: 2024-09-13T04:59:11.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-17T16:18:26.000Z (4 months ago)
- Last Synced: 2024-09-26T20:02:59.989Z (3 months ago)
- Topics: clerk, nextjs, prisma, reacthookform, shadcn-ui, socket-io, uploadthi, zod, zustand
- Language: TypeScript
- Homepage: https://discord-clone-production-8d41.up.railway.app/
- Size: 853 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Discord Clone
A modern, feature-rich Discord clone built with Next.js, TypeScript, and shadcn/ui components. This project aims to replicate the core functionality and sleek design of Discord while showcasing the power of Next.js and related technologies.
## Features
- Real-time messaging
- Server and channel management
- User authentication with Clerk
- Responsive design
- Dark mode support
- File uploads with uploadthing
- And much more!
## Tech Stack
- [Next.js](https://nextjs.org/)
- [React](https://reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [shadcn/ui](https://ui.shadcn.com/)
- [Prisma](https://www.prisma.io/)
- [Clerk](https://clerk.dev/)
- [Zustand](https://github.com/pmndrs/zustand)
- [Zod](https://github.com/colinhacks/zod)
- [React Hook Form](https://react-hook-form.com/)
- [uploadthing](https://uploadthing.com/)
- [Livekit](https://livekit.io/)
## Database Schema
## Getting Started
### Prerequisites
- Node.js (v14 or later)
- npm or yarn
- A Clerk account for authentication
- A database (e.g., PostgreSQL)
- An uploadthing account for file uploads
### Installation
1. Clone the repository:
```
git clone https://github.com/meharsulaiman/discord-clone.git
cd discord-clone
```
2. Install dependencies:
```
npm install
# or
yarn install
```
3. Set up environment variables:
Create a `.env` file in the root directory and add the necessary environment variables. Use the following `.env.example` as a template:
```
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
DATABASE_URL=""
UPLOADTHING_SECRET=''
UPLOADTHING_APP_ID=''
```
Make sure to fill in the values for each variable:
- Get the Clerk keys from your Clerk dashboard
- Set up your database and add the connection string to `DATABASE_URL`
- Obtain the uploadthing credentials from your uploadthing dashboard
4. Set up the database:
```
npx prisma generate
npx prisma db push
```
5. Run the development server:
```
npm run dev
# or
yarn dev
```
6. Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
## Available Scripts
- `npm run dev` or `yarn dev`: Starts the development server
- `npm run build` or `yarn build`: Builds the app for production
- `npm start` or `yarn start`: Runs the built app in production mode
- `npm run lint` or `yarn lint`: Runs the linter to check for code quality issues
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is open source and available under the [MIT License](LICENSE).
## Acknowledgements
- [Shadcn](https://twitter.com/shadcn) for the amazing shadcn/ui components
- The Next.js team for their fantastic framework
- All the creators and maintainers of the libraries used in this project