#react #awards #zustand #typescript

Samsung Asset Management

The best data-driven rendering project ever

All investments in the world

Hybrid React

In order to connect with the backend team and meet customer requirements, React was used in the necessary parts in the form of a view library on top of Spring boot.
Except for simple post lists, all parts for data integration were handled with React.

Main transition

ETF/Fund is divided into two domains, so there are two main pages.
To enable users to interactively move between two pages by clicking, the screen was switched using pushState, and the cards in Key Visual were classified according to the design guide.

Product list parameters

One of the key features of this project was to retrieve appropriate product data by calling numerous parameters through the API and elegantly render the product list.
Filter properties were made into a common state to be shared between components, and in active, an advancement project, zustand and provider were used to make components render according to changes in the filter property bundle.
Due to the tight schedule, we were unable to properly define the interface of the product model, so it was unfortunate that we were unable to take full advantage of typescript.

Product component/template

Another key feature, componentization/templating of product pages, also benefited from React's strong structural capabilities. I created about 20 components according to the previous screen design/design components and then combined them and rendered them according to the data and product type.

#react #typescript
Samsung C&T
Seamless screen transitions
Prev
#next.js #react #webgl #CSS
Cassool/World Cup
Small but powerful mini project
Next
0%Loading..