MealPro

Showcase
#1

Meet MealPro – a mutli-tenant responsive app built for meal planners.

Made possible by Wappler, a great client and designer.

Meal planners can build/import recipes and deliver them to their users in various meal plans. Ingredients are added to recipes and automatically calculated with nutrition info using external APIs.

The app portion (mealproapp.io) built on node, custom hosting, bs4.

14 day free trial if anybody wants to have a look.

Interesting things with this build:

  • Metric / Imperial conversions in realtime
  • Finding the “best” quantity / unit of measure when making calculations
  • PDF generation using puppeteer / chrome headless
  • Support for wildcard domains and custom white label domains
  • Backend queues to hand-off long running tasks using Bull
  • Zapier triggers and actions
  • Memberpress / Wordpress integration for authentication / authorization
  • Extensive regression tests using Cypress
  • Complex nested datasets
  • Stripe integration for subscriptions
  • Drag / drop using Sortable
  • CSV imports
  • Magic link login

The MVP was built with the support of actual customers and has proven valuable with ~1,500 users across several tenants, so now starting on a mobile app version!

Screen Shot 2021-10-22 at 3.12.43 PM
Screen Shot 2021-10-22 at 3.12.43 PM1198×669 533 KB

Screen Shot 2021-10-22 at 3.20.16 PM
Screen Shot 2021-10-22 at 3.20.16 PM376×796 106 KB

Screen Shot 2021-10-22 at 3.14.48 PM
Screen Shot 2021-10-22 at 3.14.48 PM1184×771 72.9 KB

Screen Shot 2021-10-22 at 3.14.39 PM
Screen Shot 2021-10-22 at 3.14.39 PM811×820 153 KB

Screen Shot 2021-10-22 at 3.13.30 PM
Screen Shot 2021-10-22 at 3.13.30 PM1296×778 162 KB

32 Likes
Examples of apps
#2

Interesting. I’m curious as to how you handled the dynamic sub domains?

Very impressive.

2 Likes
#3

Apache is a proxy in front of the node app, so it has a server alias *.mealproapp.io to allow for the sub-domains. Similarly DNS has a wildcard setup. The tenant is determined by the domain and held as a session throughout the app.

2 Likes
#4

Haven’t tried it yet but it looks gorgeous. Excellent work @mebeingken.

1 Like
#5

Awesome Ken! How did you design the DB for MultiTenant? One database for each account or all in one single DB?

2 Likes
#6

Single DB with tenant_id on all tables. Lots of foreign key fun to enforce integrity/separation. :slight_smile:

6 Likes
#7

Looks great Ken. :+1:t3:

I did not understand anything about the custom domain part. Could you please share about it a bit more?
I have done a similar thing but with Caprover, where the app has a duplicate deployment for each separate subdomain or external domain.

1 Like
Custom domain
#8

Great job, Ken!

1 Like
#9

Excellent work!

1 Like
#10

Love the UI for such a complex set of variables. Could so easily be a mess but its elegant, clear and concise. Great job on the thoughtfulness given to responsiveness. Mighty fine work @mebeingken

2 Likes
#11

Great Job, Ken!
What data schema did you use for making those tables and linking relationships & to create the database queries?

Referring to multiple tables with foreign keys makes me think a relational database like SQL or MySQL would be your choice.

Your knowledge from this Meal planner would be useful to develop a Desktop PC app for Fastfood Restaurants which helps customers make menu choices on a touch screen at the location. Which would generate a printed ticket of the order and cost of the meal while offering a keypad ordering & payment screen & for storing restaurant analysis.

2 Likes
#12

MariaDB for this project and there is simply a tenant table that contains all the tenants. The primary id from that table is required on every other table, and is included in every database action. The value of the tenant id is set once as a session variable and then used in all the db actions.

3 Likes
#13

Yes, both MariaDB and MySQL are relational databases using SQL query syntax. But MariaDB has been updating MySQL deployment especially in mobile app development because MariaDB adds query results caching with Redis, parallel query, read/write splitting and is not constrained by Oracle parameters.

MariaDB and MySQL differences have accelerated in the last 5 years.

What I really find useful when tracking data field changes with MariaDB is that it creates a new record that holds the preceding (older) value before it changed. I used to have to clone a separate table in MySQL with a time of creation field and a new autogenerated key id to link them. Knowing the preceding values & when the value changed and tracking every change by datetime was a necessary requirement for reporting.

MariaDB responded to the request from database developers to eliminate extra queries for such a useful analytic category.

I used to hem & haw over choosing MariaDB over MySQL some years ago but no more.

3 Likes
#14

Very nice!

2 Likes
#15

Great Ken :slight_smile: excellent work… is this done completely using Wappler other than integrations?

2 Likes
#16

Yes, the app, not the marketing site, is done completely in Wappler.

3 Likes
#17

Great work, Ken! :+1:t3:

1 Like
#18

Really good job!!
Need full lessons for making app :slight_smile:

2 Likes
#19

Looks excellent. ( I hope you’ll now have some more time to work on your equally excellent video series.)

#20

Great job, @mebeingken I’m doing something similar but I use aliases (parking domains)

So I can use www.domain.com

1 Like