Grocer-Ease : Мини-проект Front-end

Это мой первый проект в области веб-разработки, который я сделал. Большая часть моей работы была связана с созданием различных веб-страниц и их редизайном.

Бакалейщик Легкость

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

Потребность в легкости бакалейщика

«В индийской розничной торговле на рынке стоимостью почти 900 миллиардов долларов доминируют семейные магазины», — The Times of India.

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

Ожидается, что в ближайшие годы на онлайн-покупки может приходиться более 25% роста рынка продуктов питания.

С началом пандемии многие люди предпочитаютдоставку от двери до двери вместо того, чтобы идти за покупками.

В целях поддержки местных предприятий и предоставления средств для увеличения охвата их клиентов необходима онлайн-платформа для удовлетворения этих требований, таким образом, Grocer Ease.

Идея

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

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

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

Мои вклады

В основном я работал над дизайном домашней страницы и страницы элементов и связывал все страницы, а также помогал в редизайне других страниц с помощью HTML, CSS и JavaScript. Благодаря проектированию и внедрению я научился различным вещам, которые помогли мне расширить свои знания.

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

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

Я также разработал карусель для показа магазинов с помощью JavaScript.

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

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

Страница товаров

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

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

Для каждой карточки товара я реализовал различные теги, такие как translate-x, translate-y, z-index, overflow и т. д., чтобы придать ей уникальный вид, и добавил все что влияет на наведение.

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

Другие страницы

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

Мои мысли

«Знания без применения подобны ветру без паруса, чтобы его использовать» — Берт Голдман.

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

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

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