SNAP Cooking is based on the USDA SNAP program so users know what healthy recipes they can cook in a snap and in a budget.
When the app starts, all the recipes are loaded. The user can scroll to check out all recipes. Unfortunately, the USDA doesn’t currently have images for these recipes. So I had to makeup a placeholder image. At the very top, a filter text box is provided so a user can search by a recipe name s/he already knows or by ingredient that they have based on their SNAP benefits.
Additional options are in a slide-in menu with the hamburger button.
A recipe app can’t be without a ingredients and instructions. Aside from those, the recipe details contains nutritional information and a credit link.
There is a list of SNAP Retailers so that users know which stores take their SNAP card. Users can filter through by zipcode or look at the nearby stores based on their current location. Each location has a map and from the map, the user can get directions.
Users can enter their grocery items in the app and go paperless (all at once)! It offers a checkmark with a strike through. An item can updated or deleted as well.
The app icon took several revisions. Originality was a must. However, Amanda Reichert and I came to an agreement. I had to make a vector icon using Adobe Illustrator that shows healthy ingredients that also shows for ready cooking. Maybe, that will encourage people to think veggies and fruits are normal as opposed to junk food.
The loading image took a little longer. I had to learn how to make fruits and veggies look “chopped”. The angles to place them were even harder.
Some things I learned by making this app
· I had to use MongoDB as the database for the recipe data which was unlike the other Get Healthy Clark County apps.
· At the time of this app’s creation, Ionic had a major improvement on the Ionic Scroll feature.
· I learned to use i18n library for Angular for the Spanish language translation options.
More Tech Details
· This mobile app comes with an internal Admin app (SPA) created using VueJS 2.x with Vuex, Vue-Router, Axios and Bootstrap.
§This app was created for the Get Healthy Clark County Department’s Amanda Reichert at the Southern Nevada Health District, under the supervision of Jason Frame.
±The pictures are taken as screenshots from Simulators, Emulators and/or devices.