Eat-moji

Inspiration

During HackGT, there was a workshop on "A Crash Course to Hackathons" where the person leading the workshop showed everybody one of his early hacks. It was something he made with Ruby, the Google Places API, and Twilio where you text a number what you were looking for in a certain place and you would receive a text back with all the information you wanted. After seeing that, I wanted to make something similar, where you would tap/click an Emoji on some user interface, and you would receive local information based on that Emoji. After failing to implement it during HackGT, I thought I'd try it again here at HackRiddle.

What it does

As mentioned earlier, there is a user interface filled with a multitude of Emoji buttons. Each button has an id, and by clicking each one, a version of the Yelp API retrieves data about that id in the local area, and stores the data in an array. The program then retrieves the first 3 elements of this array, which are the 3 top-rated establishments of that certain term, and then outputs them for the reader.

For example, clicking the burger Emoji in Daytona Beach, FL will output "The best 3 areas for burgers are Ocean Deck, Smoke Shack BBQ, and Daytona Taproom."

How I built it

The front-end was built using HTML and CSS and the Bootstrap framework. The images used were taken from emojipedia.org, which has nearly every emoji variant ranging from their appearances on Apple, to Google, to Twitter. Each Emoji is a button, each with a unique ID based on what the Emojis represent.

The back-end was built using JavaScript, namely JQuery. JQuery handled the click event handler, which is the main event in the application. I also included a variation of the Yelp API (a simpler, more user-friendly version), provided by one of the HackRiddle mentors, which was used for collecting the necessary data.

Challenges I ran into

I had never developed any kind of web application before. The extent of my programming experience had been class projects primarily done through the console, so taking on something entirely new was definitely a challenge. I had to learn the basics of HTML, CSS and how the Bootstrap framework worked. What was most challenging was implementing the JavaScript elements. Again, I had never worked on a web application, so figuring out how to connect the front-end and the back-end together was challenging. I also initially wanted to use the Google Places API, and the standard Yelp API, but there was a lot of difficulty in getting the right permissions. Fortunately, through it all, I had a great mentor help push me in the right direction every time I needed help.

Accomplishments that I'm proud of

I'm proud of myself for making my very first full web-application. I had never used any of these technologies before, so I was initially doubtful that I would be able to create something in the 24 hours provided. However, I was able to learn enough of the basics to put together something I'm really proud of. I'm particularly proud of myself for figuring out how to merge the JavaScript back-end and the HTML/CSS front-end.

What I learned

I learned the very basics of web application development (HTML, CSS, JavaScript), something I had been interested in since I became a Computer Science student. I learned how to work with a framework (BootStrap), how to merge front-end and back-end together, and how to use an API. Not bad for a noob.

What's next for Eat-moji

I'd love to flesh it out and make a lot more polished. In the future, I'd love to make it an actual website with lots of pretty colors and effects. I'd also like to provide more detailed information beyond the name of the establishments. And, if I learn graphic design, I'd like to replace the Emojis with my own artwork. Overall though, I'm happy with this start.