initial commit ⭐

Author: notunderctrl

README.md

@@ -0,0 +1,62 @@
+# Welcomer Bot
+
+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
+
+## API
+
+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](https://expressjs.com/) for the server
+- [MongoDB](https://www.mongodb.com/) for the database
+- [Mongoose](https://mongoosejs.com/) to interact with MongoDB
+- [Redis](https://redis.io/) for caching
+- [ioredis](https://github.com/redis/ioredis) to interact with Redis
+- [Axios](https://axios-http.com/) for HTTP requests
+- [JWT](https://jwt.io/) for authentication cookies
+- [TypeScript](https://www.typescriptlang.org/) for type safety
+
+To setup the API, continue reading the [API README](./api/README.md).
+
+## Bot
+
+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](https://discord.js.org/) to interact with Discord
+- [CommandKit](https://commandkit.js.org/) to handle commands and events
+- [Axios](https://axios-http.com/) for HTTP requests
+- [TypeScript](https://www.typescriptlang.org/) for type safety
+
+To setup the bot, continue reading the [Bot README](./bot/README.md).
+
+## Dashboard
+
+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](https://reactjs.org/) for the frontend
+- [Vite](https://vitejs.dev/) for the build tool
+- [Tailwind CSS](https://tailwindcss.com/) for styling
+- [DaisyUI](https://daisyui.com/) for the UI components
+- [Axios](https://axios-http.com/) for HTTP requests
+- [TanStack Query](https://tanstack.com/query) for stateful data fetching
+- [Jotai](https://jotai.org/) for state management
+- [React Router](https://reactrouter.com/) for routing
+- [React Toastify](https://github.com/fkhadra/react-toastify) for notifications
+- [TypeScript](https://www.typescriptlang.org/) for type safety
+
+To setup the dashboard, continue reading the [Dashboard README](./dashboard/README.md).
+
+> 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.

api/.env.example

@@ -0,0 +1,13 @@
+PORT=
+
+API_URL=
+DASHBOARD_URL=
+
+JWT_SECRET=
+
+MONGODB_URI=
+REDIS_URI=
+
+DISCORD_CLIENT_ID=
+DISCORD_CLIENT_SECRET=
+DISCORD_BOT_TOKEN=

api/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.env
+.DS_Store

api/README.md

@@ -0,0 +1,27 @@
+# API
+
+To setup the API, cd into this directory and run `npm install`.
+
+Once your dependencies are installed, you can setup your environment variables.
+
+1. Create a `.env` file in this directory
+2. Copy the contents of `.env.example` into the `.env` file
+3. Replace the placeholders with your own values
+
+Here's an example `.env` file:
+
+```
+PORT=3000
+
+API_URL=http://localhost:3000
+DASHBOARD_URL=http://localhost:3001
+
+JWT_SECRET=a_RaNdoM_sEcReT
+
+MONGODB_URI=mongodb://localhost:27017/welcomer-bot
+REDIS_URI=redis://localhost:6379
+
+DISCORD_CLIENT_ID=1234567890987654321
+DISCORD_CLIENT_SECRET=m7u79832y4kljhsdf
+DISCORD_BOT_TOKEN=MTIzdfjhdsfkljsldkfj.orh234kmhsf.sod87fnoijwne4kl-pwo7ebrkljsbhdfhkjbsdkf
+```