Проект Eatly

Проект «Eatly» — это путь к невероятным кулинарным впечатлениям, где каждый может заказать любимую еду из различных ресторанов просто в одно касание. Удобство, разнообразие и скорость — это три составляющие, которые делают наше приложение идеальным выбором для тех, кто ценит утонченный вкус и комфорт в каждом заказе.

Какие были поставлены задачи: 

• Реализовать front-end часть интернет-сервиса (тематика на выбор студентов).
• Адаптивная верстка приложения.
• Минимальный рабочий функционал: 4 страницы:  Главная страница, Страница с категориями и фильтрами товаров, Детальный просмотр товаров, Корзина.
• Header приложения должен быть на каждой странице, должен содержать логотип компании, иконку корзины, иконку любимых товаров.
• Добавить страницу с категориями и фильтрами товаров.
• Добавить страницу товаров.
• Добавить страницу отдельного товара с названием, описанием, фотографией, ценой, рейтингом, кнопками «Add to cart» и «Favourute».
• Добавить страницу «Cart» со списком всех товаров в корзине (название, фото, количество, стоимость) и с кнопкой «Delete».
• Реализовать добавление товаров в «Favourites» для авторизованных пользователей.
• Реализовать Регистрацию и Авторизацию пользователей.
• Реализовать авторизацию через Google.
• Добавить страницу Chekout с формой оформления заказа (данные пользователя, стоимость заказа, адрес доставки, контактный телефон заказчика, выбор формы оплаты).
• Реализовать возможность восстановления пароля пользователя.
• Footer сайта должен быть на каждой странице.
• Страница Chekout.
• Реализовать поддержку пользователей, создать форму для обратной связи.
• Создать страницу с отзывами о сервисе.
• На главной странице реализовать карусель с самыми новыми отзывами.

Этапы работы:

1. Согласование макета.
2. Выбор технологий.
3. Настройка среды разработки:

• Создание доски Trello, удаленного репозитория на GitHub,
• Подключение библиотек, настройка EsLint, Husky.
• Подключение сервера к проекту.
• Настройка БД.

1. Декомпозиция задач.
2. Работа с MUI (настройка GlobalTheme).
3. Верстка React-компонентов.
4. Deploy client проекта на Netlify / server проекта на Heroku.
5. Написание логики к React-компонентам.
6. Редактирование и дополнение серверной логики для проекта.
7. Тестирование приложения.

Какие технологии были использованы:

Основные инструменты: React, MUI, Git, GitHub, MongoDB, Cloudinary, Heroku, Netlify.

Дополнительные инструменты: Axios, EsLint, Redux, React-Router.

Библиотеки: Swiper, Lodash, Formik, Yup, classnames, qs, Prop-types, Redux-persist, Redux-Toolkit, Babel, react-input-mask, Husky, SASS, Google-api, Redux-mock-store.

Тестирование: Jest, Testing-library/react.

Анна Штендера:

• подключение reset.scss,
• подключение и настройка husky,
• настройка GlobalTheme в MaterialUI,
• создан React-компонент Header с маршрутизацией,
• создан React-компонент custom Input,
• создана страница CustomerSupport с логикой обратной связи с пользователем, добавлена на сервере логика обработки обращений пользователей,
• добавлен preloader на приложение,
• добавлена кнопка ScrollToTop и восстановление скролла при переходе между страницами,
• добавлена логика регистрации пользователя,
• создание страницы CheckoutPage с логикой сбора данных пользователя и оформления заказа, автозаполнение формы для авторизованного пользователя, отправкой на почту письма,
• создание страниц PaymentPage и OrderConfirmation,
• написание логики пагинации, частичной загрузки и вывода блюд на страницу,
• написание фильтров через query-параметры для фильтрации и сортировки блюд,
• создан customHook useGetAPI,
• добавлена на сервере логика: фильтрации, сортировки и поиска ресторанов; фильтрации и сортировки отзывов; получения одного ресторана по id; получения списков названий всех продуктов и всех ресторанов;
• добавлена серверная логика для создания временной ссылки для сброса пароля, которая использует JWT токен, отправки письма с инструкциями, перезаписи старого пароля на новый,
• отредактировано в controller forgotPassword, и создано route и controller для resetPassword,
• стилизовано письмо с оформленным заказом и письмо для сброса забытого пароля,
• добавлен errorBoundary и создан компонент SomethingWentWrong для отрисовки при ошибке в работе приложения,
• тестирование reducer slices,
• review кода коллег.

