Task: Discord Bot Application with .

NET Backend and React Frontend

1. Response from Vikash -

I will be using React frontend and ASP.NET Core backend for the Discord Bot task but
we can also use Node.js and Express. The MongoDB with Mongoose database will be
preferred. The React UI will assist me for the bot configuration.
2. Machine / Environment /Application settings key steps-
First of all, I will be setting up the discord bot by installing dependencies.

• Add the bot to Discord server and obtain the bot token.
• Discord.Net library to connect the bot to Discord and handle commands.

The code will be as below –

private DiscordSocketClient _client;

private CommandService _commands;

public async Task StartAsync()

{
_client = new DiscordSocketClient();
_commands = new CommandService();

_client.Log += LogAsync;
_commands.CommandExecuted += CommandExecutedAsync;

await _commands.AddModulesAsync(Assembly.GetEntryAssembly(), null);

string token = "YOUR_DISCORD_BOT_TOKEN";

await _client.LoginAsync(TokenType.Bot, token);
await _client.StartAsync();
await Task.Delay(-1);
}
private Task LogAsync(LogMessage log)
{
Console.WriteLine(log.Message);
return Task.CompletedTask;
}
private async Task CommandExecutedAsync(Optional<CommandInfo> command,
ICommandContext context, IResult result)
{
if (!command.IsSpecified || result.IsSuccess)
return;
await context.Channel.SendMessageAsync($"Command execution failed: {result}");

In ASP.NET Core API project -

 • I will add necessary NuGet package
• Configuration of SQLite as the Database
• Then I will be Creating the ‘Timer’ Model and Database Context
•

Implementation of the Endpoint to Save Timer Information

• We will need to create a ‘controllers’ folder and add ‘TimersController.cs’

private readonly IBlockedUserService _blockedUserService;

public BlockedUsersController(IBlockedUserService blockedUserService)

{
_blockedUserService = blockedUserService;
}

GET and POST

public IActionResult GetBlockedUsers()

{
var blockedUsers = _blockedUserService.GetBlockedUsers();
return Ok(blockedUsers);
}
public IActionResult BlockUser([FromBody] BlockedUserModel model)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
var result = _blockedUserService.BlockUser(model.UserId);
if (!result.Success)
{
return BadRequest(result.Message);
}
return Ok(result.Data);
}

Another Option I can Installing Node.js, then Initialize Node.js project to create a ‘package.json’ file,
and Install Dependencies, I will follow below -

npm init -y
npm install discord.js dotenv axios mongoose express.
b. Then I will Create ‘.env’ file and for the this file I will use
• DISCORD_TOKEN,
• MONGO_URI,
• API_KEY
c. Then I will create ‘bot.js’ for that I will be setting up
• MongoDB setup
• Define schemas and models
• Middleware code part
 • Routes
• Discord Bot functionality
3. In the case where the back end is not combined with ‘bot.js’ then I will setup ‘server.js’. To
create ‘server.js’ I will need to follow some basic steps in the codding –
• Middleware code part
• Define a simple schema and model
4. To Invite my bot to my discord server –
• In the OAuth2 Tab I will generate Generate an Invite Link from OAuth2 URL
Generator.
• the generated URL will be copied and and pasted it into my browser to invite the bot
to the server.

5. After setting up‘server.js’ the next step will be - React UI for the, Create React App and for that I
will be using some basic code matrix -
npx create-react-app bot-config-ui
cd bot-config-ui
npm install axios
npm start

Note –

• State management libraries like Redux or React Context API will helpful for managing global
application state, especially when dealing with complex state interactions or sharing data
across components.
• I will create services to encapsulate business logic and API interactions. Services handle data
fetching, processing, and updating state.
• For the centralize error handling we can use try/catch blocks or interceptors (in Axios) for API
requests. Display meaningful error messages to users.

post that I need to modify the “src/App.js”

User Requirements - I want it to respond with PONG when I say PING in the channel.
This requirement will be fulfilled under - Discord Bot functionality, I will follow below coding-

client.once('ready', () =>{
console.log('Bot is ready!');
});
client.on('messageCreate', async (message) => {
if (message.author.bot) return;
const user = await User.findOne({ userId: message.author.id });
if (user && user.blocked) {
return message.channel.send('You are blocked from using this
bot.');
}
if (message.content === 'PING') {
message.channel.send('PONG');
}
User Requirements - I want to be able to set a timer and have the bot let me know when the
time is up.
 if (message.content.startsWith('!timer')) {
const args = message.content.split(' ');
const time = parseInt(args[1], 10);
if (isNaN(time)) {
return message.channel.send('Please provide a valid
number of seconds.');
}
message.channel.send(`Timer set for ${time} seconds.`);
setTimeout(() => {
message.channel.send(`Time's up, {message.author}!`);
}, time * 1000);
} if (message.content.startsWith('!fetch')) {
const response = await
axios.get(`https://**********?api_key=${process.env.API_KEY}`;
const fetchedData = response.data;
message.channel.send(`Fetched Data:${fetchedData}`);
} });
client.login(process.env.DISCORD_TOKEN);

User Requirements - I want to be able to stop certain users in my channel from using the
bot, I’d like to beable to block these users without typing in the channel itself (privacy
concerns)
This requirement will be fulfilled under-Defining schemas and models –
const Schema = mongoose.Schema;
const UserSchema = new Schema({
userId: String,
blocked: { type: Boolean, default: false }
});
const UserModel = mongoose.model('User', UserSchema);
Under the Middleware -
app.use(express.json());
Under Routes -
app.get('/users', async (req, res) => {
const users = await UserModel.find();
res.json(users);
});
app.post('/block-user', async (req, res) => {
const { userId } = req.body;\
await UserModel.updateOne({ userId }, { blocked: true }, { upsert:
true });
res.json({ message: 'User blocked' });
});
app.post('/unblock-user', async (req, res) => {
const { userId } = req.body;
await UserModel.updateOne({ userId }, { blocked: false }, { upsert:
true });
res.json({ message: 'User unblocked' });
});
app.listen(process.env.PORT, () => {
console.log(`Server running on port ${process.env.PORT}`);
 under Discord Bot functionality -
client.once('ready', () => {
console.log('Bot is ready!');
});
client.on('messageCreate', async (message) => {
if (message.author.bot) return;
const user = await UserModel.findOne({ userId:
message.author.id });
if (user && user.blocked) {
return message.channel.send('You are blocked from using this
bot.');
}

Implementation of errors handling and validation in both React frontend and .NET backend ensures
robustness and improves user experience by providing meaningful feedback when errors occur.
Customize error messages and handling logic based on my application's requirements and expected
user interactions. This approach will helps in debugging, maintaining, and scaling your application
effectively. Below key note I will prefer

• Handle errors from API requests in React using try/catch or. catch() methods.
• Display validation errors to users in React based on form input.
• Use global exception handling and validation attributes in ASP.NET Core to manage
errors and ensure data integrity.
• Return structured error responses with appropriate HTTP status codes for better client-
side error handling.