Water Tracker is a web application that allows the user to track their daily water consumption. Water is the source of life. Adequate consumption of it is the basis of a healthy lifestyle. The water tracker helps to calculate the rate of consumption and monitor its compliance. With this application, you will be able to develop a good habit for your health and longevity.
-
Change the daily rate of water consumption. Calculate your personalized water intake based on your data and level of physical activity
-
Easily record and track your daily water consumption through our easy-to-use interface. Ease adding, updating, deleting a record of consumed water
-
Visually monitor the amount of water consumed in percentages, review the list of all records of water consumption by the user for the current day
-
Review your hydration progress with detailed statistics and in-depth analytics. Get information about the amount of water consumed for the selected month and day
-
Set personal hydration goals and track your progress, helping you feel accomplished and motivated
- React
- Redux
- Emotion
- Axios
- Formik
- Vite
- Mui-conponent
- NanoId
- Sonner
- Yup
- Git
- Modern-normalize
- Redux Persist
The app uses React Router for navigation.
/- Welcome page
Following this route is the main page of the application. Here you can learn about the benefits of drinking and the benefits of our tracker.
If you do not have an account yet, you can register by clicking on the Sign Up
button, which will redirect you to the registration page.
/login
Registration is extremely easy, enter your email address, password, repeat password and you are our new user. However, for our security and yours, you will have to undergo verification, for this just log in to your mail and open the letter from us.
If you already have an account, you can click Sign in and go to login. To log
in to the account, enter the email address you used to register and your
password. When you click on Sign In, you will be automatically redirected to
the Home page.
/home
The main page of our application is the home page. You get to it immediately after registration or login.
On the main page there is a settings block where you can manage your account, such as adding an avatar, changing your password or email.
To start quality use of the application, you need to determine the daily rate of
water consumption by clicking the Edit button in the "Daily rate" element.
Enter your data (gender, weight and level of physical activity) for the
calculation. Our application automatically calculates your daily rate according
to the formula that you can see at the top of the modal window.
If your level of physical activity or weight changes, you can always recalculate the new water rate.
Done! Now you can start tracking your drinking regime. For this, you need to add
the intake of water that you have consumed by clicking on the Add water. We
even have two of them, choose the one you like more.
Now, in the window that appears, enter the amount of water in milliliters and the time when you consumed it. After adding entries, you can edit or delete them in the list above the calendar.
In the calendar, you can view how much water you drank in the past days and whether you achieved your goal.
- Clone the repository:
git clone https://github.com/Denys90/runners_of_code__frontend - Install dependencies:
npm install - Start the app:
npm startornpm run dev - Open http://localhost:5173 in your browser.
The application utilizes a backend developed by our team.You can get acquainted with it here.
- @Denys Maksymchuk ||
- @Olga Tenison ||
- @Volodya Mikhnov ||
- @Anna Radchenko ||
- @Kateryna Slatina
||
- @Oleksandr
||
- @Mriika ||
- @Oleksii Katsal ||
- @Igor Konoval ||
- @Valentina Hotsa ||
Трекер води це веб-застосунок який дозволяє користувачеві слідкувати за своїм щоденним споживанням води. Вода - джерело життя. Достатнє споживання її це основа здорового способу життя. Трекер води допомагає вирахувати норму споживання та слідкувати за її додержанням. З цим додатком ви зможете виробити хорошу звичку для вашого здоровя та довголіття.
-
Змінa добової норми споживання води. Розрахуйте індивідуальне споживання води на основі ваших даних і рівня фізичної активності
-
Легко записуйте та відстежуйте щоденне споживання води через наш простий у використанні інтерфейс. Просте додавання, оновлення, видалення запису про спожиту воду
-
Візуальний контроль кількості спожитої води у відсотках, перегляд списку всіх записів споживання води користувачем за поточну добу
-
Переглядайте свій прогрес гідратації за допомогою докладної статистики та глибокої аналітики. Отримуйте інформацію про кількість спожитої води за обраний місяць і день
-
Встановлення особистих цілей гідратації та відстежування свого прогресу, яке допомагає вам почуватися більш мотивованим
- React
- Redux
- Emotion
- Axios
- Formik
- Vite
- Mui-conponent
- NanoId
- Sonner
- Yup
- Git
- Modern-normalize
- Redux Persist
Додаток використовує React Router для навігації.
/- Welcome page
За цим маршрутом йде головна сторінка додатку. Тут ви можете дізнатися про користь вживання води та переваги нашого трекера.
Якщо у вас ще немає облікового запису, ви можете зареєструватися, натиснувши
кнопку Sign Up, яка перенаправить вас на сторінку реєстрації.
/login
Реєстрація надзвичайно проста, введіть адресу електронної пошти, пароль, повторіть пароль і ви наш новий користувач. Однак для нашої та вашої безпеки вам доведеться пройти верифікацію, для цього просто увійдіть у свою пошту та відкрийте лист від нас.
Якщо у вас вже є обліковий запис, ви можете натиснути Sign In і перейти до
входу. Щоб увійти в обліковий запис, введіть адресу електронної пошти, яку ви
використовували для реєстрації, і пароль. Коли ви натиснете Sign In, ви будете
автоматично перенаправлені на домашню сторінку.
/home
Головною сторінкою нашого додатку є домашня сторінка. Ви потрапляєте на неї одразу після реєстрації або входу.
На головній сторінці знаходиться блок з налаштуваннями, де ви можете керувати своїм обліковим записом, наприклад додати аватар, змінити пароль чи пошту.
Для початку якісного використання додатку вам необхідно визначити добову норму
споживання води, натиснувши кнопку Edit в елементі "Daily rate". Для
розрахунку введіть свої дані (стать, вага та рівень фізичної активності). Наш
додаток автоматично розраховує вашу денну норму за формулою яку ви можете бачити
наверху модального вікна.
Якщо у вас змінитьcz рівень фізичної активності або вага ви завжди можете заново розрахувати нову норму споживання води.
Готово! Тепер ви можете починати відслідковувати ваш питний режим. Для цього вам
потрібно додати новий прийом води, яку ви спожили, натиснувши на Add water. Їх
у нас навіть дві, виберіть ту яка вам більше подобається.
Тепер у з'явившомуся вікні введіть кількість води в мілілітрах та час коли ви її спожили. Після додавання записів ви можете редагувати або видаляти їх в списку над календарем.
В календарі ви можете переглянути скільки води ви випивали в минулі дні та чи досягали ви поставленої мети.
- Клонуйте репозиторій:
git clone https://github.com/Denys90/runners_of_code__frontend - Встановіть залежності:
npm install - Запустіть програму:
npm startабоnpm run dev - Відкрийте http://localhost:5173 у своєму браузері.
Додаток використовує бекенд, розроблений нашою командою. Ознайомитися з ним можна тут.
- @Denys Maksymchuk ||
- @Olga Tenison ||
- @Volodya Mikhnov ||
- @Anna Radchenko ||
- @Kateryna Slatina
||
- @Oleksandr
||
- @Mriika ||
- @Oleksii Katsal ||
- @Igor Konoval ||
- @Valentina Hotsa ||
Water Tracker ist eine Webanwendung, mit der der Benutzer seinen täglichen Wasserverbrauch verfolgen kann. Wasser ist die Quelle des Lebens. Der ausreichende Verzehr davon ist die Grundlage für einen gesunden Lebensstil. Der Wassertracker hilft dabei, die Verbrauchsmenge zu berechnen und deren Einhaltung zu überwachen. Mit dieser Anwendung können Sie eine gute Gewohnheit für Ihre Gesundheit und Langlebigkeit entwickeln.
-
Ändern Sie den täglichen Wasserverbrauch. Berechnen Sie Ihre personalisierte Wasseraufnahme basierend auf Ihren Daten und dem Grad Ihrer körperlichen Aktivität
-
Erfassen und verfolgen Sie ganz einfach Ihren täglichen Wasserverbrauch über unsere benutzerfreundliche Oberfläche. Einfaches Hinzufügen, Aktualisieren und Löschen einer Aufzeichnung des verbrauchten Wassers
-
Überwachen Sie visuell die verbrauchte Wassermenge in Prozent und überprüfen Sie die Liste aller Aufzeichnungen zum Wasserverbrauch des Benutzers für den aktuellen Tag
-
Überprüfen Sie Ihren Hydratationsfortschritt mit detaillierten Statistiken und detaillierten Analysen. Erhalten Sie Informationen über die Wassermenge, die für den ausgewählten Monat und Tag verbraucht wurde
-
Legen Sie persönliche Ziele für die Flüssigkeitszufuhr fest und verfolgen Sie Ihre Fortschritte, damit Sie sich erfolgreich und motiviert fühlen
- React
- Redux
- Emotion
- Axios
- Formik
- Vite
- Mui-conponent
- NanoId
- Sonner
- Yup
- Git
- Modern-normalize
- Redux Persist
Die App nutzt React Router zur Navigation.
/– Willkommensseite
Wenn Sie dieser Route folgen, gelangen Sie zur Hauptseite der Anwendung. Hier erfahren Sie mehr über die Vorteile des Trinkens und die Vorteile unseres Trackers.
Wenn Sie noch kein Konto haben, können Sie sich registrieren, indem Sie auf die Schaltfläche „Anmelden“ klicken, die Sie zur Registrierungsseite weiterleitet.
/login
Die Registrierung ist ganz einfach: Geben Sie Ihre E-Mail-Adresse, Ihr Passwort und Ihr Passwort erneut ein und schon sind Sie unser neuer Benutzer. Zu unserer und Ihrer Sicherheit müssen Sie sich jedoch einer Verifizierung unterziehen. Melden Sie sich hierfür einfach bei Ihrem E-Mail-Konto an und öffnen Sie den Brief von uns.
Wenn Sie bereits ein Konto haben, können Sie auf „Anmelden“ klicken und zur Anmeldung gehen. Um sich beim Konto anzumelden, geben Sie die E-Mail-Adresse, mit der Sie sich registriert haben, und Ihr Passwort ein. Wenn Sie auf „Anmelden“ klicken, werden Sie automatisch zur Startseite weitergeleitet.
/home
Die Hauptseite unserer Anwendung ist die Startseite. Sie gelangen sofort nach der Registrierung bzw. dem Login dazu.
Auf der Hauptseite gibt es einen Einstellungsblock, in dem Sie Ihr Konto verwalten können, z. B. einen Avatar hinzufügen, Ihr Passwort oder Ihre E-Mail-Adresse ändern.
Um eine qualitativ hochwertige Nutzung der Anwendung zu starten, müssen Sie den täglichen Wasserverbrauch ermitteln, indem Sie im Element „Tagessatz“ auf die Schaltfläche „Bearbeiten“ klicken. Geben Sie für die Berechnung Ihre Daten (Geschlecht, Gewicht und körperliche Aktivität) ein. Unsere Anwendung berechnet Ihren Tagessatz automatisch gemäß der Formel, die Sie oben im Modalfenster sehen können.
Wenn sich Ihre körperliche Aktivität oder Ihr Gewicht ändern, können Sie die neue Wassermenge jederzeit neu berechnen.
Erledigt! Jetzt können Sie mit der Verfolgung Ihres Trinkregimes beginnen. Dazu müssen Sie die aufgenommene Wassermenge, die Sie verbraucht haben, hinzufügen, indem Sie auf die Nr. klicken. Wir haben sogar zwei davon, wählen Sie die aus, die Ihnen mehr gefällt.
Geben Sie nun im erscheinenden Fenster die Wassermenge in Millilitern und den Zeitpunkt des Konsums ein. Nachdem Sie Einträge hinzugefügt haben, können Sie diese in der Liste über dem Kalender bearbeiten oder löschen.
Im Kalender können Sie sehen, wie viel Wasser Sie in den vergangenen Tagen getrunken haben und ob Sie Ihr Ziel erreicht haben.
- Klonen Sie das Repository:
git clone https://github.com/Denys90/runners_of_code__frontend - Abhängigkeiten installieren: „npm install“.
- Führen Sie das Programm aus: „npm start“ oder „npm run dev“.
- Öffnen Sie http://localhost:5173 in Ihrem Browser.
Die Anwendung nutzt ein von unserem Team entwickeltes Backend. Sie können sich hier damit vertraut machen.
- @Denys Maksymchuk ||
- @Olga Tenison ||
- @Volodya Mikhnov ||
- @Anna Radchenko ||
- @Kateryna Slatina
||
- @Oleksandr
||
- @Mriika ||
- @Oleksii Katsal ||
- @Igor Konoval ||
- @Valentina Hotsa ||