/fusa-period-tracking

Open-source gender neutral period tracking app that leaves data management in it's totally to the end user

Primary LanguageTypeScriptMIT LicenseMIT

FUSA Deployment Validation

An open-source gender-neutral period-tracking app that leaves data management in it's totally to the end user.

โœจ Inspiration

From Jessica Khoury's tweet https://twitter.com/jkbibliophile/status/1540345161955385345

Delete your period tracking apps today.

๐Ÿ“‘ Contents

  1. ๐Ÿ“ฐ Description
  2. ๐Ÿ“š Documentation
  3. ๐Ÿงฑ Tech Stack
  4. ๐ŸŒ‡ Architecture
  5. ๐Ÿ’ก Objectives and requirements
  6. ๐Ÿ—ฝ Product
    1. ๐Ÿ˜ฅ Description
    2. ๐Ÿค” Why?
    3. ๐Ÿ“ˆ Roadmap
  7. ๐Ÿš€ Deployment
  8. ๐Ÿน Usage
    1. ๐Ÿ•ด๏ธ Pre-requisites
    2. โš™๏ธ How to start the app
    3. ๐Ÿง‘โ€๐Ÿš€ How to deploy the app
    4. ๐Ÿงช How to test the app
  9. โš–๏ธ Legal notice
  10. ๐Ÿง‘๐Ÿฝโ€โš–๏ธ Acknowledgements

๐Ÿ“ฐ Description

โ†‘ Table of contents

A period tracking app based on the premise that no server will store the data, not even temporarily (and this is an important and crucial part of the project's idea).

๐Ÿ“š Documentation

โ†‘ Table of contents

All the documentation is detailed at the /docs folder which you can access from here or at the official link.

๐Ÿงฑ Tech Stack

โ†‘ Table of contents

  • Vue3
    • Frontend framework based on reactivity and progressiveness originally developed by Evan You.
  • Typescript
    • Improved version of JavaScript that implements TypeScript so that safer code is delivered.
  • Vite
    • Web bundler originally created for Vue's ecosystem.
  • Tailwind
    • CSS library that delivers a really small bundle to the client with only what you used.
  • Vitest + Cypress
    • Testing packages for unit, integration and e2e tests.
  • Docker + Docker-Compose
    • Virtualization technologies to deploy containers with the technologies you want.

๐ŸŒ‡ Architecture

โ†‘ Table of contents

It will attempt to be an hexagonal architecture so to say, since there will be no backend, elements have to be processed on the client, but that does not mean no structure should be followed.

I'm choosing the hexagonal architecture since entities will be the core part of the application. There will be connections (in both ways) to the IndexedDB, to the UI (React), to the store most likely (Redux). Having as much information and logic of each entity centralized will be helpful on the long run, and, from my current perspective, it will be scalable.

As for the decisions, they're based on my experience, both professional and personal experiences, mostly personal. But it is worth noting that this project will be complicating things for the sake of it, not necessarily reinventing the wheel, but it's not it's most optimized version. But I'll learn along the way, and will be prototyping until I get it right.

๐Ÿ’ก Objectives and requirements

โ†‘ Table of contents

For the up-to-date document defining the requirements and objectives, please, refer to the REQUIREMENTS.md document.

๐Ÿ—ฝ Product

โ†‘ Table of contents

๐Ÿ˜ฅ Description

โ†‘ To the section

It's going to be a period tracking app based on the premise that the user will have total and full access and control to their data, and it will be gender-neutral and customizable to an extent (as much as I'm able to do and acknowledge).

๐Ÿค” Why?

โ†‘ To the section

The situation in USA at the moment of development is out of control, it has put, not only women, but any fertile, person with a uterus at high risk, so, currently, having a period tracking app may put you in danger since they may be selling your data (which, if not most, a lot of them are! More on that on the following article How period tracking apps and data privacy fit into a post-Roe v. Wade climate.

Periods are also something that as a cis male, I don't know that much about, but I'm ready to learn all that I can, and is also a strong point I'm looking forward

๐Ÿ“ˆ Roadmap

โ†‘ To the section

It is specified, visible and up-to-date at the Github's Project.

๐Ÿš€ Deployment

โ†‘ Table of contents

It will be deployed on Github Pages for the moment being. I might end up using VercelJS in the future, but it's something I have not properly considered.

๐Ÿน Usage

โ†‘ Table of contents

It uses vue, with vite, since it uses vite, it already provides some utility commands.

๐Ÿ•ด๏ธ Pre-requisites

โ†‘ To the section

You'll need to have node.js install in your system to run the application locally. It could also be delivered on-premise (not the intended way though).

I'm currently using:

  • node.js (v15.14.0)
  • npm (8.11.0)

โš™๏ธ How to start the app

โ†‘ To the section

Kind of simple, if you've met the requirements

npm run dev

So you can now head to:

https://localhost:3000

๐Ÿง‘โ€๐Ÿš€ How to deploy the app

โ†‘ To the section

You can just execute the following command.

npm run build

And move the app/dist/ folder it genereted to the path you want to application in. This process can be completely be automated.

๐Ÿงช How to test the app

โ†‘ To the section

The following command, using vitest, will be testing on watch mode, which means it won't exit, and as soon as you make a change, it will refresh the test you modified, a little more complex than that, but until that I kind of comprehend.

npm run test

If you want the coverage, and this one won't execute on watch mode, meaning, once finished, it will stop.

npm run coverage

โš–๏ธ Legal notice

โ†‘ Table of contents

It attempts to be as crystal clear as possible, but no data is intended to be stored at any other device that your own. To be shared with no one but who you consent by directly sending your data with whatever security you mean necessary and required, at your own risk. Be safe out there!

๐Ÿง‘๐Ÿฝโ€โš–๏ธ Acknowledgements

โ†‘ Table of contents

  • To Jessica Khoury for her viral tweet putting to the light such a serious problem.
  • To all the people with uterus in USA that at such level of risk because of old jerks.