B4J Tutorial [BANanoVueMaterial] MealPrep App


This is a wrap of this github project. For the BANano version, we will demonstrate the following:

1. BANanoPromises
2. BANanoFirestoreDB
3. Routers & Transitions
4. Firestore Auth
5. REST API (Edamam Recipe Database)
6. JSON manipulation
7. Sign In / Sign Up
8. Using V-IF Directive
9. Global Storage using javascript prototype
10. Setting Visibility depending on device break-points
11. Notifications via Snackbars
12. Callback functions
13. Rules

We will break the development of this app per parts. This will be the landing page.



PS: To use the recipe search api, one needs to register.

1. Go to the site, https://www.edamam.com/ and select recipe search
2. Click on sign up and select recipe search api.




3. Finalize the sign up..


  • Once logged in, click Dashboard (top right)
  • Then click Applications and create an application, you will get your API key and password.

Last edited:


Well-Known Member
Licensed User
Why is quality limited to 360? Can you upload a 1080p or better version? I can't read any of the code!

Thank you!


Licensed User
Longtime User
Part 3

In this part we look at the REST API to get recipes per diet plan. Recipes should show each time the "Select Plan" buttons are clicked. As that functionality sits on a component, we create a local method to the component which calls a globally defined sub routine to get the recipes per plan selected.

You need to use your credentials are obtained by following the 1st post.


NB: Created with BANanoVueMaterial BETA 4.39+

NB: Watch in HD


Licensed User
Longtime User
Part 4: MealPrep - Electron Windows Desktop App.

In this part of the tutorial, we explore if we can create an Electron MealPrep Desktop App. We use what we learned in BANanoElectron and then just create a new project and copy all our source code (WITHOUT CHANGES) there. We update the Main > AppStart code to compile the app to Electron. At the end we have a running Windows Desktop App.


Dependency: BANanoElectron

NB: Watch in HD.

This means our app can be released as both an internet based app and a desktop app.

Time to finalize the web version... this is just marking off some todo tests.



Licensed User
Longtime User
Part 5

In this part we extend the menu page and add the meal recipes for each of the available diet plans. We will later see how we can link the recipe ordering functionality to a firebase backend. For each diet plan, we call the rest api to give us the hits found per plan, we then draw these on a grid listing.


NB: Developed with BANanoVuetify 4.40 BETA

Watch in HD


Licensed User
Longtime User
Part 8: Firebase backend to store recipes.


For this part of the tutorial, we will use what we learned here: BANanoFirebaseDB

Mostly, issues that were discussed on the Chat App

Here is a simplified methodology of creating firestore / firebase database.

  • Go to firebase console
  • click add project
  • specify project name > Continue
  • enable / disable google analytics > Continue / create project
  • Your project Is ready > Continue
  • Side Menu > Develop > Authentication
  • Set up sign-in method
  • Sign in method > Email/Password (click edit icon) > Enable > Save

  • Side Menu > Develop > Cloud Firestore
  • Create database
  • Start in test mode > Next
  • Select location > enable
  • Side Menu > Project Overview > Project Settings
  • Your apps > web
  • Enter App NickName > Register App
  • Add Firebase SDK = Connection settings (copy)
  • Continue To console

NB: Watch in HD!

Last edited: