Learnings from building a dating site for dogs

Laura Roudge
Nov 8, 2019 · 8 min read
Our logo by Marc Cavigli

Introduction

At the end of the Foundations year at Holberton School, we have three weeks to develop a Portfolio Project. Under certain guidelines, we are allowed to code almost anything we want, in groups of one, two or three people. The aim of this project is to gather all the knowledge we accumulated during the year, and use it to produce a fully developed project. We’ll be able to showcase it in our Portfolio and use it to promote our skills.

I decided to team up with two amazing peers: Drew Maring and Marc Cavigli. We had never worked on a project together before, but we wanted to get the chance to do so before the end of the year. And from that dream team that we just formed, the idea of PuppR was born. PuppR is a dating site for dogs, created for dog owners who want their pups to meet good doggos in their area. It is largely inspired by the famous dating app Tinder, which a lot of people can relate to. We wanted something fun and light but also technically challenging, so we decided to focus on the front-end, since we didn’t do much of it during the year. Our main focuses were: deepening our Javascript knowledge, learn a new web framework (in our case Vue.js), and create a fun but intuitive user interface.

To do this, we had three weeks of research phase, during which we took all the technical decisions, and three weeks of development. We didn’t want to assign roles early on, so we all did a little bit of everything. But our natural talents really showed themselves and divided the work for us. I ended up being more focused on the UI and doing all the style and working on gathering Vue tips and tricks, Drew took care of most of the backend and all the deployment strategy, and Marc designed all our customs icons, logo, and did all the landing page.

How does PuppR relate to me and to the team

We all had great ideas for the Portfolio project, but one of the things we have in common is our love for dogs. I know the three of us have grown up with them, and we all have dogs/have relatives that have dogs. Needless to say we think they’re the best animals. We think that they deserve just as much social interaction as humans do, and that’s why we wanted to develop a platform that would fulfill that need.

Joey, Riley and Chibi, three of our current/past dogs

Personally, dogs are a central part of my life. When I was 5, my parents adopted a Golden Retriever named Riesling, so I had the chance to grow up with that big ball of cuteness. The relationship with this dog really set my passion for all dogs: he was one of the most respectful and patient dogs ever. My mom would let me hold the leash during walks but would warn Riesling saying “Hey it’s Laura walking you now so be gentle”, because I was too small to handle him. And he would actually understand and slow down for me, even when I grew up and was big enough to handle the leash! A few months after he died, my mom took another dog, a Bernese Mountain Dog named Joey. At the time, I was 19 and all my brothers and sisters were long gone from home. So my mom and I basically raised Joey on our own. To this day, living on the other side of the world, I still consider Joey like my baby and he still respects and obeys me like his mommy. I wish he could have come to San Francisco with me to meet all the awesome puppers I got the chance to dog-sit!

What we accomplished with PuppR

Simple diagram of the architecture behind PuppR

For the front-end we chose to use Vue.js over React.js because a few Software Engineers told us it was much easier to learn, and given the time we had, it was going to be complicated to learn React. For the back-end, we chose Firebase for its database and user authentication services. We chose to focus on the front-end because we felt we didn’t have a lot of experience with it this year, and using a fast and powerful tool like Firebase in the back-end really helped us achieve that and learn Vue.js properly. For the deployment, we chose to use the new service of Google: Google Cloud Run, which is still in beta but turned out to be perfect, paired with Drew’s knowledge of Docker containers.

The MVP for PuppR was hard to define because we wanted to implement a lot of features in this project, and had time for only a few. Let’s look at three of those features:

  • User signup/sign in. A user can sign up with their email and create an account for their dog, uploaded basic info and an image for them. They can log out and come back and log in again and they will keep all their info, likes, matches, etc.
  • Swiping through profiles. A user can browse through other dogs’ profiles in their area and give them a like or a pass, and if they want to see the last profile they passed, they can rewind. If they click on the current profiles image, the can see more info on that dog.
  • Matches. When two users like each other, a match is created and they have access to each other’s email to get in contact. Each user can have access to their matches in the “matches” section. This is not an optimal solution and we’re aware of it. Eventually, a chat will be implemented in-app for dog owners to arrange a play-date.

