This app was built to introduce developers to full-stack development in relation to Discord bots. The API, bot, and dashboard can be worked on independently as separate projects, so each one of them has its own README. You don't have to worry about any interlinked types, or dependencies.
Before starting, make sure you have the following setup:
- Node.js
- npm
- A MongoDB instance (could be local or using atlas)
- A Redis instance (could be local or using a service like upstash)
- A Discord application
The API is the core of the stack and is responsible for handling requests from both the dashboard and the bot. In this example setup, we'll assume the URL of the API is http://localhost:3000.
The API primarily uses:
- Express for the server
- MongoDB for the database
- Mongoose to interact with MongoDB
- Redis for caching
- ioredis to interact with Redis
- Axios for HTTP requests
- JWT for authentication cookies
- TypeScript for type safety
To setup the API, continue reading the API README.
The bot only handles a handful of tasks (such as listening to events), and most of the heavy lifting is handled by the API.
The bot uses:
- Discord.js to interact with Discord
- CommandKit to handle commands and events
- Axios for HTTP requests
- TypeScript for type safety
To setup the bot, continue reading the Bot README.
The dashboard is the main way for server managers to configure the behavior of the bot. In this example setup, we'll assume the URL of the dashboard is http://localhost:3001.
The dashboard uses:
- React for the frontend
- Vite for the build tool
- Tailwind CSS for styling
- DaisyUI for the UI components
- Axios for HTTP requests
- TanStack Query for stateful data fetching
- Jotai for state management
- React Router for routing
- React Toastify for notifications
- TypeScript for type safety
To setup the dashboard, continue reading the Dashboard README.
I didn't use Next.js for this project because I wanted to avoid the constant breaking changes that it's known for, as well as the fact I wanted to show how React behaves at its core.