animavita/animavita

Trigger life-saving alerts, register animals for adoption and find the closest pet friend to adopt :dog:

A minimal, clean and beautiful mobile app to help people find the closest pet friend to adopt, rescue lives and change the world.

"How to save a life?" - The Fray

😊 Why?

Animavita is a combination of two Latin words, ‘Animal’ and ‘Vitae’, which means respectively ‘Animal’ and ‘Life’. This is an idea to create or animate something that was born a while ago, when I realized that facebook is used to publicize adoption and also ask for help for animals that lives on the streets.

Animavita's purpose is not to change how people use facebook to the activities described above, but to centralize the helpful information in a single application. Anyone can make an adoption request, but it doesn’t mean that the pet will be automatically adopted. It means that the person interested can talk to the person who registered the pet, allowing both sides to have a conversation, and the user to research and decide his favorite pet.

💫 Roadmap

Check our issues page for more details about what we're building.

Contributing

Read the contribution guidelines before contributing.

animavita's Issues

S3 objects aren't appering on android

Problem

After #84 the images stopped appering on android. That happens only when we run graphql package in docker. So, I suppose the app are trying to get the images with "localhost" in URL which doesn't work on Android. Probably because when using docker, we mock all AWS dependencies locally such as S3 that no longer stores a public object URL which was accesible to both (android/ios) in the past.

Proposed solution

I think changing URL of S3 objects to points to 10.0.2.2 will fix this problem.

To testing, the user picture must appear in the header.

Reference

https://developer.android.com/studio/run/emulator-networking

Upgrade to React Native 0.61

• Use Hermes?
• Fast Refresh
• Hooks everywhere

All adoptions query

#30

Filters all adoptions

#30

Adoptions

The user must be able to see adoptions posted by other users, filter them and register a new adoption as well.

Register
To register a new adoption the following fields are required: animal name, sex, breed, type (dog, cat, other), age, size (small, medium, big), photos (min: 1) and observations.

Registered adoptions
A list that shows "my adoptions". The adoption owner must be able to edit and delete it.

List
The adoptions list can be in format of cards, so that the user can see one adoption at a time. It's necessary showing the photo, name, breed and sex. Optionally, the list can contain a "pull to refreshing" feature.

Filter
A option to filter the adoptions listing by animal size, distance (between users), sex, type and age.

GraphQL

• Create adoption mutation
• All adoptions query
• My adoptions query
• Filters

Mobile

• List all adoptions in the home screen
• Register adoption screen
• My registered adoptions screens
• Filters all adoptions

Create default item component

Status bar not updating according to the theme

The status bar is not updating according to the theme in real-time (when clicking the change theme button)

`@react-native-community/cli` incompatible with Xcode 11

Related to #10 (will be fixed when updated to 0.6x).

Xcode 11 changed the results for existing simulators from isAvailable: 'YES' to isAvailable: true, and the cli version in this project (1.8.0) doesn't contain the fix for it.

There are two approaches to this, update react-native (and therefore the cli) or patch the cli directly with patch-package (the short term solution).

This issue was fixed at react-native-community/cli#414

I can make the required patch if you want, as well.

~/WorkDir/animavita/mobile master
❯ react-native run-ios --verbose
info Found Xcode project Animavita.xcodeproj
error Could not find iPhone X simulator
debug Error: Could not find iPhone X simulator
    at runOnSimulator (/Users/rafifos/WorkDir/animavita/mobile/node_modules/@react-native-community/cli/build/commands/runIOS/runIOS.js:131:11)
    at Object.runIOS [as func] (/Users/rafifos/WorkDir/animavita/mobile/node_modules/@react-native-community/cli/build/commands/runIOS/runIOS.js:96:10)
    at /Users/rafifos/WorkDir/animavita/mobile/node_modules/@react-native-community/cli/build/cliEntry.js:152:22

Create adoption mutation

#30

Apply DDD to the adoption concept

Create user preferences

