Привет, блоггеры, надеюсь, у вас все хорошо в жизни. Так, как вы здесь сейчас. Я хотел бы сначала представиться. Я Шубхам Кумаризучаю ИТ. В настоящее время я изучаю веб-разработку в школе масаи. Итак, в этом блоге я хотел бы поделиться своим опытом/путем клонирования www.priceline.com.

Что такое priceline.com?

Priceline — это платформа онлайн-бронирования, которая позволяет пользователям бронировать любой отель, рейс, автомобиль или круиз. Этот веб-сайт удобен и прост в использовании, и всего за несколько простых шагов пользователи могут бронировать отели, автомобили, авиабилеты в любую точку мира.

Мы постарались максимально воспроизвести исходный сайт всего за 3–4 дня. Основное внимание мы уделяем бронированию гостиничного номера. Чтобы клонировать веб-сайт, мы столкнулись с множеством проблем. Таким образом, преодолевая трудности, мы помогаем друг другу.

Для создания этого сайта мы использовали стек технологий React.js, CSS, расширенный JavaScript, а для управления данными мы использовали JSON-сервер. Ниже приведен снимок нашей целевой страницы, созданной одним из наших товарищей по команде и почти похожей на исходный веб-сайт Priceline.com. Он использовал Material-UI, React.js, CSS для оформления сайта.

Целевая страница

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

Переходя к следующему, приведенный ниже снимок содержит список всех отелей с их основной информацией, такой как местоположение, цена, рейтинг и т. д. Этот раздел также содержит некоторые функции, такие как сортировка отелей по их ценам.

На приведенном ниже снимке показаны номера отеля, которые пользователи выбрали в разделе поиска отелей. На этой странице также показаны некоторые дополнительные сведения и особенности отеля, который выбрал пользователь.

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

Роли и обязанности членов команды

Члены команды: Ранджан Гири, Судхир Кумар Самантарай

Для меня это был отличный опыт работы в такой замечательной команде, все они помогают, поддерживают. Мне очень сложно их благодарить, они очень тяжело работали над этим проектом.

  • Судхир Кумар Самантарай отвечал за создание целевой страницы и компонентов входа и входа.
  • Ранджан Гири отвечал за создание страницы поиска отеля и части формы бронирования, а также объединил все страницы.

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

Также мы все работаем над функциональной частью проекта

Проблемы, с которыми мы сталкиваемся при запуске проекта

В начальный период проекта мы столкнулись с пробелами в общении с членами команды. При слиянии проекта мы столкнулись с некоторыми проблемами из-за наложения CSS.

Как мы решали наши задачи

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

Ключевые моменты обучения на этом пути

• Как работать и общаться с командой.

• Как представить проект команде.

• Как повысить производительность и точность.

• Как создавать реальные веб-сайты.

  • Как повысить способность к самообучению.

Заключение

Это был очень классный опыт, работа с новыми членами команды всегда повышает способность работать в команде, и каждый раз это дает новый урок с опытом. Я узнаю, как создавать реальные веб-сайты с помощью React. В целом, мне понравилось работать над этим проектом.

Если хотите посмотреть на проект, то можете зайти на этот GitHub

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