100 Memez

When D​iscord isn't the best platform for memes voting, you make your own!

Not all projects need to be super serious, and this was no exception - a fullstack web application that mirrors image posts in a Discord channel, adding the ability to vote and sort them accordingly!

Data Collection

First was collecting all the data to be used - while I would love to say I wrote a bot that did this, the thing with bots is that they need to be added to the server, and no self-respecting server is adding random bots to it's server - so instead I wrote a Playwright script that would scrape the channel's messages, creating database entries for each one + it's author.

While thankfully not my first Playwright script, it did take a bit of testing to get the login state to persist accordingly - eventually ending up with a manually-login-once-and-then-let-the-cookies-do-the-rest approach, which has worked up until this point perfectly fine.

The actual scraping of data is actually easier then most because once one nagivates to the channel, since Discord is written in React, I could directly access the __reactProps$ property of any element, and traverse this to get the messages that have image attachments/embeds, then further traverse the props to get the full author information.

After this the only thing left to do was to add the data to the database, and keep on scrolling the channel until I reached the top.

Discord OAuth

The next feature was allowing those from the server to join the site, and vote on the posts accordingly - in addition to keeping anybody who isn't from the server from logging in at all.

Thankfully the Discord OAuth flow allows access to the user's joined guilds, made simpler by passport-discord, I only needed to ask for the guilds scope and profile.guilds was populated for me.

From there I just needed to check if the user's guilds included #100Devs, and if so, allow them to login, otherwise deny them with a little message.

CRUD

The rest was common CRUD functionality, allowing users to view the feed of posts - sortable by created date, or by vote count - allowing them to vote on posts, and view the profile page of individual users - which shows only their posts.

Future

On a more serious note, this is effectifly an application that allows for external voting and sorting of discord messages in a single channel (that have images), which could be useful for other servers and more serious channels as well - so the next steps involve making it more customizable and usable for other servers.