PuppR: It’s Like Tinder For Dogs
How my team and I conceived of and deployed a dog-dating site in 3 weeks

It was Friday afternoon of our first week of coding PuppR when my team of three realized how big of a bite we were attempting to chew. We had already spent 3 weeks designing a general plan for how we were going to code Puppr, a Tinder-like site for owners to set up playdates for their dogs. At this point we were halfway through the project as we only had 3 more weeks to complete the app. The reality of what we were trying to accomplish and the work that was involved caused a mini-panic that afternoon.
Drew Maring, Laura Roudge, and I gleefully agreed to take on this project when Laura offered the idea. Our mutual love of dogs made this decision a no-brainer. We saw connecting dog owners together as a great way to celebrate the joy canine companions bring to our lives. Like humans, dogs are social creatures that need interaction to live a healthy life, but it can often times be difficult to find other dogs to play with. The idea was to make it as simple and low pressure as possible for an owner to match with other like-minded owners and organize a playdate for their doggos.
Our roles for this project were pretty loose. Generally, Drew took the lead on the back-end, Laura mostly took the lead on the front-end, and I was in charge of the design as well as contributing heavily to the front and a bit to the back. I also made myself available to work through any logic and code implementation problems my teammates had. I made sure to work closely with both of them in solving any issues or problems along the way. We all crossed over into different areas though several times throughout the project.

We broke up the planning and execution into three different stages: research, development, and refinement. It was around 18th that we began to realize just how big of a project we had committed ourselves to.
We knew we wanted the user to have a seamless, one-page experience similar to the experience provided by popular dating apps. We wanted to avoid the page needing to reload every time the user tried to navigate somewhere. Because of this we decided we’d need our app’s front-end to do the heavy lifting and rendering which eventually led us to discuss if we wanted to learn React or Vue.js.
We also knew our back-end would need to do several things including authentication as well as data and image storage. We knew we wanted to use a non-relational database as we’d be working with a large set of data that would be accessed constantly throughout the app. Our choices for this were between Google Firebase and MongoDB.
Making a choice
For the front-end, we landed on using Vue. It would allow us to render everything on the user-side and break up every “page” into components that flowed seamlessly together, thus creating the experience we desired for this app. Not only that, we also received feedback from several professionals who told us learning Vue would be a much more achievable goal for our 3 short weeks of coding.
If you’re unfamiliar with this framework, Vue breaks everything down into components, which are linked together through a router. This allowed us to have a very simple main html page. Here is a shot of our app’s main html:

That’s it. Granted, much more html was to follow as each component contains its own code. So for example, we have a component for the sign in page, the sign up page, the main “swiping” page where you’re viewing different dogs, and so on. These components’ html appears in the <router-view></router-view> tags seen above giving the app a seamless, one-page feeling.
On top of that we needed to incorporate Vuex to manage a user’s state. Since a user could log in and perform actions that would mutate their profiles, Vuex was a necessary part of this app.
Choosing a back-end was more straightforward. We decided to go with Firebase since it provides a bunch of different features we needed for this project, namely authentication, database storage for a user’s information, and cloud storage for the dog pictures that a user would need to upload.

So we had now chosen a front-end and back-end. Vue was new to all of us so we were consuming tutorial videos and reading articles as if our lives depended on it. 3 weeks was not a lot of time to learn a new framework and a NoSQL database, after all. Fortunately, Drew had a significant bit of experience with Firebase so he took the charge in setting up our back-end.