Overview

• A mutation to persist the user preferences
• A query to return the user preferences

List all adoptions in the home screen

#30

Update package.json files

Overview

The most packages we have aren't referencing their local dependencies. If package A depends on package B, the package B should be referenced on dependencies of package A.

https://classic.yarnpkg.com/en/docs/workspaces/

Create default form components

Create adoption register screen

Overview

The screen for users register an adoption.

#30

Typo on README

to help people find the closet pet friend to adopt

closest

Create default tab component

Create default title component

Add my adoptions query

#30

Requirements

A query so that the user can view own adoptions.

Typo on README

to help people find the closet pet friend to adopt

Persist user language preferences

As we've implemented the i18n resource on this project, we want the users to be able to choose the app language.

• Build the user preference screen
• Add mutation to persist the user preferences
• Add query to return the user preferences

Authentication with Google Account

List all adoptions on the home screen

We need to build a swiper similar to tinder, the same one we had on the first version of Animavita.

• Build the swiper (suggestion)
• Create a relay query to fetch pets from the backend #77
• Show pets in the swiper
• Make sure it works on the web

Create default button component

Create default styles and components

    

• Buttons #39
• Titles #40
• Form components #41
• List items #42
• Tabs #43

Localization/i18n

Monorepo

Move it to monorepo, i suggest using yarn workspaces, heres an example:

http://github.com/fotonTech/golden-stack

Favorites

A user must be able to like/unlike an adoption.

• Like an adoption
• Favorite list

Fix blank screen

After login with facebook account for the first time the app shows a blank screen that desappears when reloading the app.

Create adoption mutation

Overview

• A mutation that allows the user to create an adoption.

#30

Create adoptions filter

Overview

The user must be able to filter adoptions by: animal size, max distance, animal breed and animal type.

#30

Would like to join the project

Hi @wendelfreitas

I would like to join the project if thats ok?
Do we have some sort of centralised platform for communication E.G. Discord?
Is this for all animals or currently just Dogs/Cats? as i could bring some knowledge around reptiles, amphibians and arachnids too.
Also I feel like translations could be used for different languages as I see that the gifs are all in spanish?

What do you think?

Andy

Add ability to request a pet

depends on #128

Task

As one of the core functions of our app, users should be able to request an adoption when they match with a pet. Let's add new fields to the adoption & user documents that will look like this:

adoption {
 ...
 request: {
  by: userId
  status: IN_PROGRESS, ACCEPTED
 }
}

user {
 ...
 requests [{
  adoptionId,
  status: ACCEPTED, DENIED, CANCELED, IN_PROGRESS
 }]
}

So basically if this field is present in the adoption document it means that a user has requested to adopt the pet. When a request gets created the status for it under user should be IN_PROGRESS and under adoption IN_PROGRESS .

New endpoints

We're gonna have to create new endpoints:

/requestAdoption

It can be like this -> POST api/v1/adoptions/:adoptionId and the userId should be passed in its body. Then we update both adoption and user collections.

/cancelRequest

It can be like this -> PATCH api/v1/adoptions/:adoptionId. This is supposed to remove the request object from the target adoption document and mark the adoption status as CANCELED in the user document.

/denyRequest

It can be like this -> PATCH api/v1/adoptions/:adoptionId. This is supposed to remove the request object from the target adoption document and mark the adoption status as DENIED in the user document.

/acceptRequest

It can be like this -> PATCH api/v1/adoptions/:adoptionId. This is supposed to change the adoption status from AVAILABLE to ACCEPTED and also mark the adoption status as ACCEPTED in the user document.

Policies

• Users can not request to adopt their own pets.
• Only the user who requested the adoption can cancel it
• Only the user who is the pet owner can deny an adoption
• Only the user who is the pet owner can accept the request

Add adoptions concept

Overview

• Add types
• Add GraphQL types
• Add model

#30

Streaming

What do you think about streaming the app development?

I can join.

