5. Showcase

Once you join Qreli, we will see 5 apps in your account that will help you learn how to build quickly:

This app combines multiple mini-apps in one. Essentially, we present a menu, and based on the selection, we run that section of the Showcase.

By now, you should be very familiar with how Qreli apps are constructed. This is our Flow:

We start by offering a few choices, then transition/jump to that point in the app.

Calculator

Here, we implement a loan calculator - for more info, check this resource.

We start by asking the audience for the loan amount, interest rate, and loan term in years.

Once we have this input, we define n as the number of months for the term, and i as the interest rate:

Then, we perform the calculations. Note the use of the math library to access more advanced math concepts. Lastly, we find out what was the amount of interest paid on top of the principal:

${loan_amount} * ${V.i} * ${E.Math}{pow((1 + ${V.i}),${V.n})} / (${E.Math}{pow((1 + ${V.i}),${V.n})}  - 1) 

With calculations complete, we show the result:

Parking

Have you been to one of those parking lots that ask that you enter your license plate and how long you wish to park for, then pay for that amount?

This mini app implements that - the front-end, not including the back-end where someone checks every hour if there are any delinquent cars.

To do so, we ask for the license plate using a Text Input control, and embed certain Stripe Pay buttons.

Cats vs Dogs

This shows how to use some free APIs to retrieve and display cats, as well as retrieve and show some dogs.

We use two APIs for this: Cats as a service (https://cataas.com/) and Dog API (https://dog.ceo/api/)

Send an Email (via Gmail)

Once you've authenticated with your Gmail, you can send emails from Qreli. First, complete the authentication in Sources:

Then, we capture from the user the destination, subject, and content, prepare the message, encode it to Base64 as Gmail requires, then send it:

1000 Words

This one is fun. Learn and practice 1000 words in multiple languages.

This app is leveraging an Excel document that looks like this (just the first 25 rows are shown):

We have two main ways to interact with this data: as flashcards, or as a quiz.

For Flashcards, we continually iterate over the Flashcards step, which alternates between showing a card in one language and, once flipped, a card in another language.

Note that we dynamically change the name of the submit button, as well as set the animation type.

The logic is straight forward: we pick a random number 0-999, and prepare prompt as the term to show on one side of the card, and translation on the other side (the from/to lanuages were selected earlier in the flow):

Depending on the value of the flipper variable, we show one side or the other:

The quiz operates similarly, except that we pick 4 random numbers (corresponding to the position of each choice), then create 4 choices A, B, C, D, which we add to a radio control set:

Upon receiving the response, we update the streak and max streak counts, and continue going back to the quiz with the updated streak #, or with the right translation if wrong:

Play Wordle

Worlde is is fun game! You need to add your OpenAI key for this, as OpenAI will come up with the word for us to use. After choosing the board size and word lengh, we ask AI to come up witht an appropriate word. Since it may not, we calculate the length of that word, so we can have it do it again if it's incorrect:

Then, we ask AI to write a code that creates a data matrix based on the # of rows and columns we want, which will represent our board (we'll store here the letters):

In the next step, Play, we'll have AI use this matrix and generate a nice interface for us to use:

We embed the generated code and ask for the guess word to try:

Once the user enters a word, we want to update the data matrix and update the displayed board accordingly — we use AI to write the code for this:

Finally, we keep playing until we win or the # of attempts (board rows) has been reached:

Charts

Genearating charts within Qreli is easy, just ask AI!

After we generate some random data for this sample, we ask AI to generate a table for it:

We also have AI generate a graph of data, of the type requested (bar / pie / line):

Finally, we just embed the generated table and chart, and we're done!