Конечный результат

Пользовательский интерфейс веб-приложения Шифратора-дешифратора, без логики.

План решения

1. Создать шаблон Next приложения прописав: "npx create-next-app@latest --ts".

2. Удалить лишние файлы такие как globe.svg, globals.css, и т.д.

3. Редактировать "page.tsx" и "layout.tsx" в директории "app", оставив один главный компонент.

4. Установить библиотеку для упрощения стилизации Material Design, прописав команду "npm install @mui/material @emotion/react @emotion/styled".

5. Установить библиотеку иконок от Material для стрелки вниз и вверх, прописав команду "npm install @mui/icons-material"

6. Написать компоненту формы для шифратора, дешифратора, пароля.

7. В главной компоненте добавить 2 кнопки с Material Design с готовой стилизацией и компоненты полей, стилизуя через Grid и добавить прочие мелочи как название приложения и т.д.

8. Достилизовать все компоненты, чтобы выглядело все "user-friendly".

Мотивация

Написание фронтенда приложения которое можно будет использовать для шифрования и дешифрования по методу шифрования Вегнера. Повторение компонентов React, освоение Material design и практика работы в команде с помощью веток в gitlab.

Критерии приёмки

Пользовательский интерфейс не ломается при разных разрешениях экрана, пользователю при первом взгляде понятно как шифровать и расшифровывать текст.