Разработка фронтенда на REACT js

Алексей13 лет в сервисе
Данные заказчика будут вам доступны после подачи заявки
20.02.2020

У клиента есть дизайн для сайта https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396437091

Он хочет его построить на React js. (или на тех страницах, где можно избежать джаваскрипта, а использовать Parallax анимации).

Бекенд и апи будет разработан нами на YII2

Не смотря на Invision дизайн, который он нам предоставил, проект будет состоять из 35-50 страниц.

1) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440598 - при входе на сайт мы попадаем на данный экран, где нужно указать возраст. Если возраст будет до 21 года, то юзеру будет доступ запрещен.

2) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440596 - экран ввода года роджения. Если с данного компа юзер уже заходил на сайт, то второй раз запрашивать не будет данную процедуру. (согласно памяти браузера)

3) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396437091

Первая секция будет анимированной на джаваскрипте. Будут  летать облака, и их движение будет плюс минус подстраиваться под движение мышки. 

На второй секции, при наведении мышки на каждого из Breeders - их логотип будет становиться интерактивным и вокруг логотипа будут появляться кружочки и продукцией, которую предлагает данный Breeder.

Данная страница будет еще как и в виде слайдера (можно сделать как Parallax)

http://prntscr.com/r54dd5 - при прокрутке влево будет отдельный большой слайдер-секция с анимацией как и главный экран (но уже другая картинка) и ниже будет одна секция как детальное описание.

http://prntscr.com/r54dd5 - при прокрутке вправо будет другой слайдер-секция и + ниже одна секция с описанием (история создания компании)

4) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/402588786 - при нажатии на логотип каждой компании, будет появляться интерактивное меню-список продуктов (вокруг логотипа), которые предлагает данная компания. (при Нажатии на продукт, мы сможем перейти к этому продукту на другую страницу)

5) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/400029744

На этой странице есть так же слайдер влево и вправо. 

Первая секция должна быть анимированной похожей на эту https://hinderer-wolff.fr/cepages-alsace

Так же на этой странице есть вторая секция ниже - она должна быть анимированной по принципу второй секции ниже по принципу этой страницы https://hinderer-wolff.fr/cepages-alsace

6) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440591 - будет анимированная страница и секция по принципу страницы выше.

7) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440590 - страница будет анимированной по принципу страницы выше.

На этой странице, кнопка BUY SEEDS будет работать по принципу этой кнопки http://prntscr.com/r54qtl     https://hinderer-wolff.fr/cepages-alsace

 На этой же странице в секции ниже будет возможность Поиска Breeders (список которых отображался на первых страницах. И при нажатии на эту кнопку нас вернет на страницу Breeders)

Так же на этой странице есть кнопка Search Seeds - будем перенаправлены на другую страницу с поиска знатного планчика.

8) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440589 - эта страница по принципу страниц выше. Те же кнопки в секциях ниже. Слайдер влево - вправо, в которых будут тоже будут секции с описанием и стандартными анимациями, как  на страницах выше.

9) Shopping Cart - как вы заметили, на всех страницах, где есть продукты есть возможность добавить продукт в шопинг карту.

10) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440594

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

11) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440593 - здесь так же как и на странице выше

12) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396435171 - страница с контактами и меню. Все кнопки активны. Проверьте в инвижене, что куда переходит

13) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396435169 - картинка будет чуть больше и анимирована по принципу этой же картинки, которая встречалась раньше

14) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396435170 - принцип как и выше

15) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440588 - Кнопка поиска Serach Seeeds. После ее нажатия, мы попали на этот экран

16) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440587 - результат поиска. При наведении мышкой на продукт, будет возможность добавить в корзину и указать количество

17) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440592 - FAQ

18) + еще 3 страницы FAQ http://prntscr.com/r552iz

19) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396440586 - Шопинг Карта (Как сказал клиент, там будет в 2 раза больше полей для заполнения, нам нужно будет их нарисовать или внедрить по примеру)

20) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/402332637 - здесь будет экран заполнения доп инфы по оплате и доставке

21) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/402332636 - платежная система, оплата, + экран после оплаты

22) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/400200753 - Sign In

23) https://projects.invisionapp.com/share/G7VVHRXACV6#/screens/396490354 - Карта, которая хранит память, что было добавлено ранее

24) Нам нужно еще сделать USER-profile. Там будет возможность внесения стандартных данных о юзере, данные о доставке, данные его платежки

=================================

Главным вдохновением для клиента был сайт https://hinderer-wolff.fr/cepages-alsace, его аниции, кнопки и функционал.

Нужны ориентировочные бюджеты на работу, сроки, вопросы.

Нужен опорный разработчик на реакте на постоянной основе.