Solicitations

A user must be able to solicit adoption to other users and see the received solicitations. In adoptions received list, the user can accept or decline the solicitation.

• Solicit adoption
• List adoptions received

Implement adoptions filter

#30

Create a multistep form to register adoption

Task

Let's recreate our old adoption register screen. This time, we want to split it into multiple screens in order to provide a better user experience. So for each field, we must have a dedicated screen and a "Next" button to advance to the next step. I suggest using react-hook-form to manage the form state and react-query for handling requests.

Validation

We also want to improve the error feedback. Let's use a tooltip to show errors. The snackbars should show up if the user tries to advance by clicking on the next button and the data typed on the field is not valid.

Photos upload

Let's keep the same user experience allowing the user to upload up to 3 pictures.

Endpoints

We already have the backend endpoints for basic crud ready to use.

Create adoption -> POST api/v1/adoptions

Tests

Please do not forget to add tests. I suggest react-testing-library.

Screenshots/Examples

App doesn't fetch the correct user profile picture

When a new user join into the app, a default image is loaded instead of the real profile picture.

Error when login a new user

STEPS TO REPRODUCE:

• Run the app and graphql API
• Login with a new user

EXPECTED BEHAVIOR:
Create a new user in the database and login normally

ACTUAL BEHAVIOR:
User is created in database, but API return an error and print the following log:

Error: getaddrinfo EAI_AGAIN us-east-1
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:66:26) {
  locations: [ { line: 4, column: 3 } ],
  path: [ 'SaveFacebookUser' ]
}
GraphQL Error {
  error: Error: getaddrinfo EAI_AGAIN us-east-1
      at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:66:26) {
    locations: [ [Object] ],
    path: [ 'SaveFacebookUser' ]
  }
}

And this log in the app side:

Array [
  Object {
    "locations": Array [
      Object {
        "column": 3,
        "line": 4,
      },
    ],
    "message": "getaddrinfo EAI_AGAIN us-east-1",
    "stack": "Error: getaddrinfo EAI_AGAIN us-east-1
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:66:26)",
  },
]

Error fetching GraphQL query 'ContinueWithFacebookMutation' with variables '{"input":{"token":"EAAKOpJUurDkBAAcLkb0i4jWnypGZAf3wriz53ppxHb4RDInMX9E3E7PEJZBOpQXWdaow2rctQVE34vTESMM8N74y23RTUaZAUPpW11qNVpEytEf4FL9AJLLHkZA5lEjoecR6O8WlRw8JF6hvQqSRt2EpIiBLGhNfZCpymgSzw77lReZCqfAaZCFp2gsrnmHdC8IIIAO574qSx0vWXa2tdd8X8T39UDZA1MqLObrgtK6MRIpxw95hlZChq","expires":5161926,"permissions":["public_profile","email"]}}': [{"message":"getaddrinfo EAI_AGAIN us-east-1","locations":[{"line":4,"column":3}],"stack":"Error: getaddrinfo EAI_AGAIN us-east-1\n    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:66:26)"}]

So when you try to login again, it works fine.

App reestructure

Hey everyone! 😃

I'm so excited to start again/keep working on this awesome project! Since I started contributing, I've noticed that we are not being able to make progress in our features mostly because the main maintainers don't have time to dedicate to it. Also, I find our tech stack very complex. So, I decided to create this issue in order to discuss how we can improve that, to bring up some interesting stuff that I researched, and also as a knowledge transfer. I wanna come up with a new stack (should be an easier one) and improve our work model in general in order to attract more developers to help us.
I really love to work on Animavita, I could learn a lot contributing here and I don't want this project to die. However, I can't do anything by myself. I hope not to be alone.

Our goal

Besides helping people who are interested in adopting a pet or putting a pet for adoption, we want to help you to grow as a developer. You can confirm this by reading the section Contributing in our README. As I said above, I learned a lot here. Open source in general is a great way to highlight yourself to the community as well as to show to recruiters during an interview.
Our last dream for this project is to see it available for download on mobile stores. That would be awesome!

