Diagrammatically understanding a full-stack WIX application

Hello Everyone,

I created a diagram to showcase two common use cases in Wix that require custom code.

1. Querying and showing collection content on dynamic pages.

2. Showing third-party API content on web pages using Wix.

I hope the following diagram is useful in understanding how the process works in Wix Studio.

Using this diagram, you can understand the following steps.

The form flow is as follows:

1. Create a form and connect it with a collection using a dataset.

2. After a few submissions, you can create a backend file (for example, form.web.js) to retrieve the collection and filter it. For example, all the rows that contain a keyword. Then return it.

3. Create a frontend file, to call the backend function (frontend.js) and update the elements on the web page.

Showing third-party API content is as follows:

1. Obtain a third-party API key and store it on Secret Manager.

2. Call the API from the backend file (for example, apihandler.web.js) and return the relevant data for the frontend to consume.

3. The frontend file (for example, frontend.js) receives the data and shows it to on the web page.