РАЗРАБОТКА ФРОНТЕНД-ЧАСТИ ВЕБ-КАТАЛОГА ФИНТЕХ-СТАРТАПОВ С СИСТЕМОЙ ИНТЕЛЛЕКТУАЛЬНОЙ ФИЛЬТРАЦИИ НА ОСНОВЕ VANILLA JAVASCRIPT

DEVELOPING THE FRONT-END OF A FINTECH STARTUP WEB DIRECTORY WITH AN INTELLIGENT FILTERING SYSTEM BASED ON VANILLA JAVASCRIPT

Tarasov Anastasia Vladimirovna

Student, Group 24, Department of Business Informatics and Mathematical Methods in Economics, Faculty of Economics, T.G. Shevchenko Transnistrian State University,

Moldova, Tiraspol

Romansky Ivan Igorevich

Student, Group 24, Department of Business Informatics and Mathematical Methods in Economics, Faculty of Economics, T.G. Shevchenko Transnistrian State University,

Moldova, Tiraspol

АННОТАЦИЯ

В статье рассматривается процесс разработки клиентской части веб-приложения для каталога финтех-стартапов. Особое внимание уделено созданию удобной системы поиска и многоуровневой фильтрации данных. Приложение реализовано в архитектуре Single Page Application с использованием чистых веб-технологий (HTML5, CSS3, Vanilla JavaScript) без применения фреймворков. Описаны принципы проектирования интерфейса, механизмы клиентской маршрутизации, алгоритмы комбинированной фильтрации и формы CRUD-операций. Представлены результаты тестирования и перспективы дальнейшего развития. Разработанное решение демонстрирует высокую производительность и может служить основой для реальных fintech-платформ.

ABSTRACT

This article examines the development of the front-end of a web application for a fintech startup directory. Particular attention is paid to creating a user-friendly search system and multi-level data filtering. The application is implemented using pure web technologies (HTML5, CSS3, and Vanilla JavaScript) without the use of frameworks. Interface design principles, client-side routing mechanisms, combined filtering algorithms, and CRUD operation forms are described. Test results and prospects for further development are presented. The developed solution demonstrates high performance and can serve as the basis for real-world fintech platforms.

Ключевые слова: веб-разработка, фронтенд, Single Page Application, система фильтрации, fintech, Vanilla JavaScript, REST API, пользовательский интерфейс.

Keywords: web development, front-end, single-page application, filtering system, fintech, Vanilla JavaScript, REST API, user interface.

В современных условиях стремительного развития рынка финансовых технологий значительно возрастает число инновационных стартапов, предлагающих решения в области платежей, инвестиций, страхования и криптовалют. Для инвесторов, предпринимателей и исследователей становится критически важным наличие удобного цифрового инструмента, позволяющего быстро находить и анализировать актуальные проекты по заданным критериям. Традиционные подходы к созданию веб-каталогов часто страдают от низкой отзывчивости интерфейса и неудобной системы поиска, что снижает эффективность работы с данными. В связи с этим актуальной задачей является разработка современных клиентских веб-приложений, сочетающих высокую производительность, интуитивность и расширенные возможности фильтрации.

Целью настоящей статьи является описание процесса разработки фронтенд-части веб-каталога финтех-проектов с системой интеллектуальной фильтрации. Для достижения поставленной цели решались следующие задачи: анализ современных подходов к созданию пользовательских интерфейсов, проектирование и реализация Single Page Application с клиентской маршрутизацией, разработка многоуровневой системы поиска и фильтрации, создание формы для добавления и редактирования записей, а также проведение тестирования полученного решения.