Difficult to start

If our goal is to help you as a developer, we should be more developer-friendly right? I'm saying that cause I know how hard it is to make your first contribution here, and that's why I made #84 trying to make this process a little bit easier. But it's still hard because it's not clear or maybe not very well documented how our business rules work. It's hard to understand when you first look at the code.

First things first

Our current default branch called next is actually our 2.0 version which was supposed to be in development. However, we're stuck on this, and that's why I want to restructure the project. Our master branch is actually our v1, kudos to @wendelfreitas and @renanmav who made awesome job there! The v1 (master) was finalized by Wendel and we started a v2 because we wanted to improve and launch a new application totally refactored using the latest front-end libraries, adding typescript and so on.

App Structure

Our application is structured in a monorepo with lerna and yarn workspaces. Each package in this monorepo is responsible for one thing and its name should be very self-explanatory. e.g. eslint is where we store linter configs. Our backend is the graphql package. Our front-end is the expo package. We have our design system completely separated in the ui package. All the other packages are consumed by graphql and expo.
Even though we don't have a firmed pattern to organize our structure, we've been trying to use BDD (I know it's not about folder structure) and separate everything that makes sense to be separated from the other stuff.

What I wanna change?

Since I'm aware of the downsides of our project, I'm gonna give a few suggestions about what I think would be interesting to change or continue using. All my suggestions are to make this project easier, to get more developers interested in helping us, and to put Animavita on track again. If you already have contributed to Animavita, please, let us know what was most difficult for you. If you had never contributed but got experience working with expo, GraphQL, monorepos, please, leave your opinion as well.

• Replace relay with apollo.
  Relay is an awesome library created by Facebook. But it's quite complex and less popular than apollo, in my opinion.
• Should we use some backend JS framework, like nest, or keep doing everything by hand?
  I've been working more on the front-end side. So I'm not the best person to talk about that.
• Expo instead of bare react-native
  Expo has improved a lot and I think it solves 90% of our problems. Unless we have a good reason to eject this app, I'd keep expo.
• State management
  I'll go straight to the point: should we use redux or server-side state management? I'm a big fan of react-query 👀
• Login by e-mail
  One of the biggest pain for our contributors was having to create a Facebook developer account and set up this in the app in order to have the app running. Let's add login by e-mail to streamline this auth flow.
• Start from scratch
  Would you rather kill next branch and start a new one, or try to refactor what we already have?

Below our v1 running. So before commenting, be aware that we want to keep all features that we previously had on v1.

         

That's it for now! Let's discuss guys, I need help. Feel free to comment here or to reach out, we also have a discord where you can join.

Github actions

Enable github actions, its free and may run our eslint and tests on ev PR :D

Create all adoptions and my adoptions query

Overview

• A query that returns all adoption options closest to the user.
• A query that returns all adoptions the user has posted.

#30

Register adoption screen

#30

Add integration tests

Adoption of TypeScript

Fix dropdown menu on web

Problem

On web, the dropdown menu #71 doesn't work when clicking on profile picture.

Screenshots

My registered adoptions screens

#30

Manage my adoptions

depends on #125

Task

Let's add the ability to edit, delete and view adoptions. The user must be able to see a list of cards and for that let's create a new bottom tab. Each card is a registered adoption and should contain two buttons, one for the edition and another one to edit it. The card can also be clickable.

Endpoints

We already have the backend endpoints for basic crud ready to use.

All adoption -> GET api/v1/adoptions
Edit adoption -> PATCH api/v1/adoptions (must include id in the body)
Delete adoption -> DELETE api/v1/adoptions/:id

Observations

Since we don't have the user module yet and the adoption doesn't belong to any user, let's use the all adoptions endpoint to list it.

Chat

When the user press "Request adoption" button, a chat between this user and the pet owner is opened so that they can arrange a meet.