Дмитрий Кудь:

• регистрация и создание БД MongoDB,
• создание google account и e-mail для работы команды с проектом и БД,
• создан React-компонент Footer с маршрутизацией,
• создан React-компонент Search с переключением поиска по ресторанам/блюдам, автозаполнением и логикой поиска,
• создан React-компонент Filter для фильтрации блюд по категориям, цене, популярности,
• создан React-компонент контейнер для Search, Filter, Swipper,
• написание запросов и сохранение фильтров в url через query параметры,
• создан React-компонент Sorter,
• создана страница AboutUs,
• настроено Jest, на покрытие приложения тестами,
• тестирование React-компонентов,
• review кода коллег.

Игорь Качер:

• наполнение MongoDB json с блюдами и партнерами,
• редактирование и дополнение макета,
• подключение fonts к проекту,
• написание логики авторизации пользователя на сайте,
• создан React-компонент Get Started Section,
• добавлена библиотека и настроена redux-persist,
• добавлено изображение в cloudinary.com, прописано URL на MongoDB,
• работа со SwiperBanner, стилизация,
• работа над стилизацией React-компонента ProductCard,
• создан React-компонент 404 page,
• .env переменные к клиенту и серверу,
• развертывание проекта,
• добавлен cors config,
• обернуто React-компоненты в memo,
• обзор кода коллег.

Оксана Ковтун:

• настройка GlobalTheme в MaterialUI,
• создан пере используемый React-компонент Modal,
• создана рабочая страница отдельного блюда ProductPage,
• создан React-компонент ReviewItem и использование его в карусели отзывов и на странице отзывов,
• добавлена возможность добавления нового отзыва, и отображения его на странице отзывов,
• реализовано карусель отзывов на главной странице приложения со скроллом и кнопками пролистывания отзывов, и переход на страницу Review с автоматическим скроллом к выбранному отзыву,
• реализовано частичную загрузку комментариев по принципу бесконечного скролла,
• созданы React-компоненты FavouriteIcon, FavouriteItem с логикой,
• создана Page Favourites, и реализовано добавление в любимые и удаление блюд из списка любимых,
• созданы формы для возможности восстановления пароля, модальное окно с уведомлением об отправке письма со ссылкой, на серверной стороне добавлен route, создано в controller forgotPassword,
• тестирование React-компонентов, review тестов и анализ результатов их выполнения,
• написание и стилизация Readme.md проекта,
• review кода коллег.

Роман Джавадов:

• организовано Routs, завернуто в BrowserRouter,
• подключен Redux Toolkit,
• создан React-компонент RestaurantItem,
• создан пере используемый React-компонент ListItem,
• создан React-компонент SwiperBanner с использованием библиотеки Swiper,
• создана и стилизована страница партнеров-ресторанов,
• создана и стилизована страница одного ресторана RestaurantPage,
• работа над созданием презентации,
• создан и использован Context и на его основе кастомный хук Alert для вывода уведомлений о действиях пользователя на страницах приложения,
• тестирование.

Степан Думенко:

• создан удаленный репозиторий на GitHub,
• добавлен backend согласно документации к репозиторию,
• настроено EsLint,
• подключены библиотеки необходимые для работы над проектом,
• настройка GlobalTheme в MaterialUI,
• верстка компонента ProductItem,
• работа над логикой добавления и удаления товаров из корзины,
• работа над созданием уведомлений о действиях пользователя на страницах приложения,
• подготовка и оформление презентации проекта.

Юрий Городний:

• верстка компонента формы регистрации с валидацией введенных данных,
• верстка компонента EatlyInfo,
• верстка компонента MobileApp,
• создана страница ReviewPage,
• написание логики авторизации через google account, использование Google-api,
• создан компонент Skeleton и добавлен ко всем элементам, загружаемым с сервера.
• тестирование forms.

Ярослав Грошев:

• верстка React-компонента формы LogIn с валидацией введенных данных,
• создана страница Cart,
• реализована возможность создания и удаления корзины для авторизованного пользователя,
• создан React-компонент выпадающего списка miniCart,
• работа над логикой добавления и удаления товаров из корзины,
• созданы instance interceptors с возможностью использования данных из state redux,
• написание кастомных хуков,
• реализована возможность оформления заказа из разных ресторанов,
• review кода коллег.

Сколько времени команда работала над проектом: 

Срок выполнения — 10 недель.