title: Ð Ð°Ð·ÑÐ°Ð±Ð¾ÑÐºÐ° Ð¿ÐµÑÐµÐ¸ÑÐ¿Ð¾Ð»ÑÐ·ÑÐµÐ¼Ð¾Ð³Ð¾ ÑÑÐ¾Ð½ÑÐµÐ½Ð´Ð° Ð²ÐµÐ±-Ð¿ÑÐ¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ ÐºÐ¾Ð¼Ð¿Ð°Ð½Ð¸Ð¸
title: Ð²ÑÐ¿ÑÑÐºÐ½Ð°Ñ ÐºÐ²Ð°Ð»Ð¸ÑÐ¸ÐºÐ°ÑÐ¸Ð¾Ð½Ð½Ð°Ñ ÑÐ°Ð±Ð¾ÑÐ° Ð±Ð°ÐºÐ°Ð»Ð°Ð²ÑÐ°
titleType: Subtitle
title: Development of a reusable frontend for a companys web application
Creators: name: ÐÐ»Ð°ÑÐµÐ½ÐºÐ¾, ÐÐ»ÐµÐºÑÐ°Ð½Ð´Ñ
Publisher: name: Ð¡Ð°Ð½ÐºÑ-ÐÐµÑÐµÑÐ±ÑÑÐ³ÑÐºÐ¸Ð¹ Ð¿Ð¾Ð»Ð¸ÑÐµÑÐ½Ð¸ÑÐµÑÐºÐ¸Ð¹ ÑÐ½Ð¸Ð²ÐµÑÑÐ¸ÑÐµÑ ÐÐµÑÑÐ° ÐÐµÐ»Ð¸ÐºÐ¾Ð³Ð¾
Year: 2025
Subjects: ÑÑÐ¾Ð½ÑÐµÐ½Ð´
Ð²ÐµÐ±-Ð¿ÑÐ¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ðµ
react
next.js
feature-sliced design
redux toolkit
ci/cd
frontend
web application

