Water Tracker

[EN] Hydration Helper: Your Path to Healthier Living

The Hydration Helper app is a user-centric tool designed to promote healthy living by helping you track your daily water consumption. Recognizing the crucial role of hydration in overall health, this app simplifies the process of monitoring and enhancing your drinking habits.

[UA] Hydration Helper: Ваш шлях до здоровішого життя

Додаток Hydration Helper - це інструмент, орієнтований на користувача, призначений для підтримки здорового способу життя шляхом допомоги вам у відстеженні щоденного споживання води. Визнаючи вирішальну роль гідратації в загальному здоров'ї, цей додаток спрощує процес моніторингу та покращення ваших звичок пиття.

Contents / Зміст

  • App Highlights / Основні особливості
  • Navigation / Навігація
  • Team Members / Члени команди
  • Setup Instructions / Інструкції з налаштування
  • Technology Stack / Технологічний стек
  • API Integration / Інтеграція API

[EN] App Highlights

  • Tailored Hydration Tips: Get bespoke hydration advice based on your lifestyle and physical activities.
  • Easy Tracking: Log and monitor your water intake effortlessly with our straightforward interface.
  • Hydration Trends: Track your hydration journey with comprehensive statistics and meaningful insights.
  • Goal-Oriented: Set and pursue personal hydration targets, reinforcing your commitment to health.
  • Learning Hub: Discover extensive information about the significance of hydration, including its role in the body and the benefits of a consistent hydration plan.

[UA] Основні особливості

  • Індивідуальні поради щодо гідратації: Отримуйте особистісні поради щодо гідратації, засновані на вашому способі життя та фізичних активностях.
  • Легке відстеження: Логуйте та моніторьте ваше споживання води без зусиль з нашим простим інтерфейсом.
  • Тренди гідратації: Відстежуйте ваш шлях гідратації з допомогою всебічної статистики та значущих усвідомлень.
  • Орієнтованість на ціль: Встановлюйте та переслідуйте особисті цілі гідратації, підтверджуючи ваше зобов'язання здоров'ю.
  • Навчальний центр: Відкрийте для себе обширну інформацію про значення гідратації, включаючи її роль у тілі та переваги послідовного плану гідратації.

[EN] Navigation

Navigate with ease using React Router. Our key paths include:

  • / - Welcome Page: Embrace a healthier lifestyle with Hydration Helper! Our welcoming page offers an overview of the app’s benefits and underscores the importance of hydration. It provides tools for tracking and enhancing your daily water intake with custom advice and progress analysis. Choose to register for full access or log in if you're an existing user. Customize your experience and maximize the app's potential for your wellness.
  • /signup - Registration Page: To sign up, enter your email and set a secure password. Note: Passwords must be at least 6 characters and contain a Latin letter. Re-enter to confirm. Already a user? Head over to the login page.
  • /signin - Login Page: Log in using your email and previously set password. New here? Jump to the registration page.
  • /home - Main Page: After logging in, the main page becomes your command center for account management and water balance tracking. Set your daily water goal by entering pertinent details like gender, weight, and activity level. The app calculates your optimal intake, or use our formula for a manual calculation. Log your water intake in the table, noting the amount and time. Remember: No simultaneous or zero entries allowed. Edit or delete entries as needed. The integrated calendar helps you visualize daily consumption percentages.

[UA] Навігація

Навігуйте з легкістю, використовуючи React Router. Наші ключові шляхи включають:

  • / - Вступна сторінка: Прийміть здоровіший спосіб життя з Hydration Helper! Наша вітаюча сторінка пропонує огляд переваг додатку та підкреслює важливість гідратації. Вона надає інструменти для відстеження та покращення вашого щоденного споживання води з персоналізованими порадами та аналізом прогресу. Виберіть реєстрацію для повного доступу або увійдіть, якщо ви вже є користувачем. Налаштуйте свій досвід та максимізуйте потенціал додатку для вашого благополуччя.
  • /signup - Сторінка реєстрації: Щоб зареєструватися, введіть свою електронну пошту та встановіть надійний пароль. Примітка: Паролі повинні містити принаймні 6 символів та містити латинську літеру. Повторно введіть для підтвердження. Вже є користувачем? Перейдіть на сторінку входу.
  • /signin - Сторінка входу: Увійдіть, використовуючи свою електронну пошту та раніше встановлений пароль. Тут новачок? Перейдіть на сторінку реєстрації.
  • /home - Головна сторінка: Після входу головна сторінка стає вашим командним центром для управління обліковим записом та відстеження водного балансу. Встановіть свою щоденну водну мету, ввівши відповідні дані, такі як стать, вага та рівень активності. Додаток розраховує ваш оптимальний прийом, або використовуйте нашу формулу для ручного розрахунку. Записуйте ваше споживання води у таблиці, зазначаючи кількість та час. Пам'ятайте: Не допускаються одночасні або нульові записи. Редагуйте або видаляйте записи за потреби. Інтегрований календар допомагає вам візуалізувати відсотки щоденного споживання.

[EN] Team Members

Front End

Back End

[UA] Члени команди

Фронтенд

Бекенд

[EN] Setup Instructions

Get the app running locally:

  1. Clone the repo: git clone https://github.com/Anzhela-Ostrovska1/goit-group2-react-nodejs
  2. Install dependencies: npm install
  3. Launch the app: npm run dev
  4. Visit http://localhost:5173 in your browser (adjust if port 5173 is in use).

[UA] Інструкції з налаштування

Отримайте додаток, який працює локально:

  1. Клонуйте репозиторій: git clone https://github.com/Anzhela-Ostrovska1/goit-group2-react-nodejs
  2. Встановіть залежності: npm install
  3. Запустіть додаток: npm run dev
  4. Відвідайте http://localhost:5173 у вашому браузері (налаштуйте, якщо порт 5173 використовується).

[EN] Technology Stack

  • React for UI
  • Redux Toolkit for state management
  • React Router for navigation
  • Axios for API interactions
  • Vite for building

[UA] Технологічний стек

  • React для UI
  • Redux Toolkit для управління станом
  • React Router для навігації
  • Axios для взаємодії з API
  • Vite для будівництва

[EN] API

Our app uses a custom-built backend. Backend link: https://github.com/yaromatv/watertracker-backend

[UA] API

Наш додаток використовує спеціально розроблений бекенд. Посилання на бекенд: https://github.com/yaromatv/watertracker-backend