About
The highlights of developing a spotless design for cannabis production tracking application.
Challenge
Combining the presented backend with the fresh-new frontend and design
The company’s main request for Apptension was development of the frontend part of a new and improved version for their existing system for tracking the growth, cropping, and storage of their product. The main purpose of such an app was to be used by the employees as an internal tracking tool.
The client expected our team to develop in Vue.js v2, which was something completely new for us in comparison with the usual React that we employ for most frontend projects. This meant that we needed to quickly bring our Vue.js v2 skills up to the same level that we would provide if the project was created in React.
The client has also entrusted us with creating the design for the system and, from their side, was involved in refining and reviewing all parts of the design.
Process
Backend-inclusive user interface
We were presented with a fully-prepared backend with great documentation from the client’s side and the working ADFS login logic. The front end was a clean slate and we started creating the setup that makes us feel confident with the code we create - tests and storybooks. For Vue.js v2, we used similar packages to what we would normally choose when working with React.
We developed a complicated system consisting of multiple pages, most of which could be grouped into forms for creating and updating objects, lists of those objects, and also detailed pages for each of them.
The design that Apptension specialists provided was based on the UI system Buefy, which was previously used in the client’s project and proved to be an easy- and comfortable-to-use basic component source.
Solution
Perfect quality assurance process
We decided to introduce E2E tests right from the start of the QA-ing process. Cypress is our usual tool of choice, however, it wasn’t compatible with the given ADFS authentication provider, so we needed to think of a workaround. As a result, our devs came up with combining Puppeteer and Chromium to obtain new cookies and check their validity regularly. The other issue to resolve was matching the permissions on the back end and front end. Namely, from our side, we had to make sure that the frontend side reacts properly and displays only those options according to what comes from the back end. With the help of the same workaround, our dev team managed to mock up the permission layout and, thus, properly test the completed front end.
See other case studies
.png)
Get in touch
Have a project in mind? Send us the details and we will reach out to you with the next steps.