Этот блог был создан, чтобы поделиться нашим опытом работы над проектом в команде, назначенной школой Масаи. Мы разработали клон в Instacart за 5 дней в рамках оценивания проекта недели конструирования в рамках нашей учебной программы. Этот клон успешно демонстрирует все функции instacart с помощью всех концепций, которые мы изучили.

Instacart – американская компания, занимающаяся доставкой и самовывозом продуктов в США и Канаде. Компания предлагает свои услуги через веб-сайт и мобильное приложение. Услуга позволяет клиентам заказывать продукты у участвующих розничных продавцов, при этом покупки совершает личный покупатель.

Instacart позволяет легко делать заказы в ваших любимых магазинах. Покупайте товары в ближайших к вам магазинах, среди которых более 500 розничных продавцов и проверенных местных бакалейщиков по всей Северной Америке. Затем Instacart свяжет вас с персональным покупателем в вашем районе, чтобы сделать заказ и доставить его. Бесконтактная доставка доступна с нашей опцией «Оставить у моей двери».

Вы можете отслеживать ход выполнения вашего заказа и общаться с покупателем на каждом этапе с помощью приложения или веб-сайта Instacart. Для получения дополнительной информации перейдите на https://www.instacart.com.

Члены команды:

  1. Яш Сакалли.
  2. Друв Бхардвадж
  3. Паритош Парихар
  4. Арпан Кушваха
  5. Мадан Мохан

Постановка задачи:

Нам поставили задачу успешно клонировать веб-сайт Instacart за 5 дней.

Цель:

Мы как команда создали клон назначенного нам веб-сайта под названием Instacart в течение недели со всеми страницами, кодирующими правильные свойства HTML, CSS и JS. Использование таких концепций, как DOM, медиа-запрос, асинхронное программирование, выборка, локальное хранилище и импорт-экспорт на официальном веб-сайте Instacart.

Понятия в этом блоке:

  1. HTML
  2. Продвинутый JS
  3. Строительные функции
  4. Асинхронное программирование
  5. Обещания
  6. Принести
  7. Закрытия
  8. Сценарий ECMAS 6 (ES6)
  9. Импорт Экспорт

Как мы это сделали:

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

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

2. Страница регистрации

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

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

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

6. Добавить в корзину

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

8. Страница оформления заказа

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

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

Проблемы, с которыми столкнулись:

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

  1. GitHub был новым для всех нас, и поэтому было сложно понять всефункции этого сайта и объединить все коды и ветки дляразрешения конфликтов. Мы преодолели эту проблему, убедившись, что мы общаемся со всеми по одному, чтобы просто присоединиться к репозиторию, объединить коды и внести улучшения в окончательную версию.
  2. Проблема избыточного локального хранилища была самой сложной. Часть локального хранилища JavaScript и для хранения пар ключ-значение оказались избыточными, и вывод прерывался из-за одной глупой ошибки. Решение этой проблемы потребовало тщательной проверки всей части JS-скрипта, и благодаря хорошему общению мы смогли решить проблему и предотвратить ее повторение.
  3. Нам нужно было выяснить, что мы должны были представить в этом проекте, поскольку назначенный нам веб-сайт работал только в США и Канаде. Поэтому мы не смогли войти в систему или зарегистрироваться, из-за чего нам было очень сложно добавить или увидеть некоторые функции для клонирования веб-сайта. Мы преодолели это, просто указав, какие функции были доступны и какие из них были важны для нас, чтобы представить в этом проекте.
  4. Мы столкнулись с множеством проблем, пытаясь получить одинаковый макет для разных размеров экрана. Хотя мы смогли объединить большинство кодов и получить похожий макет, у нас возникли проблемы с отображением некоторых макетов на разных экранах. Поэтому мы решили решить эту проблему, убедившись, что мы даем значения в процентах, так как мы не изучали библиотеки пользовательского интерфейса.

Заключительное примечание и выводы:

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

Посетите наш репозиторий на GitHub:

https://github.com/Maddy-O/instacart-clone/tree/main