frogspawn

Inspiration

We were inspired to make this bot because we are all friends who use Discord often, and we love frogs! Once we saw the "environmental hack" challenge, Kapila suggested that we make a bot that helps raise money for conservation and raises awareness about endangered frog species.

What it does

The main function of the bot is to gamble for different frogs. When you're done gambling, there's a page that links to different donation pages to help endangered frogs. And just for fun, the bot will react with a frog emoji everytime the user types the word frog.

How we built it

Bot The work was divided up amongst two groups, one for the bot and site. This group already has discord.js experience so, using that and their previous project as a base, the frog bot was created.

Site The other group focused on creating the site that gives an overview of the bot and the link to add said bot to your own server. Designing the site first began on Figma then trying to export that into code form. From there, everything was coded through VS Code.

Challenges we ran into

Bot While the bot itself was working fine, Replit was giving us a hard time since it was how much cpu processing power the bot gets. Moreover, it cannot host the bot consistently without paying for it’s service. Therefore, it was difficult near the end to determine whether there was an error in the code or Replit was limiting the bot.

Site While this wasn’t our first time with HTML, some of us we’re not as experienced as the others, so working on it was a learning process. The most difficult part was when Figma was exporting and it used React, something that was completely new. None of us knew how to use React so we just used the exported code as a template and reference using a plugin.

Accomplishments that we're proud of

Working discord bot with decent interaction and commands! Also a really pretty website with nice front-end for our first time coding, honestly.

What we learned

Bot Besides human errors, there’s a lot of things we covered! We learned about proper user experience and design even if we weren’t able to implement it ourselves perfectly by making a website. We also enhanced our back-end experience while making the bot – discord.js is tricky! We learned that good and comprehensive documentation is at the core of any new technology.

Site Bootstrap is very useful for making sections in your website, especially for resizing itself for different windows. It allows for flexibility and accessibility on different viewports – really important in an age where mobile device usage will nearly exceed desktop usage.

What's next for frogspawn

There were some reach goals that were not achieved during our 24 hours of coding, such as wanting to ‘collect’ different frogs and showcasing them in another embedded message. I would also like to make it more responsive and interactive, because that would increase engagement and help users retain more information.

Built With

• discord
• discord.js
• figma
• github
• javascript
• node.js
• repl.it