Mizu (水) is an application to help you track your water-drinking habits. Human body is made of 60% water, so keeping yourself hydrated is a must. In average, you should drink around 8 glasses of water every day, and maybe more if you are more active during the day.

This application focuses on improving my skills on several topics: progressive web applications, simple and responsive design, front-end unit tests, web performance, time to first draw, internationalization, user interface/experience, web accessibility, search engine optimization, semantic HTML, trying out a new React project structure.

A little trivia: Did you know that 水 (みず) means 'water' in Japanese?

Check out the application by clicking me. You'll be redirected to the application.

I realized that most 'water-reminder' applications are either proprietary, locked behind a subscription, or require you to register before using it. This application allows you to track your water-drinking habits without having to perform those three activities. On other hand, aside from my personal use, I also want to create an application to hone my skills on topics written above.

• User should be able to press a button to tell the system that they have drunk a glass of water.
• User should be able to see their intakes of water for today, and it shall reset tomorrow.
• User can change the application theme, language, and font.

This is purely a front-end application which is powered by your browser only.

• React as the main driver.
• Styled Components as the design choice.
• Local Storage as the makeshift database.
• Vercel for deployment.
• GitHub Actions to ensure Continuous Integration and Delivery.

Every React component in this repository (stored in both pages and components), with the exception of Common (which is used to store singletons of reusable components), has the following structure:

• Component is named according to its responsibility / corresponding entity.
• Component.test.tsx as the unit-test for the related component.
• Component.tsx to place the component's 'blocks'.
• index.tsx as the default export.
• styles.tsx as the styling with styled-components.

You need Node.js and Yarn. Please install Node.js and do npm i --location=global yarn to install the yarn package manager.

In order to develop, please follow the following steps:

git clone [email protected]:lauslim12/mizu.git
cd mizu
yarn install --frozen-lockfile
yarn start

Just in case you want to see the production version without having either Node.js or Yarn nor seeing the live version, you may use Docker as well!

docker build . -t mizu:latest
docker run -d -p 3000:80 mizu:latest

You may look at tests by using yarn test. It will run the test suite accordingly. To keep in mind, React Testing Library is used to perform integration tests, so implementation details and the like are not tested. If you look at the package.json file, you can see that I only tested the React components which users are probably going to experience / feel during their usage of this application.

• The water drop icon is from Freepik.
• Drinking water image is from Unsplash (Giorgio Trovato).

MIT License. Please see the LICENSE file for more information.