description: ÐÐ°Ð½Ð½Ð°Ñ ÑÐ°Ð±Ð¾ÑÐ° Ð¿Ð¾ÑÐ²ÑÑÐµÐ½Ð° ÑÐ¾Ð·Ð´Ð°Ð½Ð¸Ñ ÑÐ´Ð¾Ð±Ð½Ð¾Ð³Ð¾ Ð¸ Ð³Ð¸Ð±ÐºÐ¾Ð³Ð¾ ÑÑÐ¾Ð½ÑÐµÐ½Ð´Ð° Ð´Ð»Ñ ÑÐ¾Ð²ÑÐµÐ¼ÐµÐ½Ð½ÑÑ Ð²ÐµÐ±-Ð¿ÑÐ¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ð¹. Ð ÑÐ¾Ð´Ðµ Ð¸ÑÑÐ»ÐµÐ´Ð¾Ð²Ð°Ð½Ð¸Ñ Ð¸Ð·ÑÑÐµÐ½Ñ ÑÑÑÐµÑÑÐ²ÑÑÑÐ¸Ðµ ÑÐµÑÐµÐ½Ð¸Ñ, Ð²ÑÐ±ÑÐ°Ð½Ñ Ð½Ð°Ð¸Ð±Ð¾Ð»ÐµÐµ Ð¿Ð¾Ð´ÑÐ¾Ð´ÑÑÐ¸Ðµ ÑÐµÑÐ½Ð¾Ð»Ð¾Ð³Ð¸Ð¸ Ð¸ ÑÐ¿ÑÐ¾ÐµÐºÑÐ¸ÑÐ¾Ð²Ð°Ð½Ð° ÑÐ¸ÑÑÐµÐ¼Ð°, ÐºÐ¾ÑÐ¾ÑÐ°Ñ ÑÐ¿ÑÐ¾ÑÐ°ÐµÑ Ð¿ÑÐ¾ÑÐµÑÑ ÑÐ°Ð·ÑÐ°Ð±Ð¾ÑÐºÐ¸ Ð¸ Ð¼Ð°ÑÑÑÐ°Ð±Ð¸ÑÐ¾Ð²Ð°Ð½Ð¸Ñ Ð²ÐµÐ±-Ð¿ÑÐ¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ð¹. ÐÑÐ½Ð¾Ð²Ð½ÑÐµ Ð·Ð°Ð´Ð°ÑÐ¸ ÑÐ°Ð±Ð¾ÑÑ: - ÐÐ½Ð°Ð»Ð¸Ð· ÑÑÐµÐ±Ð¾Ð²Ð°Ð½Ð¸Ð¹ Ðº Ð²ÐµÐ±-Ð¿ÑÐ¸Ð»Ð¾Ð¶ÐµÐ½Ð¸ÑÐ¼ Ð¸ Ð¸Ð·ÑÑÐµÐ½Ð¸Ðµ Ð¿Ð¾ÑÑÐµÐ±Ð½Ð¾ÑÑÐµÐ¹ Ð¿Ð¾Ð»ÑÐ·Ð¾Ð²Ð°ÑÐµÐ»ÐµÐ¹. - ÐÐ±Ð·Ð¾Ñ ÑÐ¾Ð²ÑÐµÐ¼ÐµÐ½Ð½ÑÑ ÑÐµÑÐ½Ð¾Ð»Ð¾Ð³Ð¸Ð¹ Ð¸ Ð¸Ð½ÑÑÑÑÐ¼ÐµÐ½ÑÐ¾Ð² Ð´Ð»Ñ ÑÐ¾Ð·Ð´Ð°Ð½Ð¸Ñ ÑÑÐ¾Ð½ÑÐµÐ½Ð´Ð°. - Ð Ð°Ð·ÑÐ°Ð±Ð¾ÑÐºÐ° ÑÐ´Ð¾Ð±Ð½Ð¾Ð¹ ÑÑÑÑÐºÑÑÑÑ Ð¿ÑÐ¾ÐµÐºÑÐ° Ð½Ð° Ð¾ÑÐ½Ð¾Ð²Ðµ Feature-Sliced Design. - Ð ÐµÐ°Ð»Ð¸Ð·Ð°ÑÐ¸Ñ ÐºÐ¾Ð¼Ð¿Ð¾Ð½ÐµÐ½ÑÐ¾Ð² Ð¸Ð½ÑÐµÑÑÐµÐ¹ÑÐ° Ñ Ð¸ÑÐ¿Ð¾Ð»ÑÐ·Ð¾Ð²Ð°Ð½Ð¸ÐµÐ¼ React Ð¸ Redux Toolkit. - ÐÐ°ÑÑÑÐ¾Ð¹ÐºÐ° Ð²Ð·Ð°Ð¸Ð¼Ð¾Ð´ÐµÐ¹ÑÑÐ²Ð¸Ñ Ñ ÑÐµÑÐ²ÐµÑÐ¾Ð¼ ÑÐµÑÐµÐ· API Ð¸ ÑÐ»ÑÑÑÐµÐ½Ð¸Ðµ Ð´Ð¾ÑÑÑÐ¿Ð½Ð¾ÑÑÐ¸ (Web Accessibility). - ÐÑÐ¾Ð²ÐµÐ´ÐµÐ½Ð¸Ðµ ÑÐµÑÑÐ¸ÑÐ¾Ð²Ð°Ð½Ð¸Ñ Ð¿ÑÐ¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ, ÐºÐ¾ÑÐ¾ÑÐ¾Ðµ Ð²ÐºÐ»ÑÑÐ°ÐµÑ Ð² ÑÐµÐ±Ñ unit, Ð¸Ð½ÑÐµÐ³ÑÐ°ÑÐ¸Ð¾Ð½Ð½Ð¾Ðµ Ð¸ End-to-End ÑÐµÑÑÐ¸ÑÐ¾Ð²Ð°Ð½Ð¸Ðµ. - ÐÐ½ÐµÐ´ÑÐµÐ½Ð¸Ðµ Ð°Ð²ÑÐ¾Ð¼Ð°ÑÐ¸Ð·Ð°ÑÐ¸Ð¸ Ð¿ÑÐ¾ÑÐµÑÑÐ¾Ð² CI/CD Ð´Ð»Ñ Ð±ÑÑÑÑÐ¾Ð³Ð¾ Ð¼Ð°ÑÑÑÐ°Ð±Ð¸ÑÐ¾Ð²Ð°Ð½Ð¸Ñ. Ð ÑÐ°Ð±Ð¾ÑÐµ Ð¸ÑÐ¿Ð¾Ð»ÑÐ·Ð¾Ð²Ð°Ð½Ñ Ð¿Ð¾Ð¿ÑÐ»ÑÑÐ½ÑÐµ ÑÐµÑÐ½Ð¾Ð»Ð¾Ð³Ð¸Ð¸, ÑÐ°ÐºÐ¸Ðµ ÐºÐ°Ðº React, Next.js, TypeScript, Redux Toolkit, SCSS Ð¸ Jest. ÐÐµÑÐ¾Ð´ Feature-Sliced Design Ð¿Ð¾Ð¼Ð¾Ð³ ÑÐ´ÐµÐ»Ð°ÑÑ Ð¿ÑÐ¾ÐµÐºÑ Ð±Ð¾Ð»ÐµÐµ ÑÐ´Ð¾Ð±Ð½ÑÐ¼ Ð´Ð»Ñ Ð¿Ð¾Ð´Ð´ÐµÑÐ¶ÐºÐ¸ Ð¸ Ð´Ð¾ÑÐ°Ð±Ð¾ÑÐºÐ¸. ÐÑÐ¾Ð³Ð¾Ð¼ ÑÐ°Ð±Ð¾ÑÑ ÑÑÐ°Ð»Ð¾ ÑÐ¾Ð·Ð´Ð°Ð½Ð¸Ðµ ÑÑÐ¾Ð½ÑÐµÐ½Ð´-Ð¿ÑÐ¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ, ÐºÐ¾ÑÐ¾ÑÐ¾Ðµ Ð¼Ð¾Ð¶Ð½Ð¾ Ð¸ÑÐ¿Ð¾Ð»ÑÐ·Ð¾Ð²Ð°ÑÑ Ð¿Ð¾Ð²ÑÐ¾ÑÐ½Ð¾, ÑÐºÐ¾Ð½Ð¾Ð¼Ñ Ð²ÑÐµÐ¼Ñ Ð¸ ÑÐµÑÑÑÑÑ ÑÐ°Ð·ÑÐ°Ð±Ð¾ÑÑÐ¸ÐºÐ¾Ð² Ð¿ÑÐ¸ ÑÐ¾Ð·Ð´Ð°Ð½Ð¸Ð¸ Ð½Ð¾Ð²ÑÑ Ð²ÐµÐ±-Ð¿ÑÐ¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ð¹. ÐÐ»Ð°Ð³Ð¾Ð´Ð°ÑÑ ÑÐ²Ð¾Ð¸Ð¼ ÐºÐ°ÑÐµÑÑÐ²Ð°Ð¼ Ð¿ÑÐ¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ðµ ÑÐ¶Ðµ Ð½Ð°ÑÐ¾Ð´Ð¸ÑÑÑ Ð½Ð° ÑÑÐ°Ð¿Ð°Ñ Ð²Ð½ÐµÐ´ÑÐµÐ½Ð¸Ñ Ð¸ Ð¿Ð¾Ð´Ð³Ð¾ÑÐ¾Ð²ÐºÐ¸ Ðº ÑÐµÐ»Ð¸Ð·Ñ Ð² Ð½ÐµÑÐºÐ¾Ð»ÑÐºÐ¸Ñ ÐºÐ¾Ð¼Ð¿Ð°Ð½Ð¸ÑÑ.
description: This work is devoted to the creation of a convenient and flexible frontend for modern web applications. During the study, existing solutions were studied, the most suitable technologies were selected, and a system was designed that simplifies the process of developing and scaling web applications. Main objectives of the work: - Analysis of requirements for web applications and study of user needs. - Review of modern technologies and tools for creating a frontend. - Development of a convenient project structure based on Feature-Sliced Design. - Implementation of interface components using React and Redux Toolkit. - Setting up interaction with the server via API and improving accessibility (Web Accessibility). - Conducting application testing, which includes unit, integration and End-to-End testing. - Implementing CI/CD process automation for rapid scaling. The work used popular technologies such as React, Next.js, TypeScript, Redux Toolkit, SCSS and Jest. The Feature-Sliced Design method helped make the project more convenient for support and refinement. The result of the work was the creation of a front-end application that can be reused, saving time and resources for developers when creating new web applications. Due to its qualities, the application is al-ready at the stages of implementation and preparation for release in several companies.