På grund av snabb digitalisering så finns ett behov av en översikt över de utvecklade produkterna. Detta inte bara för att analysera dess användning utan också för att säkerställa dess korrekta användning. Målet med detta arbete har varit att skapa ett analysverktyg för ett komponentbibliotek och visa var och hur komponenterna används. Det långsiktiga målet med arbetet är att öka produktiviteten för de som använder komponent-bibliotek. Detta har åstadkommits genom intervjuer och en nulägesanalys på ett annat verktyg av Bitbucket. Baserat på resultaten utformades tre designer som utgjorde grunden till implementationen. Implementationen var i sin tur skapt med Javascript kombinerat med React, NextJS och Typescript. När implementationen var färdig genomfördes ett flertal användbarhetstester med flertalet deltagare på implementationen respektive det tidigare verktyget. En jämförelse gjorde därefter på de två verktygen. På grund av en liten testgrupp kan resultaten inte definitivt påstå att implementationen åstadkommer en högre produktivitet eller användbarhet. Resultatet kan, utifrån resultaten hävda att det sannolikt skett en förbättring i produktivitet och användbarhet, fler tester krävs för ett definitivt svar. En framtida implementation bör överväga möjligheten att inkludera en integrerad AI assistent som kan ge rekommendationer och dela insikter kring användningen av komponenterna. / Due to a fast digitalization, there exists a need for an overview over the developed products. This to not only analyze their usage but also ensure their correct usage. The objective of this work has been to create an analysis tool for a component-library and show where and how the components are used. The long-term goal is to increase productivity for those who use component-libraries. This was accomplished through interviews and a current situation analysis on another tool by Bitbucket. Based on the results three designs were created forming the groundwork for the implementation. The implementation was created using Javascript with React and NextJS alongside Typescript. Once the implementation was done a usability test with multiple participants was conducted on the implementation and the previous tool. A comparison was then made between the two tools. Due to the small test size the results are not conclusively able to say that the implementation results in a higher productivity or better usability. It can however be concluded from the comparison that it is likely that there is an increase in productivity and usability, but more tests are needed for a conclusive answer. A future implementation should consider the possibility to include AI as an integrated assistant who can make recommendations and share insights into the usages of components.

Webbapplikationer bygger på många olika webbramar och utvecklare har en mängd olika webbramverk att välja mellan när de utvecklar en webbapplikation. Två populära webbramverk som finns på marknaden är NextJS och Create React App (CRA). Varje ramverk har sina egna för- och nackdelar i olika perspektiv. Syftet med denna studie är att granska om det finns några skillnader i dessa två populära webbramverk ur ett kontinuerligt integrations och kontinuerligt leverans-perspektiv med ett fokus på att kolla närmare på skillnaderna inom utvecklingsprocessen vid utökningar av applikationer och den tid det tar att bygga och driftsätta applikationer i de olika ramverken. För att få kunskap om ämnet så har en teoretisk studie av webbaserade källor gjorts och en applikation har skapats i de båda ramarverken för att sedan utvidgas med ytterligare verktyg för att kunna utföra en jämförelse. Studien visar att ramverken resulterar i liknande byggoch driftsättningstider men skiljer sig dock åt gällande konfigurationer när applikationerna utökades och att NextJS gav en enklare åtkomst åt konfigurering. / Web applications are built on numerous of different web frameworks and developers have a plethora of different web frameworks to choose from when developing a web application. Two popular web frameworks on the market are NextJS and Create React App (CRA). Each framework has its own advantages and disadvantages in different perspectives. The objective of this study is to review if there are any differences in these two popular web frameworks in a continuous integration and continuous delivery perspective looking closer at the differences in the development process when extending applications and the time it takes to build and deploy applications in the different frameworks. To gain knowledge about the subject, a theoretical study on web based sources has been made and an application has been created in both framework to then be extended with further tools to be able to perform the comparison. The study shows that the frameworks results in similar build and deployment times but does however differ in the configurations when extending applications and that NextJS did provide a more straightforward configuration.

Den här rapporten beskriver resultaten och metodologierna för Bitech front-end-projektet, ett omfattande mjukvaruutvecklingsinitiativ som syftar till att digitalisera och effektivisera verksamheten på byggarbetsplatser. Projektet använder avancerade webbteknologier för att skapa användarvänliga, dynamiska och responsiva gränssnitt som är lämpliga för både platsbaserade och administrativa behov inom byggbranschen. Viktiga aspekter av projektet inkluderar integration av hantering av realtidsdata, mobilkompatibilitet för att säkerställa åtkomst på olika enheter, och robusta säkerhetsåtgärder för att skydda känslig projektdata. Under hela utvecklingsprocessen antog teamet agila metoder, med betoning på iterativ utveckling, kontinuerlig testning och regelbunden kundfeedback, vilket underlättade en flexibel och responsiv utvecklingsmiljö. Denna rapport ger en detaljerad analys av projektets utfall, lärdomar och rekommendationer för framtida initiativ som syftar till att öka den teknologiska adoptionen inom byggindustrin.