Project Overview
About
Monitor Trader Exchange is a platform that was developed for the user to have instant access to updated quotations of all currencies traded by banks and brokerages in Brazil. Everything clients look for in a customized platform for real-time currency news and quotes. Historical data, graphic tools, signal of high stability and low latency of the information released by the Central Bank. With Monitor Trader Exchange, customers have real-time access to quotations practiced in the commercial and tourism exchange, making it easier for them to make decisions when doing business. All this with a high level of customization and preferences such as darkmode and table column order.
Challenges
Develop a platform integrated with Central Bank APIs, receiving data in real time according to the foreign exchange market, providing updated values so that customers can purchase currencies with the best offer. The platform should provide customizations such as easy access to currency information and history.
My Role
I participated in the frontend and UX of the platform, received the platform prototype and developed all the logic to receive data through the available APIs, development of information blocks, calculations and customization of currency tables.
Tools
Figma (UI & Prototype), HTML/CSS/Javascript (Frontend).
The Process
Prototype and technical analysis
The first step was to technically analyze the prototype and interactions in order to guarantee the technical viability of the product. It was important to evaluate the usability and scope so that the technology involved in the frontend could apply all the experience that the product demanded.
Development
It was one of the most challenging projects I've done because I developed the frontend from start to finish, everything that was designed in the prototype should be applied and some features were very complex to implement because there were no quick solutions in the technology involved (Javascript), such as the customization and organization of columns in the table.
This feature allows the user to customize the order of information. Using a drag and drop feature, the user drags the column according to the content of interest to the position he chooses, in addition to using a checkbox to hide and show columns according to preference. All interaction takes place in a customization menu, being necessary to sync with the table shown on the platform.
Solutions
In addition to this feature, some other features and solutions have been implemented
Dark mode: The platform is designed with dark mode theme option.
Currency history: Each currency has a screen with details and history of up to 1 year of data
Real-time calculator: The currency has a real-time calculator to check the current conversion.
Graphics and visuals: Resources such as line charts, animations and block customization were used to bring immersion to the demonstrated data.
Responsiveness: The entire platform was developed mobile first, to be accessed in a responsive way and on any device the user chooses.
Final Product & Results
Real-time data
The platform provides data in real time according to the foreign exchange market, allowing users to make the best quote according to the best value of the day.
Customizable platform
All features mapped in the design were implemented, generating a high level of customization and a better experience for customers using the platform.
Scalable solution
The product allows including new currencies, new data and greater history, expanding the experience and use of the platform.
In general, the project was very challenging to implement all the features and customizations mapped in the design phase, some of which do not exist in the market, being necessary to develop a new solution to provide the best user experience. Frontend learning was great and I was able to apply my technical skills in the development of this product.
8
Features developed
3
Months roadmap
+4600
Code lines
2
Color modes
13
Currencies integrations