The most difficult technical challenge while developing PuppR

For our team, the discovery of a front-end framework and all its concepts was challenging, especially the handling of data and where it should live on our page.

In our web app, we need to load profiles and filter them depending on the logged in user’s zipcode, profiles liked and profiles matched. This means we have two sources of data: the current logged in user data and all the other profiles (filtered) data. We also wanted to create a logged out experience where users could just swipe through all the profiles stored in our database.

To do so, there is a powerful tool provided by Vue which is Vuex, a local store. The aim of Vuex is to center all the database and API calls in what are called “actions” and then have the data ready to go in the store, available to all components. The data can then be modified in the store, and those actions can send the updates to the database. The thing is that our team didn’t really feel comfortable using the Vuex store for all the data, so we tried having only the current user logged in data in the store and make database calls directly from components (which, in hindsight, is not a good practice). This was making it incredibly difficult to update the profiles list depending on logged in or logged out experience. Because the state of the user was kept in the store, we had to make our components check the store first before deciding if it should call the database and render the entirety of the profiles for a logged out user, or just the filtered ones for that user.

What we ended up doing was remove the logged out experience altogether, and make sure that the database calls were happening after the Vuex store gets all the current logged in user data. This way, the console didn’t yell at us saying they can’t render a filtered profiles list because they have no idea what is this.user.zipcode ! Now, we have a good working logged in user experience, and the components are rendering without issues. But after this experience, I’ll always make sure to keep all the database calls in the Vuex store!

Other things I learned

I talked a bit about what I would do differently next time to avoid an undesirable technical situation. But there are many other things I learned from developing PuppR.

First, I learned how to use a web framework, and I am quite proud of this. I feel more ready to enter a full-stack role and work with a framework. I am really thankful that experienced engineers advised my group to work with Vue.js and that we followed that advice. It’s easy to learn, but was challenging enough for us to always be learning during the process and to keep us on our toes.

I also learned that I have a thing for UI and that I really enjoy making an app look beautiful and feel good. I still don’t think I want to be a UX engineer, but this project gave me a sensitivity for design.

My two peers for this project really made the entire process easier, more fun and more enjoyable. We were meeting everyday to work on different items, helping each other out when needed, and it felt like the project was always moving forward. This was made possible by the support we would provide each other and the constant motivation we had. Everyone was passionate about delivering an awesome app, so we were on the same wavelength. Also, we allowed the work environment to stay fun and playful, and we were just laughing about everything everyday, while keeping focus. It taught me that work can be really serious and that it doesn’t need to be stressful and dreadful at the same time. (Don’t get me wrong, we were still super tired by the end of the project)

This project really confirmed my desire to become a Full-Stack Software Engineer, as I got to develop a project with technologies used in a lot of companies, both on front and back end.

I also feel like I might have learned a lot on these technologies but that the path is still really long, and there are so many new things I want/have to learn to reach my goal. I feel like I got a glimpse of what I am going to be working with, but that there is so much more to web development, and I am really excited to discover it!

Overall, working on my Portfolio project with two great human beings on a fun app was an awesome experience. I wish we would have had more time to develop it and implement more features, but I am very proud of our work and it constitutes a great conclusion to our Foundations year.

Who is Laura Roudge?

I am a passionate Software Engineering student at Holberton School, in San Francisco, about to start an internship at Deezer in Paris. Former dancer and comedian, I am switching careers to become a Full-Stack Software Engineer.

Here’s a link to the PuppR repo on GitHub: https://github.com/lroudge/puppr

Link to the deployed landing page and project: https://puppr.best/

Link to my LinkedIn profile: https://www.linkedin.com/in/lauraroudge/

JavaScript in Plain English

Learn the web's most important programming language.

Laura Roudge

Written by

Software Engineer at Deezer in Paris, former student at Holberton School in San Francisco, always striving to build a better world.

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade