Assignment
Spotlight Stock Market, frontend in React
Spotlight Stock Market, which was previously called Aktietorget, is a Nordic marketplace for growth companies that was founded in 1997. The name change and the new website are part of the company's current initiatives in the Nordic market.
Limetta was already involved at an early stage in planning the project, which has been run as a collaborative effort together with other designers and developers. In the project group, Limetta has had primary responsibility for frontend development (HTML, CSS, JavaScript and data handling between backend and frontend).
We wanted the clean, modern design to be reflected in the interface's functionality as well. The website was to feel fast, with simple but well-crafted and consistently implemented features. We therefore chose to build all interactive parts as components in React. For data handling we have used Redux.
Lots of information, many features, in real time
A marketplace for securities is among the most information‑intensive websites you can build. Company information, news from a number of different sources, price data, charts, technical analyses and so on — often in real time.
Our strategy for handling the large number of features was to, as far as possible, build small, generic, configurable components that can then be assembled into larger units that provide the interfaces the user interacts with. You can liken it to creating Lego bricks (components) that can be combined into different builds — the same bricks, entirely different Lego figures (interfaces and features).
One example of this is the many search forms and filters on the website. Each element (for example a button, a dropdown or a date picker) is its own component. They are then combined into a complete form used to query Spotlight's APIs. The way information is presented — as tables, charts or lists — is also built modularly. The same components are used across the site. The result is significantly shorter development time, higher quality and easier maintenance.
Tables and charts
Financial information must be clear, direct and fast. Those who work with securities daily do not want anything standing between them and the information. They just want to see and be able to act quickly on what is happening in the market. That places demands on design, layout, interaction design and functionality. Central units for presenting financial information are tables and charts, and Spotlight Stock Market is no exception.
As with search forms and filters, we have worked modularly with tables and charts. One and the same table component can be adapted both to the information to be displayed and to the configuration you want it to have. Sometimes you only want a short, simple table, for example a list of the companies that carry out a split during the year. Other times you want a table packed with functionality and data, for example a price list.
The same applies to charts. A single chart component can present many different types of charts, data at different time intervals and with different appearances and color schemes.
APIs and real-time data
Virtually all financial information displayed on Spotlight Stock Market comes from APIs. In this project Limetta was not responsible for building the underlying functionality for the APIs, but we were responsible for defining the data format for the information sent between the API and the interface. We also decided which functionality could be implemented directly on the client side and which needed to be implemented in the backend.
One example of this is functionality for sorting and color-coding data in tables. Because React is so fast, we chose to implement both of these features directly on the client side. The component therefore determines on its own whether a value in a column is positive, negative or neutral and applies color-coding accordingly
Would you like to know more about how we can help you?
Get in touch with us and we'll tell you more.
