Discord Bot Integration with Supabase and Next.js

This project involves creating a Discord bot that listens for message reactions, extracts specific data from the messages, and sends this data to a Next.js API. The Next.js API processes the received data and stores it in a Supabase database. This setup showcases a full-stack integration involving a Discord bot, a Next.js API, and a Supabase database.

Key Features

• Real-time Data Extraction: The Discord bot listens for message reactions in real-time and extracts specific data from the messages.
• API Integration: The extracted data is sent to a Next.js API for processing and storage.
• Database Storage: The Next.js API stores the data in a Supabase database for persistence.
• Error Handling: Comprehensive error handling ensures the system is robust and can handle various error scenarios.
• CORS Security: CORS is configured to restrict access to the API route to specific origins, enhancing security.

Technologies Used

• Node.js
• discord.js
• Next.js
• Supabase
• axios

Project Components and Implementation

1. Discord Bot

Objective: Create a Discord bot that listens for message reactions and sends the extracted data to a Next.js API.

Technologies Used: Node.js, discord.js, axios

Implementation Steps:

• Set Up the Discord Bot: Created a bot on the Discord Developer Portal and obtained the bot token. Used the discord.js library to interact with the Discord API.
• Bot Functionality: Initialized the bot with necessary intents to listen for message reactions. Extracted the content between ** and the user ID between <@> from the message. Extracted any attachment URLs from the message. Sent this data to the Next.js API using axios.

2. Next.js API

Objective: Create an API endpoint in Next.js to receive data from the Discord bot and store it in a Supabase database.

Technologies Used: Next.js, Supabase

Implementation Steps:

• Set Up the Next.js API Route: Created an API route in the Next.js application to handle POST requests.
• Processing the Data: Extracted the data sent by the Discord bot from the request body. Validated the data to ensure all necessary fields were present. Used the Supabase client to insert the data into a Supabase table.
• Error Handling and CORS: Implemented error handling to manage different types of errors, such as invalid input data and database insertion errors. Set up CORS to restrict access to the API route to specific origins.

3. Supabase

Objective: Store the data sent by the Discord bot.

Technologies Used: Supabase

Implementation Steps:

• Set Up Supabase: Created a new project in Supabase and set up a database table to store the data. Configured the Supabase client in the Next.js API to interact with the database.
• Database Interaction: Inserted the received data into the Supabase table using the Supabase client.