Cat-astrophe! | Devpost

Landing page
Wireframes 1
Wireframes 2

Inspiration

We were inspired to create something that sparked joy for all of us, and we realized that we all adored cats. We also talked about our strengths and limitations, and also what our goals were from participating in this hackathon. From there, we decided to work on a cat-related website, with implementations of APIs and interactive features. Some days it’s just raining cats and dogs. This weekend, our team decided that it was going to rain cats.

What it does

Our website allows users to sign up for an automated messaging service, where they will receive a random cat fact when they enter their phone number. However, to get to that service, we implemented a story-telling scene that the user is required to click through. They are also sometimes presented with two choices and picking one would result in a different dialog than the other.

How we built it

Our website is built on HTML/CSS front-end and Python back-end. We utilized the Twilio API to implement an automated messaging service. We also used the Cat Fact API to generate a random cat fact into the text. We used GitHub as our main hub to collaboratively work on the project. Last but not least, we deployed our website on Google Cloud Services.

Challenges we ran into

While Twilio is a free-to-use public API, it has limitations that are withheld to those who pay the premium. We are unable to directly text anybody who has not verified their phone number with our Twilio account and thus, has limited our reach for the app to our own personal phone lines. As time was a concern, we had trouble balancing between completing our tasks and making sure that we were pushing files onto GitHub in the correct order. At one point, we accidentally merged the main branch with an older version of our app.py file, which did not contain any functionalities yet. An example of this would be a form method POST in ourService.html. We quickly learned that keeping our individual programs up to date with the main branch would prove crucial to being consistent. After all of this hard work, being able to show it off to the world also proved to be an adversary with Google Cloud Services throwing us into a sign-up loop, learning how to utilize yaml type files and requirements.txt to act as keys to hosting our domain, http://cat-astrophe.tech/

(As a back-up, we also have: https://cat-astrophe-344709.ue.r.appspot.com/landingPage)

Accomplishments that we're proud of

We are extremely proud of ourselves for completing such a detailed and extensive product in less than 2 days. We pushed our limits to not only learn new things, but also apply new knowledge to manifest our ideas. Last but not least, we are proud of successfully creating something that we were all equally excited for!

What we learned

Learned how to utilize the data from a couple APIs into one consolidated product. Learned how to solve issues on GitHub by inspecting and retrieving prior commits. Learned new design aspects and how to integrate both front and back-end.

What's next for Cat-astrophe

Our original goal was to create a subscription-based service, where users can sign up for cat facts to be sent everyday through text. With that, we could expand on having user log-in features and databases to keep track of user info. We were also thinking of allowing users to enroll friends, and implementing a Tweet Bot to tweet their reactions. Financial-related improvements would be to subscribe to Twilio so that we can further develop our ideas with ease. Better accessibility with a permanent domain would also help keep the longevity of Cat-astrophe. Finally, a fun idea would be to create a Dog version of Cat-astrophe! Wouldn’t that be a Dog-saster?

Built With

Submitted to

HackGSU 2022
- Winner Most Creative Use of Twilio

Created by

I helped in the initial design process. My main tasks were to combine the wireframes and develop them using HTML/CSS. I created several functionalities such as the navigation bar and the scrolling function.

Chloe Ng
- I assessed cat facts, the cat, and Twilio APIs to communicate with each other.
- Utilized Google Cloud Services to host our domain as a stage to broadcast our mission.

Jason Rosmaidy
I used Figma to create low-fidelity wireframes for the outlook of the webpage. I worked on the About page using HTML/CSS. I helped include some descriptions for the README instructions prior to the project. I also contributed on the catchphrases that led to the inspiration for our project. I also contributed on the catchphrases to push on the marketing view of this project.

Randy Kosasih
I worked on bridging communications from the front-end HTML forms with our various cat and Twilio backend APIs. I also managed a fair bit of DevOps whenever merges to main broke the code.

zi yon