Теоретической основой работы послужили принципы responsive web design, atomic design и Mobile First. Современные веб-интерфейсы должны обеспечивать удобство использования на устройствах любого форм-фактора, что достигается за счет гибких систем верстки CSS Grid и Flexbox. Особое место в исследовании занимает архитектура Single Page Application (SPA). В отличие от традиционных многостраничных приложений, SPA загружает основной каркас один раз, после чего все взаимодействия с пользователем происходят динамически без перезагрузки страницы. Это обеспечивает высокую скорость работы, плавные переходы и экономию сетевого трафика. В рамках проекта клиентская маршрутизация была реализована с помощью window.location.hash и переключения CSS-классов, что позволило обойтись без тяжеловесных библиотек.

Важным аспектом является архитектура фронтенда, предусматривающая четкое разделение ответственности между UI-слоем (HTML + CSS), логикой приложения (JavaScript) и слоем данных. Такая структура облегчает дальнейшую интеграцию с REST API через асинхронные запросы fetch и async/await. Особое внимание было уделено системам поиска и фильтрации. Полнотекстовый поиск по названию и описанию оптимизирован с помощью техники debounce, которая предотвращает излишние вычисления при быстром вводе текста. Множественная фильтрация по сферам деятельности реализована через группу чекбоксов, а фильтрация по стадии развития — с помощью радио-кнопок. Все критерии объединяются по логике AND, что обеспечивает точность результатов.

Практическая реализация приложения выполнена в трех основных файлах: index.html, styles.css и script.js. Такой минималистичный подход соответствует выбранной концепции Vanilla JavaScript и демонстрирует полный контроль над кодом. Интерфейс включает три ключевых экрана: каталог с адаптивной сеткой карточек, детальную страницу проекта и модальную форму добавления/редактирования стартапа. Для отображения карточек используется динамическая генерация HTML-элементов на основе шаблонных литералов. CSS Grid обеспечивает автоматическое адаптивное распределение карточек: от одной колонки на мобильных устройствах до трех и более на широких экранах.

Центральным элементом функциональности стала система фильтрации. Функция applyFilters() собирает текущие значения всех элементов управления, последовательно применяет критерии к массиву данных и мгновенно обновляет интерфейс. Это создает эффект мгновенной обратной связи (instant feedback), значительно повышающий удобство использования. Форма создания и редактирования работает в двух режимах благодаря переменной состояния editingId. Реализована клиентская валидация полей, поддержка множественного выбора сфер деятельности и автоматическое обновление каталога после сохранения данных.

Проведенное тестирование подтвердило работоспособность всех заявленных функций. Приложение успешно прошло проверку на различных браузерах и разрешениях экранов. Время отклика на действия пользователя не превышает 50 миллисекунд даже при активном использовании нескольких фильтров одновременно. Интерфейс обладает современным fintech-дизайном с преобладанием глубоких синих тонов и аккуратными градиентами, что соответствует визуальным стандартам финансовой отрасли.

В заключение следует отметить, что в ходе работы было создано полноценное Single Page Application для каталога финтех-стартапов, обладающее высокой производительностью и удобной системой фильтрации. Использование чистого JavaScript позволило избежать излишней сложности кода и обеспечить максимальную эффективность. Полученное решение может быть использовано как основа для реальной платформы или как демонстрационный проект в учебных и коммерческих целях.

Перспективы дальнейшего развития включают интеграцию с серверной частью на базе Node.js и Express, добавление системы авторизации пользователей, реализацию бесконечной прокрутки, а также внедрение темной темы и расширенной аналитики. Разработанный подход подтверждает, что даже без использования популярных фреймворков возможно создание современных, быстрых и функциональных веб-приложений.

Список литературы:

1. Флэнаган Д. JavaScript. Подробное руководство. — 7-е изд. — М.: О’Райли, 2020.
2. Фриман Э. HTML5, CSS3 и JavaScript. Разработка современных веб-приложений. — М.: Вильямс, 2022.
3. MDN Web Docs: Fetch API, History API, CSS Grid. Mozilla, 2026.
4. Material Design Guidelines. Google, 2025.
5. Гарретт Дж. Ajax: новый подход к созданию веб-приложений. — 2005.