-
Low fidelity wireframe sketch of swiping page
-
High fidelity wireframe Figma plan of swiping page
-
Firebase database originally used to populate dog data
-
Welcome page (end product)
-
User form to find out what they're looking for in a match (end product)
-
"Wag left" or "Wag right" on your potential match! (end product)
Group
Slack handles (unless otherwise specified): Belle Lim, Deirdre Murphy, Grace Ding, Joy Abe, Arkaprabha Ghatak, Ian Legge (ian on Slack), Onotina Imoudu
Inspiration
When thinking about what apps we are inspired by, our group decided on Tinder -- great interface concept but horrible purpose; why swipe on people when you can swipe on dogs! In our group of dog lovers, we wanted to create a web app that would allow users to find dogs fit for them based on their personalities, focusing on dogs at adoption centers near them, instead of a breeder. Dogs at adoption centers are already in a tougher position for getting adopted, so we wanted a friendly interface that would encourage the user to consider dogs that might be a little out of their desired traits and focus on their personalities.
What it does
The web app greets the user with a short message about what it is about. From there, they are taken to a form that stores their initial specifications and requests for types of dogs to consider. These categories include sex, age group, activity level, size, etc. After filling out the form, the user is taken to the swiping stage where they are presented with dogs that definitely fit what most consider "must have" categories (sex and size), and fit at least one of their other specifications. The point of this is finding a level of flexibility so they can see the range of dogs out there. In this page the form they filled out is visible on the left side, so if they want to change it up, they can to possibly see different dogs, and the right panel holds dogs they "swipe right" on. The idea is they could save any dogs they are interested in and click on their pictures to see more information about them. The app is currently a more stagnant skeleton, but functions were developed to support such filtering and functionality later on.
How we built it
We began with a low fidelity wire frame on paper and transferred it to a high fidelity Figma project with 3 pages. From there, we developed the form frame and swiping page and began to populate it with fake data. We initially looked into Firebase using their Realtime Database to create data structures to support dog profiles that we would ideally pull from local adoption centers' websites (as much of that information is readily available), and for the sake of being able to readily use that data, transferred it into a .json file stored in the project itself. After finishing up the styling of the main pages, we began looking into page linking and form-data functionality. Eventually, we ended up with a skeleton of the web app with fake data to support it (also stored in a proper database) along with some page navigation and functions fleshed out.
Challenges we ran into
Being a group of strangers that was formed during the Team Formation/Project Ideation event, we definitely had a later start than other groups in both getting to know each other and actually starting the project. Out of the seven of us, only 2-3 have had some real experience coding before and overall little app development experience, so it was interesting figuring out how to balance the work and how to designate other roles. Once we got going, however, we seemed to have a smooth system of designers working on Figma, database populators working on dog data, and coders actually building up the infrastructure. Most of the challenges we ran into were deciphering bugs in the JS code and figuring out how to integrate tips we found online with our own code. We looked into other libraries we could possibly use, and the biggest challenge was simply figuring out what was feasible and how to approach it.
Accomplishments that we're proud of
Overall, we are very proud of where we reached. Many of us did not have many expectations going into this of what product we would end up with, especially with our mixed levels of experience. But the fact that we were able to develop step by step the different parts of a web app, including the wireframes, the database, the styling - even if not fully integrated - surprised us all! We are particularly proud of how close we were able to style the JS code to look to the Figma plans and how fleshed out the data we populated was.
What we learned
Our team took away many different lessons from this. For some, they looked at JavaScript for the first time and learned how to use LiveShare in VS Code. Others discovered softwares like Figma and Firebase and learned about the overall app-dev process. Others took away the challenge of coding others' visions in practically a day, and we all happily learned how to work so efficiently in a group of what was at the beginning strangers.
What's next for dogGo: find your match!
Several members in our team have expressed interest in wanting to continue this project. We all have a general understanding of the different parts -- even if not the technical side. We all have access to this and can continue working on it ourselves. Ideally, the next steps would be implementing full functionality of the buttons and storage system, eventually to things like using the database and being able to actually pull from websites.
Built With
- css
- figma
- firebase
- gatsby
- html
- javascript
- react
Log in or sign up for Devpost to join the conversation.