Интернет магазин

[Horinchoi-Yan]

— сможешь смотреть-читать на английском ---- Да — сколько есть времени в день ---- 3-4 часа — какие цели обучения ------- научиться писать качественный, надежный код и наконец-то начать работать — есть ли на примете проект, который хотелось бы реализовать. ------- да, хочу реализовать интернет магазин Знания на данный момент: HTML, CSS(SCSS), JS, хочу изучить реакт на должном уровне, что бы понимать что я пишу и зачем. И в конечномм итоге пройти собес))

[alexbaumgertner]

да, хочу реализовать интернет магазин

Опишите пожалуйста функциональность магазина.

[alexbaumgertner]

, JS, хочу изучить реакт на должном уровне,

С React не работали? Посмотрите https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs — сложно для вас?

[Horinchoi-Yan]

Магазин должен соответствовать SPA, полная реализация клиентской части, возможность добавлять товар в корзину удалять, фильтрация товаров в зависимости от параметров, реализация всевозможных меню(с фильтрацией под выбранную категорию), подгрузка товаров, возможность выделить товар(избранное), реализовать CRM систему под этот магазин

[Horinchoi-Yan]

По поводу реакта, только начал знакомство с ним

[alexbaumgertner]

Магазин должен соответствовать SPA, полная реализация клиентской части, возможность добавлять товар в корзину удалять, фильтрация товаров в зависимости от параметров, реализация всевозможных меню(с фильтрацией под выбранную категорию), подгрузка товаров, возможность выделить товар(избранное), реализовать CRM систему под этот магазин

Сможете описать постранично, что должно быть на каждой странице? Пробовали ли когда-нибудь программы для проектирования сайтов типа https://www.figma.com/?

[Horinchoi-Yan]

Да, конечно, figma -да, готовый дизайн есть, нарисовать тоже смогу

[alexbaumgertner]

Да, конечно, figma -да, готовый дизайн есть, нарисовать тоже смогу

Супер круто!

[Horinchoi-Yan]

https://www.figma.com/file/k3FXQ9Kd1fvtjvWs3sgmIW/Tech-Online-Store-Design?node-id=0%3A1

Шапка сайта: есть корзина и личный кабинет: по ховеру на корзину должна открываться ее мини версия, в которой есть возможность удалять или редактировать добавленный товар, кнопки, по клику на которые пользователю отрисуется либо Shopping Cart - 1 либо Shopping Cart - 2. И поиск по нажатию на иконку раскрывается Hiden Search, с возможностью поиска по сайту по нажатию на ентер должна открыться странца каталога с результатами поиска

Личный кабинет: есть ссылки на виш лист регистрацию вход и сравнение, по клику на которые соответственно должна открываться форма регистрации, виш лист с добавленными продуктами и сравнение выбранных товаров

Меню в шапке сайта: по клику на пункт должен всплывать окно Menu - 1 с подкатегориями и товарами, которые соответствуют выбранному пункту при ховере на подпункты контент внутри бокса с товарами должен обновляться в зависимости от наведенной категории, при клике на товар должна открываться страница с товаром Product - About Product - 1, при клике на категорию должна открываться страница именно с этой категорией Catalog - 1

Основная стр: слайдер new products должен отображать новые продукты(я так понимаю только добавленные в бд или как-то так), далее по стр разбиты на 4 ряда разные категории первый плочек- ссылка на категорию по клику на see all products должен открываться catalog -1, последующие ряды содержат под категории при клике на которую должен открываться каталог именно с этой подкатегорией на стр catalog -1, далее следует рекламный блок бога в инст, здесь я так полагаю должен подключаться апи инстаграмм и выводить фото поста текст и дату

Далее каталог Catalog - 1: в правой часть есть 2 кнопки(вид страницы ) по клику на которые отображается вид либо Catalog - List view - 1 либо Catalog - 1. Селекты с возможность выбирать количество товаров, которые показываются на странице и сортировки. сайдбар слева возможность применять фильтры по можелям(выбранный фильтр переходит вверх каталога и его можно от туда удалить по нажатию на х), фильтрация по цене и по цвету так же присутствует кнопка очистить фильтр по нажатию на которую все сбрасывается и выводятся дефолтные товары данной категории. Если на данной странице товаров больше 20, они должны скрываться и отображаться по клику на след страницу( внизу каталога есть страницы под номерами)

Далее страница Product - About Product - 1 в ней есть меню при клике на пункты должны открисовываться Product - Details - 1 и Product - Specs - 1 соответственно на каждой из которых присутствует счетчик с количеством товара и ценой зависящей от количества, слайдер с товаром кнопка добавить в корзину и перейти к оплате, так же присутствует кнопка Contact Us по нажатию на которую должна открываться Contact Us - 1 с возможностью вводить данные и отправлять сообщение(естественно с валидацией где она требуется)

Страница входа/регистрации Register - 1 поля для ввода с валидацией и кнопка регистрации, если еще не зарегистрированю. после регистрации или входа следует перенаправление на стр User Account - 1 где соответсвенно есть история заказов, виш лист, информация об аккаунте и т.д.

Страница корзины Shopping Cart - 1 в ней есть все товары которые были добавленны с возможностью редактировать количество , возвожность очистить корзину полностью удалить отдельные товары, справа все товары суммируются исходя из количества так же присутствуют поля Shopping Cart - 2(стр с развернутой корзиной) для ввода страны для расчета стоимости доставки

Страница с оформлением заказа Checkout - 1 на ней присутствуют поля для вооди информации(с валидацией) справа блок с товарами которые будут заказываться соответственно, выше отображаются шаги(заполнение данных и оплата), при переходе к следующему, предыдущий получает иконку галочки

страницы About Us - 1 и FAQ - 1 статические которыеотрисовываются по клику на соответсвующие кнопки

[Horinchoi-Yan]

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

[alexbaumgertner]

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

Спрашивайте

[Horinchoi-Yan]

Использование хуков(здесь скорее следует обратиться к документации реакта), и в некс предварительный рендеринг, сложно для восприятия

[alexbaumgertner]

Есть примеры кода, который не работает, как ожидается?

[Horinchoi-Yan]

Нет, просто по ходу чтения документации не совсем было понятно