Another huge facet of this project was its design. We were trying to create a standalone, attractive app inspired by insanely successful dating apps that all feature elegant design. I dived into this challenge and learned Adobe Illustrator to create the logo and icons from scratch, as well as designing the app’s aesthetic based on a color scheme we had agreed upon.
Features
Some features that users experience with PuppR are user authentication, being able to match up with other users and see each other’s email addresses, and updating their profile information. Once a user has logged in or signed up they are presented with a screen that shows a picture of a dog with its name, age, and location. If the user clicks on the picture they’ll see information about that dog. They can choose to ‘pass’ on the dog or ‘like’ it. If they accidentally pass on a dog, they can ‘rewind’ and see the previous profile.
Along the way we decided to cut out a few features we had initially planned to incorporate. For instance, anonymous viewing was a big one we had to let go. Originally we intended for users to not need to log in to see dog profiles, but this quickly became a tangled mess with our other features. With more time we could have incorporated it, and maybe we will in the future.
Chat was another feature we didn’t have time to implement. Initially, once two users match they would be able to send messages back and forth from within the app. We ran out of time to deploy this feature so instead each user will can view the email address of the users they match with.
Challenges
There wasn’t really one thing I got hung up on for any part of this project, but rather I got hung up at some point on pretty much every feature I worked on. This was due to working with a framework I was unfamiliar with. While annoying, this provided an opportunity to learn the ins-and-outs of Vue in a way that straightforward tutorials may have not been able to offer.
For example, Vue has a property called computed that tripped me up for a long time. I couldn’t understand the difference between Vue’s computed property and methods property. Reading articles helped some, but what really cemented it in the end for me was using it in action and implementing code that would take advantage of this property.
An example of encountering an issue with Vue from start to finish came from coding the Landing page. The Landing page is divided into three sections meaning I’d need to implement if/else logic to determine which section would be displayed. Since this logic applied to the task I was trying to accomplish, I spent time studying similar code, reading articles, watching videos, and chatting with my peers about if/else functionality in Vue.
I found this to be super helpful as I tend to need to understand exactly how and why something operates the way it does in code. This is the reason I found Python to be such a big challenge coming from C. In C you account for everything. It’s relatively easier to follow the process and understand why things operate the way they do. The first month in Python I felt lost because the language felt “too smart.” I found myself asking, “How does it know to do that?” pretty often.
By identifying a challenge in Vue and how I would need to proceed to solve it, I managed to take bite-size chunks of a new framework and learn it bit by bit.
Takeaways
I’m very glad we decided to use Vue. It’s a framework I’d like to spend more time becoming proficient with. It’s value and utility in easily rendering content on the client’s side and modularity makes adding new features super easy. It also wasn’t too bad learning, though there are still some aspects I’d need to spend some time with to fully learn. Using it on this project has sparked more of an interest in front-end for me and I intend to make more web apps to practice this framework.
If I could do the project over again I’d spend way less time worrying over the design at the beginning. I would’ve made a simple placeholder for the icons and logo and instead spend that time diving deep into Vue. I think I spent too much time with the design early on which made me feel like I was playing catch-up for most of the project.
In terms of learning, the several weeks we spent learning new frameworks and databases for this project felt like the first three months learning computer programming at Holberton School. It was a never ending stream of new information and material. I mean that in a good way though as when I think back on it I realize how far I’ve come in such a short amount of time. Without the foundations that I’ve learned over the past 9 months at Holberton, I don’t think learning Vue and Firebase and how they all fit together would’ve been anywhere near possible.
This project has been at different times a major boost and a major hit to my confidence. When I felt like I was doing a good job, it was a euphoric high. But when I felt like I was behind or couldn’t get something to work, I would become pretty depressed.
In the end though I look back on everything in a positive light especially when it’s in the context of not only everything I’ve learned but everything I’m capable of learning. The fact the team picked up this new framework so quickly and made a functioning, impressive app is astounding to me. It’s a good reminder that with just a little effort I can pick up pretty much anything.
Me

So a little about me! I’m a California native and resident currently living in Santa Cruz. I began studying computer programming only 9 months ago in San Francisco at Holberton School after deciding I wanted a change in my skill-set. Before this I had no experience with coding or computer programming. I ran a successful video production and post-production business shooting and editing commercials, corporate videos, and creative projects as well as spending a couple years in Beijing, China hosting an hour long radio news program.
If you feel like it, please check out my Github page and LinkedIn profile. PuppR can be seen at puppr.best. Thanks for reading. Enjoy your life.
