Как прикрутить UI для Web приложения?

Question

[Денис Кузнецов]

Здравствуйте, хотел поинтересоваться, какие технологии использовать для UI, как их прикрутить к проекту и что\где конкретно почитать\посмотреть по этой теме.
Задача такова: мне нужно написать сайт меню в котором пользователь может самостоятельно собирать себе пиццу. (было бы здорово еще сделать, чтобы он мог свой вар подать на рассмотрение админам, и если он такой выдающийся, то админы могли бы добавить его в меню).
То есть условно на сайте должно быть меню со стандартными пиццами и свой редактор. В редакторе перед пользователем будет лежать большой круг( основа пиццы) и меню с ингредиентами. Эти ингредиенты можно разместить как по всей пицце разом, так и на каких то конкретных участках. То есть если пицца делится на 6 кусков и юзер хочет создать такую в которой помидоры будут только на 1 куске из 6 ти,то этот ингредиент на изображении появится только на одном куске пиццы. И когда костюмизация будет завершена то данные в базу будут забиты именно с такими инструкциями.
До этого создавал просто CRUD приложения с аутентификацией, в которых на UI только вывод таблицы,да формочки с кнопками, словом голый HTML. Поэтому немного в замешательстве, как реализовать нечто подобное, что и как использовать.
Проект планирую делать на Java на Spring Boot ( MVC. Data - JPA , Security, Email) в качестве базы данных использовать PostgreSQL.
Прошу рассказать какие технологии для UI использовать( так как будет анимация, полагаю это JS), как их прикрутить к спринговому проекту и где поподробнее прочитать про конкретно то, что необходимо для реализации данной задачи. Так же чтоб это все красиво выглядело наверное придется прикрутить CSS
За любую помощь и наводку буду очень благодарен, а если кто знает конкретные статьи со схожими примерами просто супер

Answer 1

[Rustam Azizov]

Да, вы правы, вам нужен JS. Советую воспользоваться Vue, так как он прост в использовании и достаточно мощный. В целом последовательность такова:
Разобраться с JS
Разобраться с Vue
Немного разобраться с NodeJS
Немного погрузиться в Webpack
Выбрать какой-нибудь готовый набор элементов (например Material Design, можно и свои написать, тогда либо CSS, SCSS, либо TailwindCSS и т.д.)
Написать SPA
Объединить с Java бэкендом — тут я не мастер разъяснения давать, так как не специалист по Java. Примерно представляю, что есть два пути:
1) У Spring есть способ самому отдавать js и css файлы
2) Можно поднять NodeJS сервер (благо это очень просто) и нужные роуты перенаправлять к нему (возможно через обратный прокси, например Nginx)

В целом, всё очень легко гуглится. Так что ссылки я сюда громоздкие пихать не буду.

UPD.
Разве что вот эту:
https://www.w3schools.com

Comments

[Денис Кузнецов]

Круто , спасибо

[Rustam Azizov]

Денис Кузнецов, желаю вам удачи.