ENKHE
Hello, Habr! My name is Garmaev Enkhe. For a long time I worked in the retail industry as a manager. It was an exciting and eventful time, but as they say, there is always room for change and new challenges in life. Today I want to share with you my journey, the decision to change professions and my first experience working in an IT company.

ENKHE
Being in the world of retail, I have always been surrounded by an abundance of data, statistics and customer feedback. However, recently I have started 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 creativity and the ability to create something new, functional and beautiful.

ENKHE
My immersion 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.

ENKHE
There were courses such as Stepik, Hexlet and Yandex Workshop - they were considered the highest standard of programming education 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 that's when 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.

ENKHE
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 conditions of completely remote learning, where about 80% of the material is given to us, and the remaining 20% we must master ourselves, all as in the well-known Pareto principle.

ENKHE
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.

ENKHE
After getting up close and personal and discussing 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 that this was just the beginning, and there would be new challenges and opportunities ahead, but that’s where the fun lies.

ENKHE
In the course, 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 plunged into the world of JavaScript libraries to simplify working with the DOM and event handling. With each of these tools, I knew that 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.

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

ENKHE
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 patients with diabetes and doctors who care about eye health.

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

ENKHE
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 diabetes patients, 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.

ENKHE
With this perspective in mind, we took on the development. Previously, the client had an alpha version for Android on Kotlin and a prototype for iOS on Swift, and we proposed creating one application that would manage them all using the amazing Tauri. The Tauri platform is not yet stable, but at NL we like to live on the cutting edge and last year we switched from Electron to Tauri.

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

ENKHE
We had a design in PenPot that the client provided us from a previous Android prototype. So I configured the router according to the user's path - we use preact-router, and it's very nice and simple. Our design included 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 meet HTML standards. As with other NL projects, I kept each JSX component in a separate folder called Snake_case. The client sent a REST API with request headers for each endpoint. I had only used REST once before, so I re-learned 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 code for fetching. The fetch request for the profile screen had a dozen fields, and we mapped the fields to useState variables. I created a variable state for the token at the root application component level (app.jsx) using useState. I then passed the setToken function to the login screen component. The 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. i.e., I used a JavaScript array with a list of possible values according to the documentation. I used the map() method to generate option tags for each country in the array and display them as a list of options in the input fields on the registration screen.

ENKHE
This was my first major independent project, which not only brought me satisfaction, but also became a real source of new knowledge and experience. During my time 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.

ENKHE
Additionally, 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.

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

ENKHE
P.S. 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.

@ЭНХЭ
Привет, Хабр! Меня зовут Гармаев Энхэ. В течение длительного времени я работал в сфере розничной торговли, занимая должность менеджера. Это было увлекательное и насыщенное время, но, как говорится, в жизни всегда есть место переменам и новым вызовам. Сегодня я хочу поделиться с вами своим путешествием, решением о смене профессии и первом опыте работы в IT компании.

@ЭНХЭ
Будучи в мире розничной торговли, я всегда был окружен обилием данных, статистикой и клиентскими отзывами. Однако, в последнее время я начал задумываться о новом направлении для своей карьеры. Думаю, у многих бывает такой момент, когда охота, что‑то поменять в своей жизни, и я не стал исключением. В этот период своих раздумий я неоднократно натыкался на фронтенд‑разработку и, именно, эта сфера привлекла меня своей динамикой, где можно использовать творческий подход и возможность создавать что‑то новое, функциональное и красивое.

@ЭНХЭ
Мое погружение в захватывающий мир веб‑разработки началось с изучения основных технологий, таких как HTML, CSS и JavaScript. Однако, я понял, что для того, чтобы добиться качественного прорыва в этой области, мне необходимо было найти профессиональные курсы, которые помогли бы мне углубленно изучить материал и сделать уверенный шаг в сферу IT. И так, начался мой настойчивый поиск подходящих источников обучения.

