Доделать front end модуля бронирования (React.js)
3000 UAHВ основном модуль уже готов, нужно сверстать календарь (согласно готовому дизайну), добавить одну функцию и ряд мелких исправлений. Обязательно все должно быть сделано с помощью React.js (с помощью функций и хуков).
Теперь подробнее.
Речь о модуле бронирования на сайте san-utes.ru (сам сайт трогать не надо)
Новый модуль заменит существующий. Ссылка на старый модуль: san-utes.ru/booking
Back end уже готов (во всяком случае мы делать его не будем), все новые изменения должны быть связаны с существующим API, для понимая его работы существует тестовый букинг: booking.san-utes.ru/index.html конечно же дадим доступ к его админке.
Но нюанс, технического описания API нет, доступа к исходному коду нет. Нужно будет понимать как работает API на примере тестовой системы (еще раз ссылка, такая же как выше) booking.san-utes.ru/index.html (используя DevTools). Можно задавать вопросы по поводу API, они будут переадресовываться разработчикам. В целом неудобно да, задали много вопросов клиенту по этому поводу. Клиент ссылается на то что он сам ничего не понимает, говорит про бюрократию, и что бэкендом занимается сторонняя контора которая доступ к API давать не хочет, но она предоставила тестовое приложение. Ничего страшного в целом, основная работа уже сделана, так что много копаться не придется!:)
Готовый дизайн:
https://www.figma.com/file/JuAbxyUcY8jtizWDTKK0xo/booking-hotel?node-id=0%3A1
Ссылка на то что готово по фронтэнду (с тестовыми данными):
(прикрепил тот же файл к проекту)
Что нужно доделать конкретно:
Выбор дат (это схематическое название раздела, к которому относится список правок ниже)
1. Сверстать календарь как в дизайне
2. Заменить иконки календарей, на иконки как в дизайне
3. При выборе количества взрослых, сделать так чтоб при повторном выборе из списка не пропадал вариант который уже выбрали
4. В датах писать месяца прописью: 11 сентября, 23 мая, сейчас там непривычное для нас порядок: "месяц, дата, год", так быть не должно, только дата цифрой и месяц прописью
5. Сделать так, чтоб нельзя было днем выезда выбрать тот же день, что и день заезда, только день после дня заезда и дальше.
Выбор номеров
1. Заменить знак рубля на знак без засечек, как в дизайне, здесь и дальше где появляется знак рубля, он должен выглядеть одинаково
2. В превью номера, есть место с тремя вещами которыми оснащается номер: Фен, Кондиционер, Двуспальная кровать к примеру, если третий пункт не помещается, то он должен размываться, как это показано в дизайне
Выбор тарифа
1. В "условиях отмены" сделать шрифт и размер таким же как в описании под названием тарифа, добавить немного воздуха внутри плашки вокруг текста, выровнять текст по левому краю
2. Сделать кнопку "к номерам" так же как в дизайне
Заполнение данных
1. Сделать так, чтоб номер форматировался при вводе, "+" должен сразу быть, код страны, код оператора и сам номер должны разделятся. Количество вводимых знаков нужно ограничить, сейчас там бесконечно цифры вводить можно.
2. Вместо кнопки "к номерам" там должна быть кнопка "выбрать еще один номер" как в дизайне, она должна возвращать нас к выбору номеров, где будут забиты те же данные и то же кол-во гостей, что и в первом номере, но при желании их должно быть возможно поменять, и когда мы выберем номер, в разделе заполнения данных будет уже два номера (Это функция есть в тестовом букинге, но еще не реализована в нашем приложении)
3. Заменить:
"Фактом бронирования вы соглашаетесь с обработкой персональных данных и политикой конфиденциальности и пользовательским соглашением"
На:
"Фактом бронирования вы соглашаетесь на обработку предоставленных вами персональных данных. Согласно Федеральному закону "О персональных данных" от 27.07.2006 N 152-ФЗ"
и ссылок не надо
Общие моменты:
1. Проверить все ли данные номера можно форматировать через админку, если что-то нет, то это нужно исправить (речь идет о том, чтоб через админку можно было добавлять новые номера (апартаменты) и они корректно отображались в приложении, можно будет в админке создать тестовый номер, чтоб было проще в этом разобраться (напоминаю доступ к админке конечно же дадим)
2. Проверить реагирует ли приложение на данные из URL (В том случае если человек зашел в букинг через главную страницу сайта, тогда оно должно отображать в URL параметры которые ввел человек и приложение должно их подхватить) (дополнительно это объясним позже)
Скину позже все материалы что есть, которые должны помочь в работе, но сейчас думаю достаточно информации чтоб понять суть работы.
Приложения 1
-
68 Добрый день, готов взяться за ваш проект, есть опыт работы с ReactJS, а так же в верстке сайтов, решим вашу проблему в кратчайшие сроки. Цену готовы немного уменьшить
-
728 15 1 Здравствуйте!
Заинтересовало Ваше предложение, я и моя команда будем очень рады взять данный проект в работу. Меня зовут Сергей, я разработчик и основатель ІТ-компании Devloop. Мы находимся в Украине.
Я не буду тратить ваше время длинными отступлениями или тем, почему Вам нужно выбрать именно нас.
Мы имеем опыт разработки более 3 лет. В нашей работе мы используем такие технологии React Native, React, Laravel, Node.js, PHP, jQuery, HTML5 / CSS3, Git, Vue.js, MySQL, JavaScript, SaaS, API.
Мы имеет опыт разработки проектов разного плана и типа.
Буду надеяться, что мы сможем сотрудничать в ближайшее время.
Спасибо, что нашли время прочитать мою заявку!
С наилучшими пожеланиями,
Сергей
-
367 Здравствуйте!
Очень охотно обсудим с Вами все нюансы с помощью любого удобного сервиса: viber, skype, slack, whatsapp.
Смогу показать работы, которые по ряду причин не могу выставить! Обращайтесь и приятного вам дня!
-
Что используется в качестве BLL? Redux?
-
Актуальные фриланс-проекты в категории Javascript и Typescript
Ищу наставника по Claude Code для запуска веб-проекта с нуля**Кратко о задаче:** Я новичок без опыта в программировании. Есть готовое ТЗ на разработку сайта (42 страницы, Next.js, PostgreSQL). Хочу реализовать его самостоятельно с помощью Claude Code - нужен специалист, который настроит среду и научит меня работать с инструментом. ---… Javascript и Typescript, Обучение ∙ 21 час 22 минуты назад ∙ 15 ставок |
Обновление дизайна на сайтеНужно обновить дизайн существующего сайта используя HTML, CSS, JS: освежить внешний вид, сделать его современным и адаптивным под мобильные устройства. Требуется добавить плавные анимации и интерактивные элементы . HTML и CSS верстка, Javascript и Typescript ∙ 1 день 14 часов назад ∙ 85 ставок |
Консультация и аудит текущего проекта на Odoo 19 Community EditionИщем Odoo разработчика — соло-разработчика с опытом разработки на Odoo 19 Community Edition, в том числе с использованием Claude Code. Нам нужен специалист, который успешно реализовал проекты в Odoo и имеет практический опыт разработки с использованием Claude Code. Важно:… C и C++, Javascript и Typescript ∙ 1 день 20 часов назад ∙ 5 ставок |
Интернет-магазин одеждыНужен разработчик для интернет-магазина одежды Ищу опытного разработчика для создания полноценного интернет-магазина одежды с дроп-моделью продаж. Что нужно сделать: 6 страниц: главная, товар, корзина, оформление, аккаунт, админ панель Вход через Google аккаунт Корзина и… HTML и CSS верстка, Javascript и Typescript ∙ 3 дня 17 часов назад ∙ 101 ставка |
Full-stack разработка — Amazon PPC Dashboard (Stage 1)Нужен full-stack разработчик с опытом работы с Amazon API для реализации Stage 1 внутреннего PPC-дашборда. Проект реальный, данные живые, всё готово к старту. Прототип фронтенда (5 страниц, React + TypeScript): ЧТО УЖЕ ГОТОВО — Фронтенд-прототип на React 18 + TypeScript + Vite… Javascript и Typescript, Веб-программирование ∙ 6 дней 4 часа назад ∙ 33 ставки |