"What do you want for dinner." The boy asks. "Anything." The girl replies shortly. The boy, as if he's already foresaw the future, signed. Here we go again... "Pizza?" "No." "Pasta?" "No." "Chinese food?" "We had that last week." "Sushi?" "Not feeling it." "Waffles?" And it goes on... Who hasn't been that struggle? It gets even more fun when two people turns into 4, or 6, or 8... To avoid breaking relationships and creating unnecessary stress, we want to create something that can help people narrow down their dinning choices. Nowadays, a simple search on the internet will return hundreds of possible dinning places. With an overwhelming amount of choices, it becomes hard to choose. FoodMe will solve this by presenting restaurant information in a similar way to tinder - shown once at a time, and is forever gone if you swipe left. Don't want to decide for your girlfriend? Download this app and it do the job for you!

What it does

FoodMe gets information of nearby restaurants from famous sites such as Yelp, Google, etc. Users first chooses a cuisine they want, such as Korean or Mexican food. The choices are presented as pictures with a simple cuisine name on the bottom. User will swipe left for no and right for yes. When the user swiped right, the app will display pictures of nearby restaurants serving that cuisine. A picture of a dish from the restaurant is shown along with its basic information such as name, price range, rating. The next restaurant will be displayed until user swipes right, or chooses to go back to cuisines. Specific information about the restaurant will be presented such as links to their facebook, yelp page, location, hours.

How I built it

I built it first as a web application which I plan to integrate into IOS and android later on. I created a simple database of nearby restaurants and saved it in .csv file. I used D3 library in javascript to process the .csv file and store them into appropriate data structures (I used arrays for easy accessibility). I then created the swiping animations and designed the user interface. I connected the javascript functions with the animation and user interface. Lastly, I created a server and uploaded all code on the server, so I can run the application on my phone as web application.

Challenges I ran into

The biggest challenge I ran into was combing animation and javascript functions. I didn't have knowledge of animation, so I looked briefly online for animation tutorials and choose a simple one. However, the animation needed several

and swaps between those s that contains the pictures, while javascript function resets the background image of a single . My animation and javascript function did not align with each other so I had to redo my logics. Also, most of our team weren't experienced in web development so it was really hard to divide tasks.

Accomplishments that I'm proud of

Although I'm far from what I've imagined I might have made for the past 36 hours, I'm very proud of the product of I made. I learned so much about linking html with javascript and briefly stepped into the field of animation. I was never competent in web development because I've always had trouble with html and jquery. However, with the help of mentors and teammates, I gained more experienced using them and became a lot more familiar with front end development. Overall, I'm very proud of the functionality of the app and the animation.

What I learned

I learned a lot of new ways to debug a web application, adopting a project to both IOS and android phone, became more comfortable with HTML and CSS and learned jQuery. I've learned so much from mentors and peers, from not giving up to enjoy coding. I'm very thankful of this experience.

What's next for FoodMe

There's so much more to FoodMe. I want to adopt machine learning to learn each users habits to show their most interested cuisines and filter restaurants based on every users preferences. For instance, some care more about rating, some about price, some about distance, etc. Connecting this app with yelp and other food recommendation places to provide reviews from multiple sources. Adopt google map feature for convenience. Most importantly, we will focus on narrowing down dinning choices for users.

Share this project: