hacklarious-project (TootUrSelf)

Having fun building something random

Comment

Inspiration

We really just wanted to build something fun, we chose to do something a bit silly and a bit random: random noises! Of course, that's a bit too simple, so we connected to other APIs and made a Discord Bot

What it does

Our front end system has a login system and can sync random noises between different web clients. The frontend webpage also has a live-chat feature than inserts random emojis and makes all the text look funny. There is a random meme generated for each message sent through the live chat, as well as a random Pokemon. We also have a Discord bot that sends the messages from the live chat into a Discord text channel. You can also respond to those messages and they will appear in the live chat. If you join the voice channel with the bot in it, the noises from the website will also be streamed in the channel.

How we built it

Our project uses a number of technologies:

  • Firebase Authentication (to authenticate users who use the system)
  • Firestore ((a) to sync messages in the live chat to all listening clients, and (b) to ensure clients know when other clients play audio files so that they can play them as well)
  • Google Cloud Storage & Firebase Storage (to store and access the audio files being played on the web and streamed in the Discord channel)
  • Discord.js & the Discord API (to create a Discord bot [with FFmpeg for audio support])
  • Google App Engine (to host the website component of the project).
  • Google Compute Engine (to host the Discord bot in an environment that supports FFmpeg and Node)
  • a Meme API (by R3l3ntl3ss, https://github.com/R3l3ntl3ss/Meme_Api) (To get random memes to display for each message send)
  • maybe not an API, but the HTTP Cat image set (https://http.cat/) to generate HTTP cat memes
  • Pokemon API (https://pokeapi.co) (to display random Pokemon for each message sent)
  • Bootstrap Framework (makes design a lot easier if we don't know design)

Challenges we ran into

For starters, we wanted to sync live audio between different clients, but we didn't know of any software that could that (and still don't). Firestore and other databases store text files, not live audio streams. Luckily, the audio clips were short relatively short, and we created a solution to store the name of the file being played in Firestore (a live database), and then access those files from Google Cloud Storage. While doing this, we also noticed that we had almost maxed out on reads for the day. Turns out, our queries were querying all the audio files ever played (even though we made sure not to play old files) each time a tab opened. We fixed this by adding a short delete statement after a few seconds so that other clients wouldn't accidentally read the document.

We also had (and are still having) issues with streaming multiple audio sources to a Discord vioce channel. Unlike the web javascript environment (where we can just stack playing sounds together and overlap them), Discord only lets you stream one source, and we could not find any third-party software to do so. We settled with just cutting off playing audio files and playing the new ones for now, and will work on a fix in the future.

Another small issue we encountered was that if you try to break up an emoji string into characters (using "strings".split(""); (I promise I tried adding emojis here in the string, but DevPost wouldn't allow me to :joy:) (to, for example, randomize the font, color, or size for each character), you get weird Unicode symbols (which are not emojis). Not a problem when together (as together they make the emoji), but if each of those characters has their own font style or color, then you get two (or more) separate characters. We were able to solve this by adding a check to only change the font if the character was alphanumeric.

Accomplishments that we're proud of

We finished nearly all of our objects when we set out to this project. We added live sound effects, a live chat, and we connected it with Discord. We used a number of platforms, and we got [new experience or improved skills] in using various platforms, including GCP and Firebase products, as well as using the Discord API. We used a ride range of platforms across GCP and built our fully functioning website and bot.

What we learned

Although we didn't build a practical app, we practiced working with a number of platforms & services, as well as APIs. APIs are useful to gather specific information, and knowing how to use them can be very important. We both learned how to work with Google Cloud Storage & Firebase Storage to upload and request files from GCS buckets. For me, I finally learned how to play audio streams through Discord.

Future plans

This app isn't a practical use app and doesn't hold the key to solving a major problem in our communities. But, we still had a lot of fun building the project. We may or may not choose to continue working on the project (we may, but likely minor things, which will be listed below this paragraph), but we will likely continue to reference back to the work we've done to build the kind of projects that can solve community problems, as we worked on a number of useful products: Firebase, GCP, APIs, Discord Bots, collaborative coding [using Git]. So most likely, we won't have future plans, but here are some areas for improvement that we may decide to work on:

  • The design isn't very mobile-friendly. In fact, it's barely desktop friendly, only some window sizes work, so we could in the future utilize bootstrap more effectively to ensure a mobile-first design (that hopefully works with everything else as well).
  • We used Firestore for a lot of things, and had we been given more time, we could have learned to use other platforms as an alternative to learn them, such as replacing the chat with a MongoDB database or utilizing Pub/Sub to send messages back and forth from Discord.

Built With

Share this project:

Updates