• 

  The Captcha Page, in all of its glory. You must select the pictures specified at the top (you can do this!).

• 

  Welcome screen for my extension, simply greets the user and prompts them on what they should do.

• 

  Phone number entering page, as I call it. A true marvel of data input design, comes with humorous alert messages as well.

First and foremost, my project is competing under the mental well-being track.

Inspiration Behind Spectacularly Terrible Captchas:

I was inspired by my roommate when developing my hack. He suggested that I create a browser extension that would randomly pop up captchas for users to complete. I took that idea, but limited it to the extension itself, requiring the user to press on it to complete the few tasks inside.

How it Works:

As stated before, this project is a browser extension for Firefox, so it has the ability to be opened up anywhere, so long as the add-on is loaded in. The add-on itself is a simple application requiring users to click buttons with their mouse or entering in data. There are several "pages" that include tasks for users to complete, with these tasks serving nothing more than to waste the user's time due to their intentionally bad design. In addition, some humorous alert messages pop up when attempting to enter in data on each of the pages, for added enjoyment.

How it was Built:

The Firefox extension was developed using Typescript, using React as a framework. I also wrote a CSS file to help free up clutter from my main app file and a JSON file that stores important information information that the browser extension uses to work. Overall, nothing that I was not too unfamiliar with, with the exception of the "manifest.JSON" file.

Challenges I encountered:

When I first decided what I wanted to do for this hackathon, I realized that I was not sure where to begin. I consulted the internet before I found a guide that helped me write my "manifest.JSON" file. Another major issue that I encountered was that the only way for a Firefox browser extension is able to access local files is by user input. One of my functions in my app needed to output random images from a folder located inside of the projects "build" folder. I could not find a way to do this, so I had to hard-code a randomized switch case that would output the random image's URL.

Personal Accomplishments:

To be honest, the greatest personal accomplishment I achieved during this hackathon was actually being able to make a functioning web browser. There were points during my development where I felt like I should give up or accept that my project would not be good enough, but with enough effort and research skills done, I managed to pull through and make a somewhat decent final product. Also, I feel personally accomplished making a React application all on my own, since the only other experience I had with it was editing preexisting components.

What I Learned:

I learned how to make a manifest file that allows the React project to function as a web browser on Firefox. In addition, I learned how state variables function in JavaScript classes, utilizing them to render and unrender certain pages in my extension.

What's next for the Future of Spectacularly Terrible Captchas:

I would love to continue adding more pages to the app, with other types of intentionally bad, laughable "captcha-like" tasks to perform. With that, in addition to possible file restructuring, I think Spectacularly Terrible Captchas is find how it is.

Built With

• css
• html
• javascript
• json
• node.js
• react
• typescript