"What should I eat?" "Save your time with Shekit when you can't decide what to eat!"
Personal Project | Dec 2016
Mobile Development | UX Design
Shekit is an app that randomly recommends a close-by restaurant by one simple gesture of shaking a mobile phone. It was created for the people who can't easily decide what to eat like me. The app uses specifically food location data from Foursquare API and bases on the GPS. Once the users shake their mobile phone, small balls representing food venues bounce around the phone screen and when one venue ball hits the exact center of the phone screen, it pops up to show the detailed information about the venue. All the venue information data used are open source data from Foursquare API: name, cuisine, category, rating, distance, address, phone number. Simple and fun to use. Just shake it!
User Flow / UI Design
Step 1 : Shake
Like shooting stars in universe, venues bounce around the edges, and play sound when they hit the edges.
Step 2 : Explode
If one venue hits the exact center of the phone screen, it explodes into particles.
Step 3: Boom!
Exploded venue’s detailed information pops up: Name (Chipotle), Cuisine (Mexican), Category (restaurant), Rating (5 star), Distance (far), Address and Phone number.
Applying attraction and repulsion to the balls to try out different animation!
App Demo from Different Locations
Below are screenshots of some code which I think is the main part of the front-end development; I retrieved data from Foursquare API, displayed the data and implemented some animations.
HTML - index.html
Load screens as blocks when the device is ready
Made variables for Foursquare API URL including first default part with api key and query; I put ITP latitude and longitude as default coordinates
Loaded all the media files
Set position coordinates as latitude and longitude
Got JSON data from foursquare api using URL that includes position coordinates
Got place data and sorted by food (restaurant), cafe, and nightlife (bar)
Got all the data needed: name, categories, checkins counts, distance, address, phone number
Limited to 30 venues
Ball object has all the variables and functions needed to place, move and turn venue balls, and retrieve data from Foursquare API
this.move and this.turn functions make the balls bounce around inside a screen when I shake the mobile device
this.display function determines size and compositions of all the displayed data and images
Venue balls explode either when I click one ball or when I shake the mobile device and one ball hits the center of the screen
Add map feature when clicking on the venue ball
Change background based on time (daytime / nighttime)
Incorporate machine learning to increase chance of previously selected restaurants
Add reservation / transportation feature
Implement social platform