@ЭНХЭ
Существовали такие курсы, как Stepik, Xeкслет и Яндекс Практикум — именно они считались наивысшим стандартом обучения по программированию в то время, хотя часть из них была платной. Однако, в то время мои финансовые возможности не позволяли мне оплатить платные курсы, и я решил обратиться к бесплатным альтернативам с качественной программой. И вот тогда я наткнулся на курсы The Rolling Scopes School — это было именно то, что я искал. Это бесплатное образовательное комьюнити, где предоставляется обучение на должность Junior Frontend Developer. После того, как я изучил программу обучения, я понял, что это именно то, чего я ждал.

@ЭНХЭ
Что меня по‑настоящему впечатлило, так это философия школы «Teach It Forward». Здесь ценится не только получение знаний, но и их передача. Когда ты достигаешь определенного уровня в своем обучении, тебе предлагается поделиться своими знаниями с другими. Этот подход не только мотивирует учиться еще усерднее, но и создает настоящее сообщество единомышленников. И все это происходит в условиях полностью удаленного обучения, где около 80% материала даются нам, а оставшиеся 20% мы должны освоить сами, всё как в известном принципе Парето.

@ЭНХЭ
Когда я обнаружил подходящие курсы, меня поразило, насколько большое сообщество единомышленников собралось здесь, где можно было обсудить свои трудности и поделиться новыми идеями. После полугода обучения я с упорством начал стремиться к коммерческому опыту, тщательно изучая вакансии на платформах типа hh.ru, habr вакансии и даже в социальных сетях. Именно, тогда в телеграм‑группе фронтенд‑разработчиков я встретил единомышленника, а также наставника, который уже много лет успешно работал в этой области.

@ЭНХЭ
После близкого общения и обсуждения различных аспектов разработки, я открылся и поделился своей потребностью в коммерческом опыте. Хотя курсы были важны, я понял, что работа в реальном проекте принесет мне совершенно новый уровень понимания и увлечения. После внимательного рассмотрения моих целей и достижений на курсах, мне была предложена работа в Norcivilian Labs. Это был для меня знаковый момент, и я не мог не испытывать радости. Я знал, что это только начало, и впереди меня ждут новые вызовы и возможности, но именно в этом и заключается вся прелесть.

@ЭНХЭ
На курсах я освоил три столпа фронтенд‑разработки это HTML, CSS, JavaScript, далее я углубился в их инструменты такие, как Sass для более удобного и эффективного написания CSS, а также изучил фреймворки, такие как React, которые предоставляют широкие возможности для создания интерактивных пользовательских интерфейсов. Также я погрузился в мир JavaScript библиотек, для упрощения работы с DOM и обработки событий. С каждым из этих инструментов я понимал, что фронтенд‑разработка — это то, чем я хочу заниматься. Именно, благодаря, этому интересу и стремлению я теперь нахожусь здесь, в новой роли фронтенд‑инженера в Norcivilian Labs. Давайте теперь погрузимся в мой первый опыт работы в IT‑компании.

@ЭНХЭ
Осенью я присоединился к Norcivilian Labs в качестве фронтенд‑инженера и занялся созданием мобильного приложения для Retina.AI.

@ЭНХЭ
Retina представляет собой инновационный стартап, олицетворяющий передовые технологии искусственного интеллекта в медицине. Это не просто платформа, а настоящий спасательный круг для пациентов с диабетом и врачей, заботящихся о здоровье глаз.

@ЭНХЭ
Стартап создан с целью борьбы с диабетической ретинопатией и другими заболеваниями сетчатки, предлагая инновационные диагностические решения, основанные на мощных алгоритмах искусственного интеллекта. Это решение, которое превращает процесс диагностики в настоящее творчество, обеспечивая точные и быстрые результаты, доступные в удобном формате.

