LNCH is a food randomizer web application built on Meteor.JS and using the Google Maps JS API, and designed to be very simple to use. Current design uses Alvaro Trigo's fullPage.js framework.
Ever wondered where you'd want to go for lunch on your break or when friends are asking you out? Leave the decision making to this application - simply set a general food genre and maximum distance from your location, and it will pick a place for you.
LNCH has only two main parameters that users must provide: a food genre (barbecue, sushi, etc.) and a set maximum radius from the current current location. The app then "randomly" picks an eatery based on those criteria, and you can either navigate to it or reroll for a different place.
Should one decide on a place to eat, pressing on the LNCH! button launches either the Google Maps application if installed on the phone, or a new tab on the browser with the correct Google Maps coordinates.
And since LNCH is location dependent, it is required for the user to provide it location permissions in order to determine his/her location.
###Search Results Section
- Adjusting the map view upon orientation change or window resize is still janky; the current algorithm tries to pan and zoom out the map when start and end markers get overlapped by UI elements or go out of the viewport, and it's still imperfect - see the current calculateOffset() function for this.
- UI elements not adjusting according to mobile device orientation, must be something with the CSS media queries.
- Images loading on the splash page take a while to load due to resolution, causing the transition between images disconnected; may need to implement something like lazy loading.
- Some UI designs not fully fleshed out or look bad on mobile, such as modal popups and slide animations.
- May need to implement image results for the selected eateries, still not sure where to place them on the viewport.
Been a while since I've posted updates, I'll have to be more consistent in announcing new features/fixes. Anyway, as of this date I've been implementing some updates to the application. Some of those are:
- The JavaScript files now use ES6/ES2015 syntax such as block level variables and arrow functions
- Orientation calculation has been improved, now works more consistently for mobile devices
- Some UI quirks like popup modals have been improved and hopefully fixed
I've decided against adding another UI element, which is the image for the resulting establishment. It will take too much space in the viewport and will be especially cramped on mobile.
Orientation calculation, while improved, is still imperfect so I haven't checked the task off the list for now. Might need a complete rewrite to finally make it work.
It's not perfect, and hasn't been tested too frequently. If you have some suggestions/bugs, just let me know! I appreciate the feedback!