Repository files navigation

AquaTrack FrontEnd is a convenient water tracker that allows users to registervia email/password or Google account. All data is securely stored on our server.On the homepage, users can add, edit, and delete their water intake whiletracking their progress towards their daily goal. We automatically set adrinking goal but also allow users to customize their recommended intake. Ourprogram calculates the daily percentage of water consumed and displays progresstowards the goal.

• User registration and authentication via email/password or Google account.
• Secure storage of user data on the server.
• CRUD operations for water intake tracking.
• Automatic and customizable daily water intake goals.
• Calculation and display of daily water intake percentage.
• Progress tracking towards the set goal.

• Express: Fast, unopinionated, minimalist web framework forNode.js.
• MongoDB (via Mongoose):MongoDB object modeling tool designed to work inan asynchronous environment.
• JWT (JSON Web Tokens): Compact, URL-safe means of representing claims tobe transferred between two parties.
• Axios: Promise-based HTTP client for the browser andNode.js.
• bcrypt: Library to hash passwords.

• Joi: Schema description language and data validator forJavaScriptobjects.
• Swagger-jsdoc: Allows you to write OpenAPI specs usingJSDoc comments.
• Swagger-ui-express:Swagger UI middleware forExpress.

• EJS: Simple templating language that lets you generateHTML markup withplainJavaScript.

• Redux Toolkit: Opinionated, batteries-included toolset for efficient Reduxdevelopment.

• Material-UI:React components for faster and easier web development.
• Emotion/react:CSS-in-JS library for stylingReact applications.
• Emotion/styled: Styled components forEmotion.
• @hookform/resolvers: Resolvers forReact Hook Form.

• Cloudinary: Image and video management in the cloud.
• Date-fns: ModernJavaScript date utility library.
• Moment-timezone: Timezone support forJavaScript Date objectmanipulation.
• Multer:Node.js middleware for handlingmultipart/form-data, primarilyused for file uploads.
• UUID: Simple, fast generation of RFC4122 UUIDs.
• @aos: Animate onScroll library.
• clsx: A tiny utility for constructingclassName strings conditionally.
• overlayscrollbars: Customizable overlay scrollbars.
• react: AJavaScript library for building user interfaces.
• react-dom: Entry point forReact rendering on the web.
• react-helmet-async: Async version ofReact Helmet.
• react-hook-form: Performant, flexible and extensible forms witheasy-to-use validation.
• react-hot-toast:React toast notifications.
• react-i18next: Internationalization framework forReact.
• react-icons: Popular icon packs forReact projects.
• react-loader-spinner: A flexible and customisable loader component forReact.
• react-modal: Accessible modal dialog component forReact.
• react-redux: OfficialReact bindings forRedux.
• react-responsive: Media queries inReact for responsive design.
• react-router-dom: DOM bindings forReact Router.
• recharts: Redefined chart library built withReact and D3.
• redux-persist: Persist and rehydrate a Redux store.
• yup:JavaScript schema builder for value parsing and validation.
• vite: Next generation frontend tool that sets up quickly.

• @KristinaHranovska - implementation ofWelcomeSection,registration,authentication,Google authentication,passwordrecovery, internationallocalization addition,animations
• @izzwerg - implementation ofUserSettingsModal
• @Me1nychuk - implementation ofMonthInfocomponent, display ofstatistical water consumption data per month,onboarding functionality for new users, assistance in token refreshimplementation, data updates usingRedux
• @Olena-Ihnatenko -LogOut modal window
• @anastasiia-kushch - implementation ofstatic part ofAdvantagesSection, display of registered users count
• @sno0wi - implementation ofDailyInfo component
• @Sw1tlana - implementation ofWaterModal(addition and editing)
• @peychma - implementation ofDeleteWaterModal
• @bezkagoit - implementation ofWaterMainInfocomponent
• @Rybailo - implementation ofUserPanelcomponent

• GitHub Repository BackEnd
• GitHub Repository FronEnd
• Swagger UI
• Live link