{"id":27612785,"url":"https://github.com/lauslim12/mizu","last_synced_at":"2026-04-18T02:32:58.572Z","repository":{"id":44961519,"uuid":"513164682","full_name":"lauslim12/mizu","owner":"lauslim12","description":"💧 水 - PWA to track your water-drinking habits. Unit-tested, performant, i18n, SEO, a11y, semantics, responsive. App is live!","archived":false,"fork":false,"pushed_at":"2022-07-20T17:35:02.000Z","size":549,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-04T11:22:57.701Z","etag":null,"topics":["javascript","pwa","react","react-testing-library","typescript","water","website"],"latest_commit_sha":null,"homepage":"https://mizu.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lauslim12.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-12T13:59:39.000Z","updated_at":"2022-07-31T13:18:37.000Z","dependencies_parsed_at":"2022-07-13T11:10:28.854Z","dependency_job_id":null,"html_url":"https://github.com/lauslim12/mizu","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lauslim12/mizu","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lauslim12%2Fmizu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lauslim12%2Fmizu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lauslim12%2Fmizu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lauslim12%2Fmizu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lauslim12","download_url":"https://codeload.github.com/lauslim12/mizu/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lauslim12%2Fmizu/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31953784,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","pwa","react","react-testing-library","typescript","water","website"],"created_at":"2025-04-23T01:55:54.578Z","updated_at":"2026-04-18T02:32:58.556Z","avatar_url":"https://github.com/lauslim12.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mizu\n\nMizu (水) 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.\n\nThis 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.\n\nA little trivia: Did you know that 水 (みず) means 'water' in Japanese?\n\nCheck out the application by [clicking me](https://mizu.vercel.app). You'll be redirected to the application.\n\n## Motivation\n\nI 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.\n\n## Features\n\n- User should be able to press a button to tell the system that they have drunk a glass of water.\n- User should be able to see their intakes of water for today, and it shall reset tomorrow.\n- User can change the application theme, language, and font.\n\n## Technologies\n\nThis is purely a front-end application which is powered by your browser only.\n\n- React as the main driver.\n- Styled Components as the design choice.\n- Local Storage as the makeshift database.\n- Vercel for deployment.\n- GitHub Actions to ensure Continuous Integration and Delivery.\n\n## Structure\n\nEvery 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:\n\n- Component is named according to its responsibility / corresponding entity.\n- `Component.test.tsx` as the unit-test for the related component.\n- `Component.tsx` to place the component's 'blocks'.\n- `index.tsx` as the default export.\n- `styles.tsx` as the styling with `styled-components`.\n\n## Requirements\n\nYou need Node.js and Yarn. Please install Node.js and do `npm i --location=global yarn` to install the `yarn` package manager.\n\n## Development\n\nIn order to develop, please follow the following steps:\n\n```bash\ngit clone git@github.com:lauslim12/mizu.git\ncd mizu\nyarn install --frozen-lockfile\nyarn start\n```\n\nJust 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!\n\n```bash\ndocker build . -t mizu:latest\ndocker run -d -p 3000:80 mizu:latest\n```\n\n## Tests\n\nYou 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.\n\n## Credits\n\n- The water drop icon is from [Freepik](https://www.flaticon.com/free-icons/water-drop).\n- Drinking water image is from [Unsplash (Giorgio Trovato)](https://unsplash.com/photos/Q7YJG5jJU8A).\n\n## License\n\nMIT License. Please see the `LICENSE` file for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flauslim12%2Fmizu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flauslim12%2Fmizu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flauslim12%2Fmizu/lists"}