Проєкт Eatly

Проєкт “Eatly” — це шлях до неймовірних кулінарних вражень, де кожен може замовити улюблену їжу з різноманітних ресторанів просто в один дотик. Зручність, різноманіття та швидкість — це три складові, які роблять наш додаток ідеальним вибором для тих, хто цінує витончений смак та комфорт в кожному замовленні.

Які були поставлені завдання: 

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

Етапи роботи:

• Узгодження макета.
• Вибір технологій.
• Налаштування середовища розробки:

1. Створення дошки Trello, віддаленого репозиторію на GitHub,
2. Підключення бібліотек, налаштування EsLint, Husky.
3. Підключення сервера до проєкту.
4. Налаштування БД.

• Декомпозиція завдань.
• Робота з MUI (налаштування GlobalTheme).
• Верстка React-компонентів.
• Deploy client проєкту на Netlify / server проєкту на Heroku.
• Написання логіки до React-компонентів.
• Редагування та доповнення серверної логіки для проєкту.
• Тестування додатка.

Які технології були використані:

Основні інструменти: 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,
• створено page AboutUs,
• налаштовано Jest, на покриття додатка тестами,
• тестування React-компонентів,
• review коду колег.

Ігор Качер:

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

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

• налаштування 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 тижнів.