[ACF] ”Pet Paradise” Project Overview And Our Challenges 🐶 💻
By Rowan and Zhiyu
In the pandemic, many of us are spending more time at home, and more time with our pets. As pet owners purchase different pet accessories like toys and beddings to improve the activity and comfort level of pets, often our pets outgrow these items. How can we thrive to make them comfortable in a sustainable and economical way?
The goal of our project now is to make a platform where pet owners can post their used/new pet products for other pet owners that need them. Additionally, pets can help their humans create friendships, find social support.
We came up with this idea when Yoonjung, our community director at ACF, was trying to get rid of some of her old pet products and simply just didn’t know what to do with it. While she ended up giving up her products at a local goodwill store, we realized that there was a need for a platform for reducing the carbon footprint and facilitating pet parents’ friendships. In addition, we will still have the social media aspects of the site but we also want to add the marketplace too where people can sell their old pet products!
One of our far-fetched goals is to build a global platform that connects not only pet owners and businesses.
In this blog post, we will share our learnings, challenges and future plans for our team.
Our Learnings
We started about 6 months ago with the idea to make a social media app for pet owners to interact with one another. A lot has changed since then we have all grown as programmers and even our ideas of our website have changed. Since we have only two members in our team, we have to work hard to accomplish our season goals. But we love having a small team that makes us more like a family!
While Season1 was focussed on learning HTML and CSS skills for building web pages, season 2 was focussed on exploring JS and JSON.
Tutorial: Accessing data from a .json file
In this section, I am sharing a brief tutorial on how you can access data from a .json file using Javascript. We used .json files on our website in our login page so we can store the users data so they will be able to login in the future. For example: When someone makes an account, it will be saved to our .json file.
Below is our JS code to our login system.
1.) Creating the .json file: Each json file must start and end with curly brackets {}. Your json file needs to be in an array and then have objects set to certain values.
You will first need to create a function to store our variables.
2.) You will then need to create a variable for each input you have in your page (so later on you can store the info in the.json)
3.) After creating your variables for each input. We need to set values to them (“PetName”: petname.value,) We set the variable called “PetName” equal to “petname.value” that value is what we will get in out .json.
4.) To get your JS info into your JSON is fairly simple. Create a variable that can parse the information from the Javascript into the JSON file. Run the complete code.
This concludes the tutorial. For pet paradise web application, we made a .json page and connected it to our dashboard web page. The webpage data will be loaded to the .json file.
Tutorial: Complete Code:
Our Challenges
Challenge 1:
The code is very messy. We can’t find the specific code to fix the pages. So we clean the codes and change the structure of the pages to what we want. We learned that in order to make coding easier, we can add comments to illustrate what these codes represent and code things in order.
We had multiple pages in our project. In each .html page, the programmer had used different IDs and Classes to reference the style of the same type of content. This resulted in a long CSS style sheet with repetitive code lines. We put the same types of codes in one section in order to style them one at a time instead of individually.
Challenge 2:
The coding page appears differently for each team member, so we have to move to replit.com in order to keep everyone on the same page. Therefore, we can work on the pages collaboratively and for a consistent UI experience.
Challenge 3:
We were trying to get the footer to stick to the bottom of the page. We googled online and studied codes of different programmers, and then edited the necessary code for our project.
The lessons we learned that day is to work as a team and don’t be afraid to look up how other people fixed it.
What next?
In season 3, the pet paradise team is currently working on adding a marketplace to the site. Similar to Facebook/eBay, we are focussing on pet goods. We want to keep expanding our product and make it into a real thing for a person to use.