@ЭНХЭ
Retina AI становится надежным партнером для врачей, предоставляя им возможность быстро обнаруживать пациентов с рассматриваемыми заболеваниями, снижая риски и улучшая качество медицинского обслуживания. Врачи получают возможность уточнить диагноз и принять неотложные меры, спасая зрение и предотвращая осложнения. Для пациентов с диабетом Retina становится надежным союзником в борьбе за здоровье глаз, обеспечивая им быстрый и удобный доступ к скринингу сетчатки. Это инструмент, который помогает своевременно выявлять проблемы и предотвращать серьезные осложнения, обеспечивая надежную защиту зрения.

@ЭНХЭ
Учитывая эту перспективу, мы взялись за разработку. Ранее у клиента была альфа‑версия для Android на Kotlin и прототип для iOS на Swift, и мы предложили создать одно приложение, которое управляло бы ими всеми, используя потрясающий Tauri. Платформа Tauri еще не стабильна, но мы в NL любим жить на переднем крае и в прошлом году перешли с Electron на Tauri.

@ЭНХЭ
Разделение ответственности в Tauri довольно хорошее, поэтому я знал, что могу написать интерфейсную часть, а ребята из Rust закончат работу позже. Документы Tauri рекомендовали vite+preact, и нам понравилась документация Preact — их информация о гиперскрипте.

@ЭНХЭ
У нас был дизайн в PenPot, который клиент предоставил нам из предыдущего прототипа Android. Поэтому я настроил маршрутизатор в соответствии с путем пользователя — мы используем preact‑router, и это очень красиво и просто. В нашем дизайне были экран входа в систему и экран регистрации. Я реализовал HTML‑формы для обоих экранов. Экран профиля представлял собой список меток и информации о пользователе. Я позаботился о том, чтобы на каждом экране использовались семантические элементы для соответствия стандартам HTML. Как и в других проектах NL, я хранил каждый JSX‑компонент в отдельной папке с именем Snake_case. Клиент отправил использовать REST API с заголовками запросов для каждой конечной точки. Раньше я использовал REST только один раз, поэтому снова изучил, что такое REST и как он работает. В JavaScript мы используем Fetch API для взаимодействия с REST, а клиент для всего использует POST‑запросы, поэтому я написал код для выборки. Запрос на выборку для экрана профиля имел дюжину полей, и мы отображали поля в переменных useState. Я создал состояние переменной для токена на уровне корневого компонента приложения (app.jsx) с помощью useState. Затем я передал функцию setToken компоненту экрана входа в систему. Экран входа получил токен и передал его значение через состояние другим компонентам (Меню, Профиль, Обнаружение, Регистрация), которые используют токен. Экран регистрации требовал списка возможных профессий и стран. т. е. использовал JavaScript‑массив со списком возможных значений согласно документации. Я использовал метод map() для генерации тегов опций для каждой страны из массива и отображения их в виде списка опций в полях ввода на экране регистрации.

@ЭНХЭ
Это был мой первый крупный независимый проект, который не только принес мне удовлетворение, но и стал настоящим источником новых знаний и опыта. За время работы над проектом я познакомился с различными технологиями, такими как REST, Fetch API, и гиперскрипт, что значительно расширило мой кругозор и улучшило мои навыки в области веб‑разработки.

@ЭНХЭ
Кроме того, ежедневные отчеты, которые я писал в нашем публичном Zulip, стали неотъемлемой частью моей работы. Они помогли мне организовать свои мысли, фиксировать прогресс и обмениваться идеями с коллегами. Благодаря этому мне удалось систематизировать свои знания и подготовить данную статью.

@ЭНХЭ
Этот проект стал важным этапом в моем профессиональном росте, и я с нетерпением жду новых вызовов и возможностей, которые принесет будущее.

@ЭНХЭ
P. S. В данной статье я оставил ссылки, которые могут быть полезны для более глубокого понимания и работы над проектом, который я выполнил. Возможно, это будет полезно тем, кто столкнется с подобными задачами в будущем. Хочу подчеркнуть, что развиваясь и учась, нет ничего невозможного. Верьте в себя и свои силы.