journey into the world of frontend with Tauri, REST and Fetch API

Being in the retail world, I was always surrounded by an abundance of data, statistics and customer feedback. However, recently I have begun to think about a new direction for my career. I think many people have a moment when they want to change something in their life, and I was no exception. During this period of my thoughts, I repeatedly came across front-end development and it was this area that attracted me with its dynamics, where you can use a creative approach and the ability to create something new, functional and beautiful.

My dive into the exciting world of web development began with learning core technologies such as HTML, CSS, and JavaScript. However, I realized that in order to achieve a qualitative breakthrough in this area, I needed to find professional courses that would help me study the material in depth and take a confident step into the IT field. And so began my persistent search for suitable sources of training.

There were courses such as Stepik, Xexlet and Yandex Workshop – they were considered the highest standard of programming training at that time, although some of them were paid. However, at that time my financial capabilities did not allow me to pay for paid courses, and I decided to turn to free alternatives with a quality program. And then I came across The Rolling Scopes School courses – it was exactly what I was looking for. This is a free educational community that provides training for the position of Junior Frontend Developer. After I studied the training program, I realized that this was exactly what I had been waiting for.

What really impressed me was the school's “Teach It Forward” philosophy. Here, not only the acquisition of knowledge is valued, but also its transmission. When you reach a certain level in your learning, you are encouraged to share your knowledge with others. This approach not only motivates you to study even harder, but also creates a real community of like-minded people. And all this happens in a completely remote learning environment, where about 80% of the material is given to us, and we must master the remaining 20% ​​ourselves, everything as in the well-known Pareto principle.

When I discovered the right courses, I was amazed at how large a community of like-minded people was here to discuss their challenges and share new ideas. After six months of studying, I persistently began to strive for commercial experience, carefully studying vacancies on platforms like hh.ru, habr vacancies and even on social networks. It was then that in a telegram group of front-end developers I met a like-minded person, as well as a mentor who had been successfully working in this area for many years.

After close contact and discussion of various aspects of development, I opened up and shared my need for commercial experience. While the courses were important, I realized that working on a real project would bring me a whole new level of understanding and passion. After careful consideration of my goals and achievements in the courses, I was offered a job at Norcivilian Labs. This was a significant moment for me, and I couldn’t help but feel joy. I knew this was just the beginning and there would be new challenges and opportunities ahead, but that was where the fun lay.

During the courses, I mastered the three pillars of front-end development: HTML, CSS, JavaScript, then I delved into their tools such as Sass for more convenient and efficient writing of CSS, and also studied frameworks such as React, which provide ample opportunities for creating interactive user interfaces. I also dived into the world of JavaScript libraries to simplify working with the DOM and handling events. With each of these tools, I knew front-end development was what I wanted to do. It is thanks to this interest and desire that I am now here, in my new role as a front-end engineer at Norcivilian Labs. Let's now dive into my first experience working in an IT company.

In the fall, I joined Norcivilian Labs as a front-end engineer and started creating a mobile application for Retina.AI.

Retina is an innovative startup that represents the cutting edge of artificial intelligence in medicine. This is not just a platform, but a real lifeline for diabetic patients and doctors who care about eye health.

The startup was created to combat diabetic retinopathy and other retinal diseases by offering innovative diagnostic solutions based on powerful artificial intelligence algorithms. This is a solution that turns the diagnostic process into true creativity, providing accurate and fast results, available in a convenient format.

Retina AI becomes a trusted partner for physicians, giving them the ability to quickly identify patients with the diseases in question, reducing risks and improving the quality of care. Doctors have the opportunity to clarify the diagnosis and take urgent measures, saving vision and preventing complications. For patients with diabetes, Retina becomes a trusted ally in the fight for eye health, providing them with quick and convenient access to retinal screening. This is a tool that helps to identify problems early and prevent serious complications, providing reliable vision protection.

Taking this prospect into account, we began development. The client previously had an Android alpha in Kotlin and an iOS prototype in Swift, and we proposed creating one app that would manage them all using awesome Tauri. The Tauri platform is not stable yet, but we at NL like to live on the cutting edge and switched from Electron to Tauri last year.

Tauri's separation of concerns is pretty good, so I knew I could write the front end and let the Rust guys finish the work later. The Tauri docs recommended vite+preact, and we liked the Preact docs – their info on hyperscript.

We had a design in PenPot that the client provided us from a previous Android prototype. So I set up router according to the user path – we use preact-router and it is very nice and simple. In our design there was a login screen and a registration screen. I implemented HTML forms for both screens. The profile screen was a list of tags and information about the user. I made sure that every screen used semantic elements to comply with HTML standards. As with other NL projects, I stored each JSX component in separate folder named Snake_case. The client sent to use REST API with request headers for each endpoint. I had only used REST once before, so I relearned what REST is and how it works. In JavaScript, we use the Fetch API to interact with REST, and the client uses POST requests for everything, so I wrote the fetch code. The fetch request for the profile screen had a dozen fields, and we mapped the fields to useState variables. I created a state variable for token at the root application component level (app.jsx) using useState. I then passed the setToken function to the login screen component. Login screen received the token and passed its value through state to other components (Menu, Profile, Discovery, Registration) that use the token. The registration screen required a list of possible professions and countries. Those. used a JavaScript array with a list of possible values ​​according todocumentation. I used the map() method to generate option tags for each country from an array and display them as a list of options in the input fields on the registration screen.

This was my first major independent project, which not only brought me satisfaction, but also became a real source of new knowledge and experience. While working on the project, I was exposed to various technologies such as REST, Fetch API, and hyperscript, which greatly expanded my horizons and improved my skills in the field of web development.

In addition, the daily reports I wrote in our public Zulip became an integral part of my work. They helped me organize my thoughts, record progress, and share ideas with colleagues. Thanks to this, I was able to systematize my knowledge and prepare this article.

This project has been an important milestone in my professional development and I look forward to the new challenges and opportunities the future will bring.

PS

In this article I have left links that may be useful for a deeper understanding and work on the project that I completed. Perhaps this will be useful to those who face similar tasks in the future. I want to emphasize that by developing and learning, nothing is impossible. Believe in yourself and your strength.