My journey building an animal adoption app - The beginning

My journey building an animal adoption app - The beginning

The plan

The plan behind this app is for me to expand my knowledge about certain technologies and learn more about UX as while I use Figma as a developer, I haven't used it to create designs from scratch. If this get to a point that is actually viable then I will try and launch it. All of this is in my spare time so might not develop very quickly but if I learn as I go that is good enough for me and I will bring you along with me.

My Idea

Earlier this year I had an idea to build an app where smaller animal adoption charities can list the different animal, they have that are looking for a forever home. I wanted to give the charities a central place that makes it easier for them to be discovered and be able to find the animal a loving home.

This came to me when I was recently looking for dog to join our family and while I knew the bigger rehoming charities, I struggled in searching out smaller ones even some local ones that I only found out about after I got my dog. My biggest issues were not finding dogs to rehome but finding a dog that could be rehomed in my house with my family and elderly cat.

Tech Stack

To make this app I wanted to use technology I am familiar with on the frontend so I am going with:

  • NextJS

  • Typescript

  • TailwindCSS

  • a component library TBD to help speed up the development

For the backend I wanted something that could handle the authentication for me so that I could concentrate on building the frontend and getting an MVP, so I went with Appwrite. To be honest it was between Appwrite and Supabase with it coming down to Appwrite being easier to deploy locally for testing.

The Plan

I have split this project up into various stages where once I have an MVP I can then improve on the app. How far I get I am not sure yet, but I would like it of use to people and hope it goes on for a while.

Stage 1 - MVP

Here I am hoping to create the essence of what the app is designed for and here is a basic list of what the app needs to do:

  • Landing page where the user can select what type of animal they want to adopt

  • A page that lists all the selected animals on cards that hold basic information and a photo

  • a side panel with filter options that are dynamic based on the animal that is being searched for

  • An animal details page that is shown when a user clicks on an animal on the list page. This will show more details with a larger image and even a gallery of multiple images. There will also be a way of contacting the charity that has this animal

  • A login screen for the charity members to log in with

  • A dashboard for the charity so they can see what animals they have up for adoption and mark an animal as adopted/pending adoption

  • A page with a form that the charity can add a new animal

  • a page with a form so a charity can apply to register on the site

With the MVP there is going to be some limitations on what the app can do, some of these are deliberate like no automatic sign up as in the beginning I want to be able to check they are a charity. For the MVP they will also only have one account, but I might change this once I investigate it more as I am not a fan of this. Another restriction is not allowing charities to upload images for the MVP and instead they can just enter the URL of the images that they want to use. This is to cut down on space used and help keep my initial costs down as I will be financing this to begin with.

Stage 2

expanding on stage 1 I want to add the following to the app:

  • A page that a charity info page where they can add more information to themselves and links back to their website and social media.

  • The ability for a charity to link back to their blogs or animal care pages with a image and basic description

  • If not implemented in stage one, the ability for a charity to add a user to their organisation with permissions on what they can do

  • Allow the charity to add a banner if they are looking for a foster home for an animal as well as adoption

Stage 3

  • Allow a user to create an account

  • Allow a user to set up a search and email them if there is a new match

  • expand on the charity page to show all the animals that the charity has available

  • add a pet of the week on the home page that will change if that animal is adopted

  • add a click counter to the animal details page that the charity can see so they know how many people are looking at their animals.

  • Allow a charity to upload images of their animals to the server if they don't have any image hosting.

Stage 4

This stage is going to be a big one for me as I want to replicate the site functionality on to a mobile app. While I will make the web app responsive it will be nice to have a dedicated app. The biggest part for me will be learning how to make the mobile app and as of just now I haven't decided on what technology to use but as this is further down the line, I will come to this decision when I need to.

Beyond stage 4

I have not got any plans just yet as to what I want to add beyond stage 4 yet and I will wait to see if I have request for features I haven't thought of yet but one option would be to create a secondary app that a charity can use as their website and with that have an API built in the this app can use to automatically pull in the animal details so the charity doesn't need to do it twice.