diff --git a/README.md b/README.md index 4587d1b..8badebf 100644 --- a/README.md +++ b/README.md @@ -1,117 +1,89 @@ -# React + Vite template - -Цей проєкт було створено за допомогою [Create Vite](https://vitejs.dev/). Для -знайомства і налаштування додаткових можливостей -[звернися до документації](https://vitejs.dev/guide/). - -## Створення репозиторію за шаблоном - -Використовуй цей репозиторій організації GoIT як шаблон для створення -репозиторію свого проєкту. Для цього натисни на кнопку `"Use this template"` і -обери опцію `"Create a new repository"`, як показано на зображенні. - -![Creating repo from a template step 1](./assets/template-step-1.png) - -На наступному кроці відкриється сторінка створення нового репозиторію. Заповни -поле його імені, переконайся що репозиторій публічний, після чого натисни кнопку -`"Create repository from template"`. - -![Creating repo from a template step 2](./assets/template-step-2.png) - -Після того як репозиторій буде створено, необхідно перейти в налаштування -створеного репозиторію на вкладку `Settings` > `Actions` > `General` як показано -на зображенні. - -![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png) - -Проскроливши сторінку до самого кінця, у секції `"Workflow permissions"` вибери -опцію `"Read and write permissions"` і постав галочку в чекбоксі. Це необхідно -для автоматизації процесу деплою проєкту. - -![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png) - -Тепер у тебе є особистий репозиторій проєкту, зі структурою файлів і папок -репозиторія-шаблону. Далі працюй з ним як з будь-яким іншим особистим -репозиторієм, клонуй його собі на комп'ютер, пиши код, роби комміти і відправляй -їх на GitHub. - -## Підготовка до роботи - -1. Переконайся, що на комп'ютері встановлена LTS-версія Node.js. - [Скачай і встанови](https://nodejs.org/en/) її якщо необхідно. -2. Встановіть базові залежності проекту командою `npm install`. -3. Запустіть режим розробки, виконавши команду `npm run dev`. -4. Перейди в браузері за адресою, що зазначено в терміналі. - -## Деплой - -Продакшн версія проєкту буде автоматично збиратися і деплоїтися на GitHub Pages, -у гілку `gh-pages`, щоразу, коли оновлюється гілка `main`. Наприклад, після -прямого пушу або прийнятого пул-реквесту. Для цього необхідно у файлі -`vite.config.js` відредагувати поле `base`, замінивши `react_vite` на свою назву -репозиторію `"/your_repo_name"`, і відправити зміни на GitHub. - -Далі необхідно зайти в налаштування GitHub-репозиторію (`Settings` > `Pages`) і -виставити роздачу продакшн версії файлів із папки `/root` гілки `gh-pages`, якщо -це не було зроблено автоматично. - -![GitHub Pages settings](./assets/repo-settings.png) - -### Статус деплоя - -Статус деплою крайнього коміту відображається іконкою біля його ідентифікатора. - -- **Жовтий колір** - виконується збірка і деплой проєкту. -- **Зелений колір** - деплой завершився успішно. -- **Червоний колір** - під час збирання або деплою сталася помилка. - -Детальнішу інформацію про статус можна подивитися, клікнувши на іконку, і в -випадаючому вікні перейти за посиланням `Details`. - -![Deployment status](./assets/deploy-status.png) - -### Жива сторінка - -Через якийсь час, зазвичай кілька хвилин, живу сторінку можна буде подивитися за -адресою, вказаною в налаштуваннях GitHub-репозиторію (`Settings` > `Pages`). - -![GitHub-pages URL](./assets/gh-pages-url.png) - -Якщо відкривається порожня сторінка, переконайся що у вкладці `Console` немає -помилок пов'язаних із неправильними шляхами до CSS і JS файлів проекту -(**404**). Швидше за все найімовірніше, у тебе неправильне значення поля `base` -у файлі `vite.config.js`. - -### Маршрутизація - -Якщо додаток використовує бібліотеку `react-router-dom` для маршрутизації, -необхідно додатково налаштувати компонент ``, передавши в пропе -`basename` точну назву твого репозиторію. Слеш на початку рядка обов'язковий. - -```jsx - - - -``` - -### Додавання змінних в .env - -Для зберігання конфігураційних даних, таких як API ключі, адреси серверів, порти -та інші змінні використовуйте файл `.env`. Для цього необхідно з назви файлу -`.env.template` видалити зайві ".template",після чого файл відповідатиме умовам -файлу `.ignore` і буде зберігатися лише локально, не публікуючись на віддаленому -репозиторії з метою безпеки. Задля використання змінних на GitHub-pages усі -змінні, передбачені файлом .env, слід додати до файлу -`.github/workflows/deploy.yml`, а також до налаштувань репозиторію. Для цього -слід перейти (`Settings` > `Secrets and variables` > `Actions`) - -![Add enviroments from .env](./assets/secrets.png) - -## Як це працює - -1. Після кожного пушу в гілку `main` GitHub-репозиторію, запускається - спеціальний скрипт (GitHub Action) з файлу `.github/workflows/deploy.yml`. -2. Усі файли репозиторію копіюються на сервер, де проєкт ініціалізується і - проходить збірку перед деплоєм. 3 Якщо всі кроки пройшли успішно, зібрана - продакшн-версія файлів проєкту відправляється в гілку `gh-pages`. В іншому - випадку, в логах виконання скрипта буде вказано в чому проблема. +![preview-hw](./assets//preview.jpg) + +# HealthyHub (App) + +**Team project.** +**Title:** HealthyHub +**Target:** app development according to the design layout using the Vite +bundler. +**Description:** HealthyHub is a app-tracker for those who monitor their diet. + +Depending on your weight, height, age, and goals, the app provides personalized +recommendations for calorie and water consumption. It also shows in the form of +pie charts how much of the recommendations for daily calorie, carbohydrate, +protein, and fat intake have been met. + +The app allows you to: + +👉 keep a food diary (add, correct and delete foods that were consumed during +the day); +👉 keep track of the amount of calories and water consumed by month, as well as +track your weight; +👉 view a list of suggested foods with information on the calorie content per +100 grams of food; +👉 change information and add an avatar in the user profile; +👉 change the login password; +👉 delete a user from the application. + +**Skills:** HTML/CSS, JavaScript, React/Router DOM, Redux/toolkit/persist, +Axios, Chart.js, Formik/Yup, Styled-components, Figma, Git/GitHub, Vite, Postman +, Teamwork. + +**Basic functionality:** + +- Designed according to the mobile-first approach. +- Implemented layout with three fractures (for mobile devices, tablets, and + desktop). +- The layout is valid. +- Compliance with semantics in accordance with HTML5 standards. +- Connecting fonts using font-face. +- Optimization of vector and raster graphics sizes. +- Optimization of image loading. +- Added display of the page favicon for browsers and app icons for mobile + devices. +- Providing support for displaying images for retina screens. +- Implementation of the frontend-y project on Vite + React (Build - github.com). +- Implementation of the backend-y project on Node.js (Build - render.com). + +# HealthyHub (App) + +**Командний проект.** +**Назва:** HealthyHub +**Ціль:** розробка додатку згідно дизайн-макету з використанням збірника Vite. +**Опис:** Трекер-додаток «HealthyHub» для тих, хто слідкує за своїм харчуванням. + +Залежно від ваги, зросту, віку та поставлених цілей додаток надає +персоналізовані рекомендації по споживанню калорій та води. А також показує у +вигляді кругових діаграм на скільки рекомендації по щоденному споживанню +калорій, вуглеводів, білків і жирів були досягнуті. + +В додатку є можливість: +👉 вести щоденник харчування (додавати, корегувати та видаляти продукти які були +спожитті протягом дня); +👉 відслідковувати за місяцями спожиту кількість калорій та води, а також +відстежувати свою вагу; +👉 переглянути перелік запропонованих продуктів харчування з інформацією про +вміст калорій на 100г продукту; +👉 змінювати інформацію та додавати аватарку в профілі користувача; +👉 змінювати пароль для входу; +👉 видалення користувача з додатку. + +**Навички:** HTML/CSS, JavaScript, React/Router DOM, Redux/toolkit/persist, +Axios, Chart.js, Formik/Yup, Styled-components, Figma, Git/GitHub, Vite, Postman +, Teamwork. + +**Базовий функціонал:** + +• Розроблено по макету відповідно до підходу mobile-first. +• Реалізована верстка з трьома переломами (для мобільних девайсів, планшетів та +десктопу). +• Верстка валідна. +• Дотримання семантики відповідно до стандартів HTML5. +• Підключення шрифтів за допомогою font-face. +• Оптимізація розмірів векторної та растрової графіки. +• Оптимізація завантаження зображень. +• Додано відображення фавікону сторінки для браузерів та іконок додатку для +мобільних пристроїв. +• Забезпечення підтримки відображення картинок для retina-екранів. +• Реалізація frontend-y проекту на Vite + React (Build - github.com). +• Реалізація backend-y проекту Node.js (Build - render.com). diff --git a/assets/deploy-status.png b/assets/deploy-status.png deleted file mode 100644 index 4bd90f4..0000000 Binary files a/assets/deploy-status.png and /dev/null differ diff --git a/assets/gh-actions-perm-1.png b/assets/gh-actions-perm-1.png deleted file mode 100644 index 3ea06ba..0000000 Binary files a/assets/gh-actions-perm-1.png and /dev/null differ diff --git a/assets/gh-actions-perm-2.png b/assets/gh-actions-perm-2.png deleted file mode 100644 index 40f9fec..0000000 Binary files a/assets/gh-actions-perm-2.png and /dev/null differ diff --git a/assets/gh-pages-url.png b/assets/gh-pages-url.png deleted file mode 100644 index f32d6ab..0000000 Binary files a/assets/gh-pages-url.png and /dev/null differ diff --git a/assets/preview.jpg b/assets/preview.jpg new file mode 100644 index 0000000..d9a6a9d Binary files /dev/null and b/assets/preview.jpg differ diff --git a/assets/repo-settings.png b/assets/repo-settings.png deleted file mode 100644 index da57294..0000000 Binary files a/assets/repo-settings.png and /dev/null differ diff --git a/assets/secrets.png b/assets/secrets.png deleted file mode 100644 index 9c88bec..0000000 Binary files a/assets/secrets.png and /dev/null differ diff --git a/assets/template-step-1.png b/assets/template-step-1.png deleted file mode 100644 index 2dbfa33..0000000 Binary files a/assets/template-step-1.png and /dev/null differ diff --git a/assets/template-step-2.png b/assets/template-step-2.png deleted file mode 100644 index 7d3930f..0000000 Binary files a/assets/template-step-2.png and /dev/null differ diff --git a/src/components/Diary/DiaryItem/DiaryItem.jsx b/src/components/Diary/DiaryItem/DiaryItem.jsx index 0e378da..6496fcc 100644 --- a/src/components/Diary/DiaryItem/DiaryItem.jsx +++ b/src/components/Diary/DiaryItem/DiaryItem.jsx @@ -79,15 +79,15 @@ export default function DiaryItem({ data, meals }) { Carbonohidrates: - {data.carbohydrate} + {Math.round(data.carbohydrate)} Protein: - {data.protein} + {Math.round(data.protein)} Fat: - {data.fat} + {Math.round(data.fat)} { [calories, baseCalories] ); - const arcColor = calories >= baseCalories ? 'red' : 'rgba(69, 255, 188, 1)'; + const arcColor = + calories >= baseCalories ? '#e74a3b' : 'rgba(69, 255, 188, 1)'; const borderRad = calories >= baseCalories ? [0] : [50]; const data = { @@ -69,8 +70,8 @@ const DoughnutCalories = ({ calories, baseCalories }) => {
diff --git a/src/components/Food/Food.jsx b/src/components/Food/Food.jsx index 856fef3..2028763 100644 --- a/src/components/Food/Food.jsx +++ b/src/components/Food/Food.jsx @@ -1,6 +1,5 @@ -import React, { useEffect } from 'react'; import { HeadlineSecond } from '../StyledComponents/Components.styled'; -import { useDispatch, useSelector } from 'react-redux'; +import { useSelector } from 'react-redux'; import { selectDiaryInfo } from '../../redux/diary/selectors'; import { getTotalNutrients } from '../../helpers'; import { selectUserInfo } from '../../redux/auth/selectors'; @@ -10,8 +9,6 @@ import DoughnutNutrients from './Doughnuts/DoughnutNutrients'; import Loader from '../Loader/Loader'; export default function Food() { - const dispatch = useDispatch(); - const { fat: baseFat, protein: baseProtein, @@ -31,7 +28,10 @@ export default function Food() { ) : ( - + +
+ Please wait a moment... + +
+ The first request may take some time... Don't worry, that's because we + use a free deployment service for our backend. +
+
+ Web services on free instances automatically “fall asleep” after 15 + minutes of inactivity. When a new request comes in for the free + service, the service is started again so that it can process the + request. This may cause a delay in the first response. + + +
+ + ); +} + +// import LoadingModal from '../Loader/LoadingModal'; +// {isLoading && }