Здравствуйте, возможно, вы видели веб-сайт Ajio, где вы можете купить любые популярные бренды одежды, обуви и других аксессуаров, сидя в одном месте.
Двигаясь вперед, мы команда из 6 человек в школе Масаи. В рамках нашей учебной программы мы разработали клон веб-сайта ajio.com всего за 4 дня. Этот блог посвящен нашему путешествию и проблемам, с которыми мы столкнулись при создании проекта.
Какова была моя постановка проблемы и как я к ней подошел: -
Итак, у меня была постановка задачи, что я должен создать клон сайта под названием ajio.com. Кроме того, я могу использовать только свой HTML, CSS, JavaScript и экспресс-узел для серверной части. Нас было шесть человек в нашей команде.
Вот некоторые проблески нашего веб-сайта: -
Целевая страница:
Это целевая страница нашего веб-сайта, на которой есть панель навигации, раскрывающийся список с отдельными категориями, а также несколько баннеров и набор категорий.
Страница регистрации:
Это наша страница регистрации. Каждый раз, когда вы нажимаете «Войти/Присоединиться к Ajio», вы получаете всплывающее окно, в котором вас попросят ввести основную информацию, а также, если вы хотите подписать с помощью Google, система единого входа facebook работает.
Страница авторизации :
Это наша страница входа, где вам нужно ввести свой адрес электронной почты и пароль, которые вы использовали в процессе входа в систему, в противном случае вы просто нажимаете на Google или Facebook, чтобы войти на наш сайт.
Страница продуктов:
Всякий раз, когда вы нажимаете на любую категорию продукта, вы попадаете на соответствующую страницу продуктов, где вы можете увидеть набор продуктов с набором страниц.
Быстрый просмотр :
Это наш краткий обзор отдельного продукта. всякий раз, когда вы наводите курсор на какой-либо конкретный продукт, вы увидите кнопку быстрого просмотра на изображении продукта. Как только вы нажмете на нее, появится всплывающее окно с основными сведениями о продукте этого конкретного продукта.
Информация о продукте :
Это наша страница сведений о продукте, где вы можете просмотреть сведения о продукте и кнопку «Добавить в корзину», а внизу вы увидите похожие продукты, связанные с продуктом, который вы посетили.
Страница корзины:
Это страница нашей корзины, где вы увидите товары, добавленные в корзину. На этой странице вы можете выбрать нужный размер и увеличить количество, если хотите.
Существует также опция удаления, например, если вы хотите удалить конкретный товар из корзины, вы просто нажимаете кнопку «Удалить», где вы можете удалить продукт из корзины.
Существует также опция списка желаний, если вы хотите добавить определенный элемент в список желаний, а также вы можете удалить его из списка желаний, щелкнув еще раз.
Адресная страница:
После того, как вы нажмете кнопку «Перейти к оформлению заказа», вы попадете на адресную страницу со сводкой заказа.
Если вы новый пользователь, вам нужно нажать на адрес добавления, после чего вы получите всплывающий адрес. В котором вам нужно заполнить информацию о доставке, чтобы получить свой заказ.
Страница платежей:
Как только вы нажмете кнопку «Перейти к оформлению», вы будете перенаправлены на страницу оплаты, где вы сможете выбрать режим оплаты. Вы можете выбрать любой способ оплаты.
Сводная страница:
После успешного завершения платежа вы будете перенаправлены на страницу сводки. Где вам будет дано сообщение с идентификатором заказа, а также вы получите сводную информацию о заказанных вами продуктах.
Как мы разделили работу в нашей команде: -
- Мы встретились в Zoom, и мы все просмотрели весь веб-сайт. Затем мы проанализировали то, что нам нужно реализовать.
- После того, как мы проанализировали вещи, мы спросили каждого члена нашей группы, кто в чем хорош. С этими отзывами мы разделили нашу работу, уважали их мастерство, и приступили к работе.
- Каждый день у нас были встречи, чтобы узнать, чем занимаются люди. При таком сотрудничестве мы решили вопросы и разработали полноценный функционал.
Результат и важные выводы из проекта:
Весь этот путь создания проекта был потрясающим. Мы многому научились, обратившись к настоящему веб-сайту, и это придало нам уверенности.
Стек технологий, который мы использовали:
- HTML .
- CSS.
- JavaScript.
- CSS попутного ветра.
- Node.js
- Express.js
- MongoDB
Если вы хотите увидеть наши работы
