Full Stack Development
Heikkinen, Eetu (2022)
2022
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-202202022015
https://urn.fi/URN:NBN:fi:amk-202202022015
Tiivistelmä
The objectives of this diary–based thesis was to work as a full stack developer in an actual workplace. The work included doing specification for frontend work in a big feature, working on that feature and doing smaller features in the backend. The work was commissioned by Pinja Operational Excellence Ltd.
The requirements for this diary–based thesis was to do work in the frontend and backend. The frontend has been built with React, Redux, Sass and TypeScript and the backend with .NET Core and C# as coding language. With these tools, the work was embedded into an already existing application, where the feature would be only enabled with a configuration. The feature included multiple High Charts displayed as a minified version of the original one, where the user could select multiple charts into one summary view and if the original chart settings were changed, those changes were required to be reflected in the summary view. A deep dive into the lifecycle of React was required to enable the feature to work with and without authentication, where the non–authenticated version would be used in an info–tv. Also, knowledge of handling two–dimensional matrixes was needed, to handle data correctly in a drag’ n drop. Using the React with two–dimensional matrix can be tricky, when updating useState() with a useEffect() hooks, especially when the built component should be used as a main view and as a form view, a main view refers to the actual view of displaying the selected items and form refers to the part, where the user can select items and re–order them with the drag’ n drop.
As a result of this tthesis, objectives were met and provided the Pinja Operational Excellence Ltd a fully functional, customizable summary chart, where the user can re–arrange the display order with ease and the summary can be opened into a uuid URL, which can then be used in an info–tv.
The requirements for this diary–based thesis was to do work in the frontend and backend. The frontend has been built with React, Redux, Sass and TypeScript and the backend with .NET Core and C# as coding language. With these tools, the work was embedded into an already existing application, where the feature would be only enabled with a configuration. The feature included multiple High Charts displayed as a minified version of the original one, where the user could select multiple charts into one summary view and if the original chart settings were changed, those changes were required to be reflected in the summary view. A deep dive into the lifecycle of React was required to enable the feature to work with and without authentication, where the non–authenticated version would be used in an info–tv. Also, knowledge of handling two–dimensional matrixes was needed, to handle data correctly in a drag’ n drop. Using the React with two–dimensional matrix can be tricky, when updating useState() with a useEffect() hooks, especially when the built component should be used as a main view and as a form view, a main view refers to the actual view of displaying the selected items and form refers to the part, where the user can select items and re–order them with the drag’ n drop.
As a result of this tthesis, objectives were met and provided the Pinja Operational Excellence Ltd a fully functional, customizable summary chart, where the user can re–arrange the display order with ease and the summary can be opened into a uuid URL, which can then be used in an info–tv.