How we run hackathons inside Discord at Autocode
Tags: hackathon, discord, devrel, tutorial
Published: 2023-07-26 15:51:05

Over at [Autocode](https://autocode.com), we make it really easy to build APIs and Discord bots. We’ve found a lot of success in running hackathons focused on our Discord community. Historically, we’ve been able to use these hackathons to build awareness of new APIs on our platform, quickly find bugs in existing APIs, and build up a library of content that new users can reference. Today, I’m going to show you how we run our hackathons inside Discord, and how you can add the tools we built to your Discord server so you can too!
## How we run hackathons
We run a Discord server with over 30,000 members, most of which are Discord bot builders or another type of developer. We were looking for ways to engage with this audience to improve activity within our Discord server, and found that running hackathons inside our Discord server was a great first step to connect with them.

Back when we built our hackathon system, we wanted a lightweight submission system that didn’t require any additional account creation. We also wanted to ensure that our participants were able to spend most of their time building their project, rather than focusing on writing really long and in-depth descriptions for their submission page. Therefore, we built a system that focuses on driving engagement inside Discord while also allowing us to set up new hackathons in minutes to respond to the needs of our community.


![Users are instantly recognised for their submissions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r297mqwnhndb9jn77259.png)

When users submit to one of our hackathons, we automatically send a public message to our Discord server. This helps recognise the people who are submitting, create a conversation point, and encourages others to submit to gain the same recognition. We do, however, keep the contents of each project secret (except for the winners), allowing individual community members to decide whether they’d like to share their creation with others, or if they’re more comfortable with keeping it private. This helps us build a more inclusive community, and lowers the perceived barrier to entry for new participants.

Additionally, participants receive an icon next to their name until the start of the next hackathon, helping them gain social proof and recognition within the Autocode community. We display this icon by adding a Discord role to the user upon submission.

**Now you understand why we built this system, I’ll show you how to add it to your Discord server.**

## Setting up your submission system

### What you will need
To follow this guide, you’ll need a couple of things:
- An [Autocode account](https://autocode.com)
- A [Tally account](https://tally.so/signup)
- A Discord server that you have admin access to. This is the server that your hackathon will run inside.
    - A channel inside that Discord server for your hackathon. This is where submission notifications will be sent. We recommend making this channel public.
    - A role setup on that Discord server which will be automatically awarded to hackathon entrants. The role does not require any specific permissions.

Once you’ve got all of these things, you’re ready to add our hackathon submission system to your Discord server!

### Setting up your Autocode project
Head over to our [Hackathon Submission System for Discord template’s page on Autocode](https://autocode.com/jacklynbiggin/templates/hackathon-submissions/) and click the green **Install** button.


![Click the green install button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyqcxtrm40ica6wszucg.png)

When prompted, give your project a name, then click **Next**.


![Set your project's name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4eyt53ugjeklyyle1t3l.png)

You’ll now need to link your Discord bot account to this template. If you’ve built your own Discord bot before, you can link your existing bot’s account. If not, Autocode will guide you through how to set one up - it only takes a few minutes.

Click the blue **Link resource** button and follow the instructions onscreen to create and link a Discord bot account. Once your account is linked, click **Continue**.


![Link your Discord bot to Autocode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ij3g7bxu838cd3k0sn7x.png)

You’ll then be prompted for your Discord channel ID, role ID and guild ID. You can obtain these by [enabling Discord developer mode](https://www.youtube.com/watch?v=FmeQte6S7D8), right clicking your server’s name (in the top left corner of Discord), a channel (in Discord’s sidebar), or a role (in the Discord server settings panel), and clicking **Copy ID**.

You can also add a share link. After submitting, participants will be asked if they’d like to share the hackathon on social media. If they choose to, this is the link that will be shared. We recommend linking to a blog post announcing your hackathon, rather than a post inside a Discord server to maximize your number of potential participants.

Once you’ve set all these values, click *Install Now**. Autocode will then install your project and take you to the Autocode editor.


![Set your environment variables then click install](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhn1ey93g9d3n6gjmnhd.png)

From Autocode’s editor, you can modify all the code that powers this submission system, allowing you to build a truly bespoke experience for your community. However, we’ll focus on using the pre-existing code in this guide

To send data from Tally to Autocode, we’ll use Tally’s webhooks feature. To get the URL that we’ll send data to, open the `functions/addRole.js` file, and copy the URL at the bottom of the editor. Keep it safe - you’ll need it shortly!


![Keep your endpoint URL safe, you'll need it later](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jf7bufj8bd45atrc55b.png)

Awesome, your Autocode project is all set up and ready to go! Now let’s set up our submission form on Tally.

### Setting up your Tally form
Head over to our [Hackathon Submission Template page on Tally](https://tally.so/templates/autocode-challenge-submission-template/mYj1N3) and click the **Use this template** button.


![Use this tally template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ru9p4xigw16i02v63fvt.png)

Modify the template to contain your required questions, but make sure you don’t change the first question, otherwise our system won’t work as intended. You can change, add, or delete any other questions.

Once your form is setup, delete the setup instructions at the top of the page, then click **Publish**.


![Setup your Tally form, then publish it](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30gpr9ti47m3x92zp5lp.png)

Time to link our form to our Autocode project! Open the **Integrations** on the page that appeared when you published your project, then click the **Connect** button for the Webhooks integration.


![Connect a new webhook integration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84y5b9kgi0lvka5rs484.png)

Page in the endpoint URL you copied earlier, then click **Connect**.


![Paste in your addRole endpoint URL, then save](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zkwtrixw2cqpdlk3h87o.png)

**Optional:** By default, Tally will display a basic “thank you” screen once a user submits their project. If you’d like to use our custom page, open the **Settings** tab, enable *Redirect on completion*, and paste in the URL of the `www/thanks.html` file in your Autocode project. Then click **Save changes**.


![Add a custom thanks screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngq2ty8dc2vf6eoayaxk.png)

Congratulations! Your submission system is set up and ready to go! Now let’s test it out.
### Testing your submission system
Head over to the published version of your Tally form - you can find its URL in the **Share** tab on Tally. Fill out the form, and submit it. Then, head over to Discord.

You should see a message thanking you for your submission, and you’ll also have gained a fancy new role saying that you entered this hackathon. If so, your hackathon submission system is working and ready to go!


![Hopefully you see a thank you message like this](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80spu72q9w1d0qnaelf3.png)

Once you’re ready to judge your hackathon, simply export the data in Tally as a Google Sheet (or whatever other format you prefer), and take a look at your projects! Once you’ve judged your projects, announce your winners however you wish. When we declare our winners, we manually award them a custom Discord role to recognise them.

### Frequently asked questions
- Couldn’t anyone technically submit on behalf of anyone else if they knew their Discord ID?
    - Yes. Discord user IDs are public information. However, in our 30,000+ member community, we’ve never had a problem with people doing this, so haven’t added a system to prevent this. It would be fairly trivial to rework the /whatsmyid command to generate a unique key for the user which they’d input into the Tally form, and then validate that key in the `functions/addRole.js` file, if this concerns you.
- How customizable is this system?
    - You have full access to all the code that runs this submission system. You can edit everything - the messages shown when someone submits, what the thank you page looks like, and even add entirely new logic to hook into your own community tools! Autocode will also host the code 24/7, so you don’t need to worry about deployments or version control.
- Is this the exact same system that Autocode uses to run Community Challenges?
    - It almost is! The core logic in this template is identical to what Autocode uses. The main thing that is removed from this template is our custom metrics and tracking system, but you could integrate your own! 

I hope that this submission system helps you grow your community, and keep existing members engaged! If you have any questions, feel free to [ask them in Autocode’s Discord server](https://discord.gg/autocode) where we’ll be happy to help!