Flutter

Build Investie the stock trading application using Lemon.markets, Twilio and DhiWise within 2 hours.

30

Saved hours

$900

Saved money

Investie is a trading application that uses lemon.markets for trading the stock on paper mode to learn. Once the user gets comfortable with the paper mode then he can shift to live by replacing the APIs of paper mode to trade API. Investie allows to explore and choose stocks from the huge list of stocks. Users can buy any stock from the list according to its tradable status. Upon buying any stock, Investie will inform the buyer by SMS. Moreover, using Investie developers can track their purchased orders. It provides a graphical as well as list representation of the purchased stocks. So, it benefits the user to track orders on monthly basis.

Investie also allows users to have a look at their account details to check their account balance and other details.

The Challenge

While trading there are multiple general problems that users face:

Choosing the right platform.
Accurate live information.
Less knowledge of trading.
Lack of trading and investing strategies.
Money and Risk Management
Trading plans
Track the purchased stock

The Solution

To solve this problem, Investie was built using DhiWise and the open APIs of lemon.markets. To add the feature of SMS into Investie, Twilio’s SMS API is used. Using DhiWise and the REST APIs of lemon.markets it took only 2 hours to create a web application like Investie.

DhiWise is a programming platform where developers can convert their designs into developer-friendly code for Mobile and web apps. DhiWise automates the application development lifecycle and instantly generates readable, modular, and reusable code.

Figma

View design

Prerequisites for building Investie:

Figma
APIs of lemon.markets and Twilio
The last and the most important thing is DhiWise

‍

Steps taken to achieve this using DhiWise:

Figma designs were made following proper guidelines to build accurate UI.
Navigations were added to the Application.
Modal was added and component was changed to a chart
The APIs of lemon.markets and Twilio were added into API management and their binding was done with the UI.
Finally, the app was built and deployed to Vercel. The source code was also available to download.

In detail calculation using DhiWise.

15 minutes to fetch the design and prototypes from Figma and build the application in DhiWise
45 minutes to add navigation, modal, chart, and to bind the APIs with UI component.
1 hour of manual coding for some parts and to deploy on Vercel.

‍

Why use DhiWise to build Applications

Figma to code

feature helped majorly in this project by generating the whole React UI code in just a few mins and made the task lot easier.DhiWise had automatically detected all the components and prototypes from Figma like columns, lists, text, input boxes, select dropdowns, buttons, images, and many more.

‍

Preview

Using this Preview feature helped to execute code generated by DhiWise to see the output. In preview, there were also options of select the page and page size preview. The preview has also a provision to copy the page preview link from the copy button.

‍

Navigation

Navigation to different pages using DhiWise had done with just a simple click. Navigation not only lets to navigate on another page but also gives the freedom to pass the data between two pages.

‍

Close modal

From Figma, DhiWise automatically detected the Modal and DhiWise also provides the feature of open modal on a click function. Using that feature integrated the modal on the Buy now button. On the modal page, had integrated the close modal feature of DhiWise on the close button.

‍

Change UI component

Adding a chart to the website may take a good amount of time for manual coding but using DhiWise it could be done in just a few clicks. Using the Change UI component feature the component was converted to a chart. DhiWise had generated the code of the whole chart view with dummy data. Now the developer had to only pass the data to the chart manually.

‍

API Manager

API Manager helped in uploading a postman collection of the API to DhiWise. So, all the APIs in the collection were added within just 10 seconds. It also has the feature of adding an API manually. After adding these APIs, a developer can directly integrate them with the UI component or on the life cycle method.

‍

API integration

DhiWise provides the feature of API integration. API integration was done in DhiWise using 3 simple steps. On the other hand, if it was done using manual coding then it could take a good amount of time for a developer.

Instead in DhiWise, it hardly took 2-3 minutes to integrate one API depending upon the complexity of the API.

The first step was to select the API and add its header and parameters.

In the second step, Handle Response allows the developer to bind the API response with the view UI component, or instead, it also lets the developer save the response to the local storage.

The last step was to Handle action. It allowed developers to add action on Success and Error.In this step, there were 3 actions add navigation, show alert, and API integration.

‍

Build app

After using all the features and performing all the actions the application was built by clicking on the build app button. The source code was also generated by building the application.

‍

Deploy on Vercel

The Application was deployed on Vercel by using the “Deploy on Vercel” feature of DhiWise.

Manual way vs DhiWise way

Building this application using manual coding could take more than 32 hours for building the whole UI part, API integration, response binding with the view, adding charts and so much more. As a result, it will take more time, effort, and energy.

Instead, with DhiWise it only took a few minutes to do the same tasks. To build this whole application using DhiWise was only a 2-hour job. DhiWise saves an important aspect of every developer's life which is time. So, developers can more focus on giving more functionalities.

‍

Manual coding:

‍Tasks like adding SMS messages, passing the order data to the chart view, and solving some view issues were done using manual coding.

GitHub

View Source Code

Medium

Check the step-by-step guide

YouTube video

Watch now