Let’s build a Stock Trading Application, Investie using DhiWise

Nowadays, stock trading is a buzzing word. Stock trading refers to the buying and selling of shares in a particular company. If you own the stock, you own a piece of the company.

There are many problems that users might face while buying stocks. To enlist Them, choosing the right platform, accurate live information, Less knowledge of trading, Don’t have proper trading and investing Strategies, tracking the purchased stock and the list goes on.

With the eagerness to trade and to avoid this kind of problem, I have built my trading application with the help of DhiWise using the REST APIs of Lemon.markets and Twilio.

To begin with, four things that must require to build this use case are as below:

1. Figma Design: I have used Figma below to build this use case.

2. APIs: I have used the APIs of Lemon.markets and Twilio.

Find the API documentation link below:

• Lemon.markets: https://docs.lemon.markets/
• Twilio: https://www.twilio.com/docs/sms

3. One thing that is required to run these APIs is the Access token. To get the access token one has to register on both platforms.

The Access token of these platforms is provided on the Dashboard so it can be easily available.

• Lemon.markets: https://dashboard.lemon.markets/
• Twilio: https://console.twilio.com/

4. The fourth and most important thing is the DhiWise account

Steps to developing it with DhiWise:

1. Firstly I have taken Figma from the community and made some changes according to the need.
2. Then I entered my Figma into the DhiWise, where DhiWise detected all the screens with components and prototypes from Figma. This feature saved my time developing the front end and creating the UI.
3. After that, I changed some components, added a chart, and integrated a modal.
4. In the next step, I have entered all the APIs that I want to use in the API manager.
5. Then after, I integrated all the APIs with UI components.
6. Lastly, I clicked on the build button to generate the code of my application.

API integration with DhiWise:

1. When Figma is imported to DhiWise, it will detect all the selected screens with components and prototypes and show all the screens on the Dashboard.

Dashboard

2. To import the APIs in DhiWise, select the API manager on the left sidebar of the screen. Then, clicking on add new API gives the option to add postman collection or add API manually.

API manager to add APIs in DhiWise

3. I have integrated the below APIs of Lemon.markets and Twilio

• To get the Stock data ⇒ https://data.lemon.markets/v1/instruments/
• To get the trade data of the particular stock ⇒ https://data.lemon.markets/v1/trades/
• To buy a stock — POST API ⇒ https://paper-trading.lemon.markets/v1/orders/
• To get the data of all purchased stock — GET API ⇒ https://paper-trading.lemon.markets/v1/orders
• To get the account details ⇒ https://paper-trading.lemon.markets/v1/account/
• To SMS the order to the user ⇒ https://api.twilio.com/2010-04-01/Accounts/Account SID/Messages

4. Change UI component
Users can change the component by selecting the screen and then changing it to the desired component.
I have changed one component with the chart component.

Chart conversion

5. Integrated the API with the UI component
We will see the API integration for one API and the rest all be the same. For example, I have integrated APIs on both lifecycles and the button-click method.

• To integrate API on the life cycle method select life cycle action from the screen. Then select the API then add the header, parameter, and body according to the API.

API integration

• After adding the API details second step would be to handle the response. In this step DhiWise allows the user to bind the response with the UI component. This will save a lot of time for your as you don’t have to code all things.

Handle response

• Then in the last step, you can also add action on APIs success or error method. For example, you can add navigation and notification toast or bind another API on this method.

Handle action

• The above all are the things for GET APIs, but what about the POST API, right?
  For Post API, you must add the body to the API request. DhiWise allows you to add the request body by binding it with the view, manual input, constant, API response, navigation argument, or to get it from local storage.

Binding body request with view component

6. After making all the changes and integrating all the APIs, I built my application and generated the code by clicking on the Build app button.

Now you might ask can DhiWise push the code to GitHub? I also thought that, and then I found this feature of syncing with GitHub

• Using the sync feature with Github, you can push your code to GitHub, and every time a new code is made, it will create a new branch, so you might not get the conflict.

7. Moreover, DhiWise also provides the feature of deploying on Vercel. So users can deploy and look at the output of what he has built.

• I have used the ‘Deploy on Vercel’ feature to deploy my project on Vercel.

Code Quality and Developer Experience.

1. The first thing that helps any developer to understand the project structure is the README file. The README file generated by DhiWise contains all the details related to the project with proper instructions.

⇒ Every tiny detail is instructed correctly, like which packages are used, package versions, the steps after downloading the code, and so on.

⇒ The Files and Folder structures are correctly indicated with comments that a specific file and folder have the particular content.

Folder Structure in README file

2. The Structure of the code is simple, easy, and understandable. The code generated with DhiWise is made by keeping the best practices.

3. Every file is stored in its specific folder, which would help track the files.

4. Creating a UI of a website may take days but using DhiWise makes a considerable difference where developers only have to enter the Figma into DhiWise. Then, within a few minutes, the whole UI code is generated.

5. DhiWise generates all the design code using TailwindCSS, which makes code easy to read and edit or scale.

6. API integration is much faster using DhiWise. It uses the AXIOS package for API calls, and all the functions of the API calls are separated into one file. So it would help to make any changes.

That’s it. That is how I have made my stock trading application.

Checkout the complete tutorial in the below YouTube video:

GitHub link:

https://github.com/DhiWise/Investie

Refer to this documentation for more detail:

https://www.dhiwise.com/use-case/stock-trading