Event Planner →

Event Planner - веб-приложение, которое позволяет пользователям планировать и организовывать события.Event Planner имеет следующие страницы:
• Главная страница:
На этой странице пользователи могут пересмотреть список ближайших событий.Есть возможность сортировать события по различным критериям, например, по названию, дате или приоритету.При ховере и фокусе на карту события появляется кнопка, которая дает возможность перейти к более подробному описанию события (переход к страницы события).Также на странице есть кнопка добавления нового события, при нажатии которой пользователь переходит на страницу создания события.• Страница создания события:
На этой странице пользователи могут заполнить форму с необходимой информацией о событии, такой как название, дата, время, место, описание и т.д.• Страница события:
Получается подробная информация о конкретном событии.Есть возможность пользователям обо вернуться на предыдущую страницу, либо удалить событие, либо редактировать.При нажатии на кнопку редактирования приложения переводит пользователь на страницу редактирования события.• Страница редактирования события:
На этой странице пользователи могут редактировать заполненную форму с информацией о событии, такой как название, дата, время, место, описание и т.д.После сохранения формы редактирования пользователь автоматически возвращается на страницу события.В приложении также реализовано:
Поиск событий - возможность искать событие по названию, воспользовавшись инпутом в хедере.Пагинация на главной странице.Поддержка различных языков - переводчик на украинский и английский.С страницы события по клику на кнопку Видео открывается модальное окно, где пользователь может посмотреть видео об событии (вплоть до дефолта).Верстика адаптивная и кросбраузерная - мобильная от 320px, планшет от 768px, десктоп от 1280px.Используется подход Mobile First.При верстике списка событий используется алгоритм CSS Grid.При разработке используется React, JS, TS (колендар).Формы создания и редактирования события реализованы с валидацией с помощью formik.Приложение реализовано без запросов и привязки к бекенду.