Wall Of Traders allows non-Traders to automatically copy their strategy and their risk on Trades from the best and selected Traders. Wall Of Traders allows Traders to use a very powerful Smart Trading tool : Stop Loss and Take Profit at the same time, Trailing ability, Multi-platform trading.

Goal: Create new features for the existing web app that will give to Wall Of Traders a bigger value on the market.

Technologies used : React, Redux, Typescript, Node.

The Missions:

I was given several missions:

1) The Onboarding

For my first mission, I had to create an Onboarding (Tutorial) that will facilitate the primary goal of the client's arrival. Allowing them to copy a trader, trade for others, trade for themselves and/or link a crypto account to the platform (ex: Binance).

Without this Onboarding, the client could quickly get lost and close the tab of our platform.

Now, depending on the user's choice, we will send him/her to the right place.

If we choose to "Copy A Trader", it leads us to the second stage (which will be the same for all the others), in which we must choose an exchange from a drop-down list: Binance Spot, Binance Futures, FTX, FTX US, Kucoin, Kraken, Bittrex, Huobi, Bitfinex,... and fill in some other information you can see on the next illustration :

Then, when we finally "Add An Exchange", we can see that exchange on the 3rd stage :

Now we can re-add an exchange by pressing "Yes" or we can simply press "No" which closes the onboarding popup and takes us to the traders from the Wall Of Traders site where the user can choose which trader he wants to copy. You can see the statistics of traders earnings, the trades he is working on and their earnings promises at the copiers :

Let's imagine now that we wanted to "Trade for others". This option is the opposite of the first button because now, we will be the trader who will be able to create his group which will earn potentially money to our future copiers.

Remember, the second and third steps where we add one or more exchanges will be the same as for the others. We will therefore be able to create a trader after these steps.

Then, three buttons are proposed to us which will led us to different actions depending on what we truly want:

The "Trade for others" button now complete, I'll tell you about the next button. That of "Trading for myself" which, as its name suggests, will allow us to trade at its account but this option is generally made for experienced traders. After adding his or her trades, the popup closes and redirects us to the "Smart Trading" page where we can see a graph of a chosen trading pair, for example BTC/USDT and create a trade from fairly complex fields to fill in :

Which finally brings us to the fourth and final button on the onboarding popup list: "Follow my wallet". After adding our exchange(s), the popup closes and the site is redirected to the Accounts page, where we can see our exchanges with their details.

2) The Referral Module

Do you remember that in the onboarding process, in the group formula, we give the possibility for the user to share a referral link? This referral link must be generated in the backend, and it must be linked to the trader who created it. It's quite a process. complex. That's why while this part of onboarding had to be paused, in waiting for the sponsorship backend to be ready, another mission was given to me. That of create a page in the site dedicated to the invitation of a friend and therefore to create referral links in agreement with the backend in production.

To do this, a new button on the home page, on the left vertical bar of the site has been added with the title "Invite a Friend". By clicking on it, you can see all the referral links that the trader has created :

For this mission, I've accomplished the following tasks:

• Added a title to the page.

• Created a button for traders to generate personalized referral links with name validation (5-25 characters).

• Implemented rule-based validation for the referral link names.

• Added "Create" and "Cancel" buttons.

• Created a popup confirmation for successful link creation.

• Added a button to withdraw earnings from all referral links once they reach a minimum of $50.

• Dynamically updated the withdrawal button based on earnings.

• Calculated and converted earnings from various currencies to US dollars.

• Displayed the total earnings and withdrawal information.

• Designed a table to display all created referral links with filters, including name, clicks, registrations, active status, earnings in USD, and actions.

• Implemented actions for referral links, including a popup with earnings details and sharing options.

• Included column sums and averages for numeric data.

My mission involved enhancing referral link management, real-time earnings tracking, and user-friendly interaction elements.

3) Mobile version

The referral mission is now completed, and we can move on the next mission. For both onboarding and referral missions, there is a mobile vision I had to code also.

4) Creation of Microservices for the backend

Firstly, what means microservices ?

Microservices architecture (or microservices) refers to a style of architecture used in application development. It allows you to break down a large application into independent components, each element having its own responsibilities.

For my final mission, I developed Node.js and TypeScript microservices for the backend.

I made API calls from another backend to retrieve exchange data like coin names, API keys, and passwords. To fetch exchange data, I used the "CCXT" library, connecting to cryptocurrency exchanges worldwide.

API calls included balance retrieval with currency, available balance ("free"), borrowed balance, interest, and total balance.

I also fetched market data with pairs, precision, leverage limits, and more. Additionally, I retrieved currency prices, canceled orders, and retrieved order details.

Lastly, I placed orders with pair, side (buy/sell), quantity, price, leverage, and password, despite the complex stock market terminology.

The overall architecture:

1. [Git Branches]

All missions had their own branches on the git repository. And when each mission has been viewed, tested and confirmed by the CTO, we merged them to the master branch.

2. Technologies used

For the first 2 missions, we choosed to use React and Redux who are modern and loved technologies in the marcket.

For the third mission, I began with nodejs for the microservices but we finally choosed to go with Typescript to have a better and cleaner architecture.

3. The organisation of the team

We had two platforms which were organized for the good organization of the group.

The first one is Discord. Discord is free proprietary VoIP and instant messaging software. That is where we always connect during work. We could ask question at any time, show our screen and discuss together about everything.

The second is Asana. Asana is a team communication manager. The product supports many features, including workspaces, projects, tasks, tags, notes, comments, and an inbox that organizes real-time information updates.