Sopow / next-dashboard-discord

Discord.js + Next.js Bot Dashboard Template

Basic example of a Discord bot dashboard using Next.js. Allows a user to sign in with Discord, select a server they own or can manage, and configure guild-specific bot settings. In addition, the site prompts the user to add the bot to the server if it is not already present.

This project is a monorepo that contains a web app as well as a Discord.js server which are designed to communicate asynchronously through a database.

Built with the Create T3 App stack. Includes a shared Prisma schema between apps.

Dev Setup

1. Fork the repo and clone to your machine
2. Run pnpm install
3. Create a Discord application and retrieve the client id, secret, and bot token
   • Ensure you add OAuth redirects for your environments, both to /api/auth/callback/discord and /guilds
4. Create a instance of your preferred Prisma-supported database and configure both the Prisma schema and database env variable appropriately
5. In packages/database, run pnpm prisma db push and pnpm generate to initialize the database and Prisma client
6. Configure environment variables for both apps, referencing the respective .env.example
7. Run pnpm dev

Deployment

The web dashboard is intended to be deployed on Vercel. If you do not use Vercel to host the web app, ensure you modify getBaseUrl in api.ts appropriately.

The Discord.js server can be hosted on any platform that supports Node apps.