The Fresh Food Finder is an open source mobile application built using PhoneGap (Apache Cordova) that helps users locate local farmers markets that are registered with the FDA. You can search for specific markets, or find the closest markets to your current location. Check out the video below to see it in action:
In fact, the Fresh Food Finder made it all the way up to #18 in the iPad “Lifestyle” category on iTunes in the first week of its release, and even made one of the featured apps in the Lifestyle category:
The top request that I’ve received for the Fresh Food Finder is improved data, with market schedules. I’ve heard everyone loud and clear, and am happy to say that I have some improved data on the way (including schedules and times), so keep an eye out for it in the not-to-distant future.
The Fresh Food Finder can be downloaded today in the following markets:
- iTunes: http://itunes.apple.com/us/app/fresh-food-finder/id524261275?mt=8
- Google Play: https://play.google.com/store/apps/details?id=com.tricedesigns.FreshFood&hl=en
- Amazon Market: http://www.amazon.com/Andrew-Trice-Fresh-Food-Finder/dp/B0089FRKCY
- Windows Marketplace (pending approval)
The Fresh Food Finder uses the following technologies:
- PhoneGap: http://www.phonegap.com – PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores.
- Mustache: https://github.com/janl/mustache.js – Mustache is a logic-less template syntax. It can be used for HTML, config files, source code – anything. It works by expanding tags in a template using values provided in a hash or object.
The code is organized into the following structure:
- assets – This folder contains fonts, images, and CSS styles used within the application.
- views – This folder contains UI/Mustache templates. Each template is within a separate HTML file.
When the application loads, all templates are loaded into memory as part of the bootstrapping/startup process. Once all the data and templates are loaded into memory, the UI is presented to the user. The majority of the application logic is inside application.js, all views are rendered from the Mustache templates inside of viewAssembler.js, and all UI styling is applied via CSS within styles.css.
Mustache is a templating framework that enables you to easily separate presentation layer (HTML structure) from application logic and the data model. Basically, you create templates that Mustache will parse and convert into HTML strings based upon the data that gets passed in. I’ll write another post later about Mustache, but it can be extremely useful for larger applications.