A web application designed for families to organize, track, and manage all aspects of their pets’ lives—such as medical records, appointments, reminders, and milestones—in one convenient place.

• Purpose
• Status
• Project Stack
• What do I need?
• Setup
• How to run it
• Folder structure
• Branches and Environments
• Find out more
• License

In 2020, after welcoming our first pet, my wife and I searched for a tool to help us manage events and changes related to our pets—both current and future. After exploring several options, we realized none fully met our needs, so we decided to create our own solution. That’s how MyPets was born.

Over nearly six years, the project has gone through multiple technology changes and periods of slow progress due to shifting priorities and other commitments. In 2026, the goal is to release a stable, user-friendly version that any family with pets can use—not just us.

Before cloning this repo, I recommend installing the following software:

• Node >=12.16.1 to install packages
• API Repo to work in a local environment

After cloning the repo, install the node packages in the project's root file.

git clone https://github.com/NicolasOmar/my-pets.git
cd my-pets
npm install

To run it as a single instance (using a production-like build)

npm start

Once you have cloned the repo, it will show you the following folders:

• .github: Github Actions files used to run post-merge.commits like unit test coverage collection.
• .storybook: Dedicated to Storybook configuration.
• env: Environment variables.
• public: Structure where the library will point it's App component once initiated, it also contains styles, scripts, logos and other useful files.
• scripts: Location of the update-version.js file, responsible of update package's version on each push.
• src:
  • components: Location of all used components, using Atomic Design hierarchy structure (atoms -> molecules -> organisms -> templates -> pages)
  • constants: JSON files used to contain constant values like routes, validation cases and input classes.
  • enums: Similar to constants, will be merged to constants in the next versions
  • functions: Helper methods related to several features like encryption, data parsing and validation.
  • graphql: Location of the queries and mutations used trough Apollo GraphQl.
  • redux: Code related to reducers and actions.

Because I am using Netlify to host the site, I am maintaining the main branch only. Therefore, the following link sends you to the last deployed version.

MIT