Домашняя страница

Клон HomeDepot

Я Шиладжит Пол. Я изучаю полную веб-разработку стека в Школе Масаи. В этом блоге я хотел бы поделиться своим проектом недели конструирования, который я и моя команда сделали во время модуля-3 в школе Масаи. Цель нашей команды — клонировать исходный сайт в течение 5 дней.

Во-первых, мы хотели бы выразить нашу сердечную благодарность ШКОЛЕ МАСАЙ за разрешение работать над этим проектом. Мы изо всех сил старались использовать наш путь и знания, которые мы получили до сих пор в школе Масаи, которые никогда не стали бы реальностью без постоянного руководства и поддержки преподавателей и наших наставников.

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

Детали проекта:-

Нам пришлось клонировать веб-сайт Homedepot. The Home Depot, Inc., широко известная как Home Depot, является крупнейшим розничным продавцом товаров для дома в Соединенных Штатах, поставляющим инструменты, строительные товары, бытовую технику и услуги.

Мы попытались клонировать копию веб-сайта с помощью HTML, CSS и JAVASCRIPT.

Начиная…

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

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

Коммуникация является решающим фактором для любого проекта, и работа должна выполняться в команде, поэтому мы использовали такие технологии, как Slack, WhatsApp и Zoom, чтобы знать прогресс друг друга. Мы начали наш день со схватки с использованием Zoom в 10:00 утра и использовали WhatsApp для дальнейших запросов, связанных с работой.

Основным инструментом, который мы использовали для совместной работы и контроля версий, является GitHub Desktop и GitHub Browser. Работа на одной странице может привести к некоторым ошибкам слияния. Поэтому мы решили, что каждый будет работать над разными частями проекта. Вот небольшое введение в наш проект: -

Домашняя страница:-

  • Это главная целевая страница нашего сайта. Здесь нажатие на любую опцию на панели навигации перенаправит пользователя на страницу соответствующего продукта.
  • Нажав на выбранный почтовый индекс, вы выберете город по вашему выбору, и у нас есть панель поиска, где любой может легко найти соответствующие продукты.
  • Нажатие на кнопку «Войти» приведет к перенаправлению на страницу входа/регистрации для входа и регистрации. При нажатии на корзину откроется окно корзины, в котором будут показаны все товары, добавленные в корзину.
  • Теперь переходим на целевую страницу продуктов. Мы разместили наши самые продаваемые продукты, которые, как правило, предпочитают клиенты. Пользователи также могут напрямую приобрести его здесь.
  • Все эти функции работают исправно.

Скриншот:

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

Окно регистрации и входа: -

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

Тип аккаунта

  • Нажав кнопку «Выбрать и продолжить», пользователь перенаправляется на новую страницу в зависимости от его/ее потребностей.

страница регистрации

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

страница входа

Страница продукта: -

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

Страница продукта

Окно корзины:-

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

Страница корзины

  • а затем перейдите к кнопке Checkout. Нажатие на эту кнопку перенаправит пользователя на адресную страницу.

Страница оплаты:-

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

Страница оплаты

Технический стек: -

HTML
CSS
JAVASCRIPT (обработка DOM и локальное хранилище)

Проблемы: -

Я взял часть проектов и идей с сайта. Моя часть заключается в управлении сайтом и добавлении в корзину всех страниц устройств и целевых страниц. Я разработал три страницы, используя DOM и LocalStorage.

Основная проблема, с которой я столкнулся, заключается в том, что, поскольку сайт не предоставляет API, мне пришлось собирать данные. Это заняло много времени.

У меня были небольшие сомнения относительно использования Github, и эта проблема была решена с помощью моего товарища по команде.

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

Авторы

Соавторы этого проекта:

Обучение:-

  1. Мы все научились читать код членов команды.
  2. Наш стиль написания кода стал чище, так как при написании кода нам приходилось думать, что другие члены команды будут его читать.
  3. Нам пришлось узнать о многих свойствах CSS, о которых мы раньше не знали.
  4. Наши навыки работы с JavaScript и DOM стали лучше.
  5. Мы все научились планировать проект и выполнять его.

Исходный код:-

Наша ссылка на Github здесь