jofaval/fusa-period-tracking

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

FUSA  

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.

fusa-period-tracking's Issues

Implement a theming system

Profile settings page

Integrate local storage

Profile switch page

Birth control component

A list-type of component/element that describes the type of birth control used and it's dosis, it will be a list of types of (birth) control used

Pronouns creation page

Pronouns entity

Profile page

Design and integreate a CI/CD pipeline

No unvalidated piece of code will pass "easily" to the main codebase. So that, that way, we can deploy safer code, and to actually deploy on any master's branch change.

• Checkout repository
• Install packages
• Build
• Validation
• Testing
• Deployment to Github Pages, and/or any other deployment service later down the line

Implement base visual style

The basics, but I already chose Element UI as the components and visual library

Define the Project's requirements

This is a research task. The objective with this one is to fully understand, or at least, as much as possible, what's required and needed for a period tracking app.

References

• https://www.obgyniowacity.com/blog/our-favorite-period-tracking-methods

Tracking page

Home page

Calendar page

Implement store

Using Pinia, implement the store of the app. Nothing crazy here though, just implement the base store and modules, not the actual complete implementation (since it's hard to that in advance, to say the least).

It'd be nice to implement the IndexDB initialization and error handling:
https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase

Calendar component

Implement profile switch

Stablish the versioning criteria

Any project that's ready to scale should, at least, have some sort of versioning as to better identify and control the code.

Prevent direct pushes to master

A simple Github configuration already provided, step-by-step, on the following Stackoverflow answer

Define a/the visual style

Create the milestones

Period cards component

Journal entry page

Gender creation page

Implement pairing key enceription as optional

Profile icon component

Implement routing

The basic code for the base routing, not necessarily all of the routes, just to "bootstrap" that part

Implement pairing key for encryption

Intercourse component

The amount of times the user may have had, in one specific point of time (maybe, for the future, time intervals) sexual intercourse

Notification system

Gender entity

Timeline component

Mood component

Change the title with multilanguage after routing

Temperature component

Allow for different standards of degrees, but store it in celsius, since it's the one that I'm the most familiar with, and I feel it's also a standard (except for USA, I'll give it a thought though). Users should be able to choose their default/preferred format

Integrate a CI/CD pipeline for Pull-Requests

It won't be forced, but it will be a reminder so that any non-expected unvalidated code gets passed to the main codebase

• Checkout repository
• Install packages
• Build
• Validation
• Testing

Same than the #35 but without the deployment, validation and testing only.

Profile creation page

Initialize the base configuration

Completely configure all the configuration for the initial services to be used

• Vue.js
• Typescript
• Testing (Vitest + Cypress)
• Git hooks (Husky)
• Tailwind

Journal component

Prepare the Project's documentation

The project needs to be documented, so do the changes:

• Main README
• CHANGELOG
• LICENSE (MIT)
• app's README
• docs' README
• CODEOWNERS

Implement pairing key change

Notify that there's no recovery if encrpyter

Profile entity

Implement profile settings

Journal page

Enable PWA

Progressive WebApps are the way to go for mobile apps using just web applications, they allow for installation and basic customization, which should be more than enough, while still allowing for web browser client utilities such as persistent store and DOM (with React, not react native)

Implement import/export functionality

Create all the base tickets

Just to have some starting playground from which to iterate and keep on improving.

Just the conceptual idea, there will, hopefully, increase more.

Weight component

A component to represent the user's current weight, wether in kg, lbs and it'd be a nice extra to implement a conversor.

Adding a label of, would be nice:
Weight yourself at the same hour or moment (i.e., in the mornings after poopoo), with the same amount of clothes, and taking into account that weight, while "not relative", it fluctuates.
It'd may be better as sort of a tooltip

Dashboard page