Water Tracker is an application for tracking and analyzing water consumption. The application allows users to enter data about their water intake, view statistics for different periods, and receive recommendations for maintaining a healthy hydration level.
-
Registration and account management.
-
Determining daily water consumption norm based on personal activity and physical condition.
-
Entering data about water consumption.
-
Displaying daily, weekly, and monthly water consumption statistics.
-
Graphical representation of data.
-
Viewing water consumption history. Installation and Launch
- Clone the repository
git clone: https://github.com/WAYLIIKE/watertrack-project-nodejs-react.git
- Install dependencies
npm install
- Launch the application
npm run dev
The application uses the react-router-dom library for routing management. The routes used in the application are described below:
- / - HomePage
The homepage contains the app's logo, main background image, a static list of app benefits, dynamic display of the total number of users, and the total amount of water consumed by all users. It includes links that redirect the user to the registration and login pages.
- /signup - SignUpPage
The registration page allows new users to create an account in the application. It contains a form to enter the necessary information and a button to submit the data. A notable feature is the convenient password preview functionality.
- /signin - SignInPage
The login page allows existing users to sign in to their accounts. It contains a form to enter the email and password, along with a button to submit the data.
- /tracker - TrackerPage
The tracker page is the main functional page of the application. It allows users to track their water consumption, view daily and monthly data, and add new water consumption records. It includes a user panel displaying a greeting, photo, application settings access, and the ability to set the daily water consumption norm according to personal needs. A notable feature is the ability to view water consumption both as a percentage and in graphical form.
- NotFoundPage
The error page, also known as the 404 page, is displayed when the user tries to navigate to a non-existent route. It informs the user that the requested page was not found and provides an option to return to the homepage.
-
React: An open-source JavaScript library for building user interfaces, primarily for single-page applications, where it is used for handling the view layer for web and mobile apps.
-
Redux: An open-source JavaScript library for managing application state. It stores the state of the entire application in a single tree, making debugging and testing easier.
-
Recharts: A library for creating charts and graphs.
-
date-fns: A library for working with dates.
-
CSS Modules: Locally-scoped CSS for components.
-
Axios: A promise-based HTTP client for the browser and Node.js. Axios provides a simple-to-use library in a small package with a very extensible interface.
-
Vite: A build tool that serves your code locally.
-
Node.js: A server-side JavaScript runtime environment. Developers can use the same programming language for both the front-end and back-end parts of web applications.
-
Express: A simple and flexible web framework for Node.js that provides powerful tools for creating server-side applications and APIs. Mongoose: An Object Data Modeling (ODM) library for MongoDB and Node.js. It provides a schema-based solution for modeling application data.
-
Swagger-ui-express: A library to integrate Swagger UI with an Express application, making it easy to document APIs.
And others ...
Team Lead - Valentyn Savytskyi
Scrum Muster - Iryna Lender
Трекер води - це додаток для відстеження та аналізу споживання води. Додаток дозволяє користувачам вводити дані про спожиту воду, переглядати статистику за різні періоди, а також отримувати рекомендації щодо підтримання здорового рівня гідратації.
- Реэстрація власного акаунту та управління ним.
- Визначення денної норми споживання води на підставі власної активності та фізичної форми.
- Введення даних про споживання води.
- Відображення щоденної, щотижневої та щомісячної статистики споживання води.
- Графічне відображення даних.
- Можливість перегляду історії споживання води.
- Клонувати репозиторій
git clone: https://github.com/WAYLIIKE/watertrack-project-nodejs-react.git
- Встановити залежності:
npm install
- Запустити додаток:
npm run dev
Додаток використовує бібліотеку react-router-dom для керування маршрутизацією. Нижче описані маршрути, які використовуються в додатку:
- / - HomePage.
Сторінка ,що містить логотип додатку, головне фонове зображення, статичний список переваг використання застосунку, динамічне відображення загальної кількості користувачів та загальну кількість випитої води всіма користувачами. Містить посилання , що перенаправляють користувача на сторінки реєстрації та авторизації.
- /signup - SignUpPage
Сторінка реєстрації дозволяє новим користувачам створити обліковий запис у додатку. Вона містить форму для введення необхідної інформації та кнопку для надсилання даних. Особливістю є зручний функціонал перегляду паролю
- /signin - SignInPage
Сторінка авторизації дозволяє існуючим користувачам увійти до своїх облікових записів у додатку. Вона містить форму для введення електронної пошти та пароля,а також кнопку для надсилання даних.
- /tracker - TrackerPage
Сторінка трекера є головною функціональною сторінкою додатку . Вона надає користувачам можливість відстежувати споживання води, переглядати щоденні та місячні дані, а також додавати нові записи про споживану воду. Містить функціональну панель користувача, де відображається: привітання, фото, можливість скористатися налаштуваннями додатку, та визначити добову норму споживання води згідно з вашими потребами. Особливістю є можливість переглянути об'єм спожитої води ,як у відсотках так і у вигляді графічних данних.
- NotFoundPage
Сторінка помилки, також відома як сторінка 404, відображається у випадках, коли користувач намагається перейти за маршрутом, який не існує. Вона повідомляє користувача про те, що запитана сторінка не знайдена, і надає можливість повернутися на головну сторінку.
-
React: відкрита JavaScript бібліотека для створення інтерфейсів користувача, яка покликана вирішувати проблеми часткового оновлення вмісту вебсторінки, з якими стикаються в розробці односторінкових застосунків
-
Redux: відкрита JavaScript бібліотека призначена для керування станом програм JavaScript.Redux зберігає стан всього застосунку в дереві об'єктів в одному сховищі. Одне дерево станів полегшує налагодження або перевірку програми; це також дозволяє зберігати стан вашого застосунку в процесі розробки, для прискорення циклу розробки.
-
Recharts: Бібліотека для створення графіків і діаграм.
-
date-fns: Бібліотека для роботи з датами.
-
CSS Modules: Локально-обмежені стилі для компонентів
-
Axios: HTTP-клієнт для браузера та node.js на основі Promise. Axios надає просту у використанні бібліотеку в невеликому пакеті з дуже розширюваним інтерфейсом.
-
Vite: це локальний сервер розробки.
-
Node.js :це середовище виконання JavaScript на стороні сервера. Pозробники можуть використовувати ту саму мову програмування як для front-end, так і для back-end частини вебзастосунків, над якими вони працюють.
-
Express: Простий і гнучкий веб-фреймворк для Node.js, який забезпечує потужні можливості для створення серверних додатків та API.
-
Mongoose: Об'єктно-документний маппер (ODM) для MongoDB, який дозволяє легко працювати з базами даних, використовуючи схеми та моделі.
-
Swagger-ui-express: Бібліотека для інтеграції Swagger UI з Express додатком, що дозволяє легко документувати API.
Team Lead - Valentyn Savytskyi
Scrum Muster - Iryna Lender