Plenty O' Phish

Inspiration

We thought a lot about the theme of this year's hackathon: Unity and Togetherness. What better unites people than a common enemy? Something so vile that strikes at the hearts of each and every one of us, something that can be universally criticized. What could it be?

Well, that's spam email.

We dreamed up a game about spam e-mail, but it's no fun to receive, so we made a game about being the sender.

What it does

Plenty O' Phish puts you in the seat of the spammer, composing finely crafted phishing emails to lure in a target to give you their data. You play the game through a faux e-mail client that we created, which we thought fit well with the theme.

How we built it

The game is built with React and Redux, completely statically generated (it's singleplayer, after all), which allows our hosting to be easy. We serve the static files using GitHub pages, which you can access at https://www.plentyophish.tech/play (registered with Domain.com, of course)

Challenges we ran into

We ran into many technical issues, but what was surprisingly difficult was just designing a game that was (we hoped) fun to play. We surmounted these challenges over hours of rigorous whiteboard scrambling and a heap of dreamt up mechanics (we were going to include an entire news system that dynamically responded to your phishing efforts)

The tech proved challenging, too. We started from a basic React-Redux-Typescript template generated from CreateReactApp, and were immediately faced with a slate of wide-ranging architecture decisions. We didn't even have a concrete idea of what systems and mechanics that would be in place in the next 24 hours, what could be cut and was necessary. We knew that bad architecture decisions in hour 1 could be cause for a re-write the following 2am crunch session.

Quickly, we settled on making everything in the game an e-mail. The game is played entirely in the faux e-mail client, and every piece of game UI is served as an e-mail. This architecture allowed for some flexibility in what we could implement and cut, because we weren't depending on a system which may need to be cut later, we knew e-mail was going to be the core of the UI and structure.

But we also needed to structure our data, deciding what to store in the Redux store and writing idiomatic reducers and defining patterns to update and read the data.

By Sunday morning, these architecture decisions were finalized, and with all the core systems in place, having created all of the components that we would later build our game on, we made our content push, filling in characters and different types of phishing attacks, modifiers to your spam and algorithms to evaluate them all, carrying with it no shortage of recurring game design decisions.

By 11am on Sunday, we had finished, made a final build, pushed to GitHub, and started writing this very README.

Accomplishments that we're proud of

Predominantly, we're proud to have shipped. We went into the event with a comically overscoped project (what better hallmark of first time hackathon goers could you imagine), but were overjoyed to come out with a finished and respectable subset of the features we had conjured up.

What we learned

Why not hear from each of us?

Aaron

I had 'worked' with React before, but the extent of my experience was copy/pasting a component and tweaking some aspects. I was happy to start with a React codebase from scratch, and learn to make architecture decisions about how to broadly structure and separate different sections of the application, and specific techniques for writing components (and navigating shared-state nightmares). It was gratifying to learn the below-the-surface features of React (I didn't even know what a hook was! We used dozens) during this hackathon

Kendall

I have been a backend engineer for most of my time in Computer Science, so this was my first time doing anything really serious in WebDev. It was really fun to create an app from the ground up and learn about how React bundles components to create a finished and clean web app, along with creating clean web pages and managing state client-side with Redux. It was overall a very fun step outside of my comfort zone.

Matt

I was hesitant to learn web dev at first, but over the course of this hackathon, I feel that I gained a TON of real experience using HTML, CSS, React, Javascript, Typescript, and various cloud sources (mainly GitHub Pages and domain.com). I started with 0 experience and now I feel far more comfortable working with anything based in web frameworks!