Feed Me

ABOUT

    PERSONAL PROJECT

    In Progress
    OCT 2015

    Angular.js application created to help users in any US city find new restaurants through a roulette feature. This application draws restaraunt data using Google Places API. Frontend was built using Foundation and jQuery for the card swiping UI.

PROCESS

Research

    PHASE 1

    Feed Me originally began years ago as a project for my group of friends. Whenever it came time to get dinner none of us could agree on one location, much less remember the places we liked. Using HTML, CSS and vanilla javascript I created the first version of the app. I compiled a list of our favorite locations and wrote some basic code to randomize the order they were presented.

Planning

    Phase 2

    While the initial build served its simple purpose I decided to utilize this project as a learning experience. After several tutorials in Ember.js, Angularjs and Backbone.js I decided to go with Angular.

    • Access to large restaurant database either Yelp or Google
    • Ability for users to add restrictions ie Open Now, Distance, Zipcode
    • Swiping capability for restaurant list, similar to Tinder
    • Easy to use interface
    • Intriguing branding

Coding

    Phase 3

    Being new to Angular I decided to tackle the code first. Initially working with Yelp's API, I ran into issues with a lack of available data. I decided to then switch to Google Places API. This presented its own issues in Angular. Google Place API will throw CORS (cross-origin HTTP request) error, preventing data from being sent. The short list of issues I overcame:

    • Switching to Google Maps Javascript API for JSON data by modifying existing module from GitHub
    • In order for users to input location I need to convert Zip Codes to LAT,LONG using Geocode API
    • Create custom search feature that automatically converts zipcode after user stops typing
    • Passing variables to API calls from user frontend
    • In Progress: Pass Place_ID from Google Maps Javascript API into a Google Places Detaisl request for users to see more information about a restaraunt such as Phone Number.

    See the Pen dYjKQK by Oyin (@oyina) on CodePen.

Design

    Phase 4

    My branding goal is to create a fun game like atmosphere for an otherwise tedious process. Color wise I decided to use a pastel pink color to define the app character.

    The use of swiping based method allows low commitment to a restaraunts information. This allows a user to quickly go through the options without being overwhelmed decision wise.

Stay Tuned

    Summary

    This is an in progress work. If you'd like to know more about my plans or process please use the contact form below.

CONTACT

Please use the form below or designsbyoyin@gmail.com