Reservia Admin

Приложение для администрации и резервирования столов в заведениях

Стэк технологий

• React
• TailwindCSS
• ReactRouter
• NextJS
• TypeScript

Интересные моменты в разработке

Редактор карты

В проекте был предусмотрен редактор карты для заведений, до этого проекта не сталкивался с в таком виде.

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

Модели добавлялись через нажатие на модель и нажатие на карту. Модель следует за курсором до нажатия на карту или отмены добавления модели. Второй вариант, это зажатие левой кнопки мыши на модели и перетаскивания модели на карту.

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

Таймлайн

Таймлайн, один из вариантов отображения бронирования для заведений. Здесь из интересного, это динамический отрезок времени, который вычисляется из расписания ресторана, столы и их названия из редактора карты, столы можно вкл./выкл. в любое время. Бронирования можно перетаскивать горизонтально, чтобы сменить время бронирования. Также вертикальное перетаскивание, позволяет сменить стол при необходимости, также можно изменить начало и/или конец бронирования, потянув за крайние стороны бронирования.

Из интересного была фича для скролла до бронирований. Был такой кейс, что смена в заведении длинная, и некоторые брони начинают не вмещаться на экране и тогда в строках столов появлялась кнопка в цвет статуса бронирования для быстрого перемещения к ней.