Здравствуйте, надеюсь, у вас все хорошо. Приветствую вас в своем первом блоге, меня зовут Рану Ранджан. Я изучаю полноценную веб-разработку в Школе Масаи. Этот блог посвящен нашему путешествию и проблемы, с которыми мы столкнулись при создании проекта с моими коллегами.
О веб-сайте:
Культ. Fit — это платформа, которая делает занятия фитнесом веселыми и легкими. Наши тренировки можно проводить как в культовом центре, так и дома с помощью видео тренировок своими руками. Cult предлагает лучшее в технологиях, чтобы дать опыт мирового уровня. Вы можете записываться на занятия, смотреть видеоролики с тренировками, заказывать еду, покупать спортивное снаряжение, заботиться о здоровье и заниматься психотерапией.
Используемый технический стек:
Мы использовали Html5, CSS3, EJS, NodeJS, PassPort (Package) и MongoDB для создания этого проекта. Мы также использовали такие инструменты, как Github для размещения нашего проекта, Slack & Zoom в качестве канала связи.
Члены команды:
Путь проекта:
После того, как Масаи получил этот проект на неделе строительства. Мы все просмотрели реальный веб-сайт, чтобы понять весь процесс, и отметили все важные функции, которые должны были быть реализованы. Шитал и Мансур уже работают над интерфейсной частью проекта в рамках недели сборки unit2. Я и Раджниш присоединились к ним для разработки серверной части. В прошлый раз мы использовали локальное хранилище и управление домом. На этот раз мы модифицируем проект, используя MongoDB для сбора данных, таких как хранение информации о пользователях, продуктов по категориям, таких как товары для мужчин, товары для женщин и обувь. Мы также использовали EJS для отображения вещей во внешнем интерфейсе. Мы также использовали дополнительные пакеты, такие как пакет паспорта для аутентификации пользователей. Шиталь руководит проектом. Она создала дорожную карту для проекта (Структура проекта, разделение работы между участниками с конкретными сроками). Раньше мы встречались два раза в день (Scrum и Standup). Наша дисциплина, самоотверженность, координация и сотрудничество помогают нам завершить этот проект вовремя.
Подробная информация об используемом стеке технологий:
HTML5: используется для создания базовой структуры веб-сайта. Все заголовки, абзацы, ссылки, формы и т. д. были структурированы с помощью HTML.
CSS: используется для добавления стиля веб-сайту. Мы использовали Advance CSS для анимации, всплывающее модальное окно для входа/регистрации, оплаты и добавления адреса.
JavaScript: используется для добавления логических функций на веб-страницы, таких как функция onClick. Мы добавили все функции.
Express Js: встроенный Javascript, широко известный как EJS. Он используется для встраивания кода Javascript в код HTML. EJS в основном используется с Express в node.js. Мы используем Ejs для преобразования наших статических HTML-страниц в динамические страницы.
MongoDB: мы использовали MongoDB в качестве базы данных для хранения данных пользователей, сведений о продуктах и информации о корзине.
Паспортный пакет: мы использовали его для аутентификации данных пользователей.
Некоторые снимки веб-сайта:
Вход в систему:Чтобы войти в систему, пользователь должен ввести свое имя пользователя и пароль для входа на веб-сайт.
Страница регистрации. Чтобы зарегистрироваться, Пользователь должен зарегистрироваться, введя свое имя , адрес электронной почты, номер телефона, пароль, а затем нажать кнопку «Создать учетную запись». Вы успешно вошли в систему.
Целевая страница. На целевой странице есть анимация ключевых слов в верхнем заголовке и эффект карусели изображений. Мы достигли обеих функций. Целевая страница и панель навигации веб-сайта. Вы также можете увидеть, какие вещи наш веб-сайт предлагает вам, как исследовать живые сеансы, одежду и многое другое.
База данных:
Страница магазина.Вы можете просмотреть страницу магазина, просто щелкнув значок магазина на панели навигации. В магазине вы можете приобрести себе самую последнюю одежду. Нажмите на товар и, выбрав размер, просто добавьте его в корзину, нажав «Добавить значок корзины».
Категории страниц магазина:
Страница корзины: пользователи могут увеличивать и уменьшать количество товаров на странице корзины, мы добавили ваучеры, пользователи будут получать скидки на ваучеры. После этого добавьте адрес для размещения заказа и процесс оплаты.
Добавить адрес. Вы можете указать свое местоположение сейчас и разместить заказ.
Страница оплаты. Вы находитесь на странице оплаты после размещения заказа. Вы можете оплатить с помощью дебетовой или кредитной карты, просто введя имя владельца карты, а затем номер карты, дату истечения срока действия и CVV. После этого нажмите на строку «Оплатить сейчас», чтобы завершить оплату.
Заказ размещен.После успешной оплаты эта страница подтверждает, что ваш заказ размещен.
Мы хотели бы поблагодарить Школу Масаи за предоставленную нам платформу для демонстрации наших талантов в веб-разработке, я лично благодарю всех членов моей команды Seetal Sindhu, Mansur Diwan, и Rajnish Kumarза их полную поддержку и вклад в создание этого замечательного проекта. Это был отличный и замечательный опыт.
Спасибо за чтение.
