Our Story

We started off with one goal—to make the most awesomely useless hack, and the first idea that popped into our heads was Supreme.

The idea is this: Create an app that just says "Supreme". The only other thing you can do is click on the background to change the colour. We finished the final app in 30 minutes.

However, something was lacking, it was cool but not awesome enough, so we brainstormed and thought of another idea: Simple Notes. Simple Notes was aimed at the Most Annoying Hack prize. It is a notes app that does a different action for each key you type. For example, "x" closes the app. Furthermore, it was quite useless as there was no way to store notes either. We finished the app in 2 hours.

James felt that we were more than this, so we brainstormed again and thought of moji moji. The name is just an alliteration of two "emoji"s to make it sound catchy. You can send and collect emojis from your friends. We found it a really cool idea, so we made it. This took us about 8 hours. Since it does not require a backend, we threw it up on Github pages and let it run. It was one of our best hacks, something we enjoyed making and something we are proud of. We hope that you enjoy it too :cool_dude:.

What it does

Gives emojis to your friends through links and receives emojis from your friends through links. Collects a montage of emojis as a social status.

How we built it

Everything was built on React with CSS Modules (with SCSS support).

When a user first visits the site, it saves an "account" into the localStorage of the user. This includes a uuid. The link the user copies when he sends an emoji is made of: url:/#/receive/<sender_uuid> <uuid> <emoji>. When another user receives it, the system checks if: localStorage uuid is equal to <sender_uuid> and is <sender_uuid> <uuid> already redeemed by the current user. If not, it gives the user the emoji and stores the <sender_uuid> <uuid> into the localStorage

Hence, users cannot refresh and receive the same link twice because it will keep a history of previously received emojis and users cannot send themselves emojis because their uuid will be reflected in the sender_uuid.

Challenges we ran into

It was not easy to obfuscate the link system so that users cannot easily change a character and redeem another emoji. Encryption will turn it into some web unsafe goo which will be converted to a long url. Currently, they can only redeem another emoji if they know which characters to tweak, which is good enough.

Another challenge was that people can get deterred by the long urls generated due to the uuids. We though of using hashes but hashes are irreversible.

Accomplishments that we're proud of

This whole system is powered without a backend database (which we know how to do but avoided). Everything is stored on the frontend, locally. The UI is also clean, intuitive and responsive (it works well on mobile!). No CSS or JS frameworks that aided styling and animations (such as JQuery or Bootstrap) were used to make loading speeds fast.

What we learned

Sometimes you don't need a full stack to make awesome things.

What's next for moji-moji

Expanding the avenues for sharing, such as sharing through Whatsapp, Facebook or Twitter. We are also looking at making a mobile port which will make it easier for sharing links due to the integration of other mobile native APIs.

Built With

Share this project: