Team
> Krisan Manoharan | Developer
> Sorren Jao | Developer
> Noriko Jao | Character Animator
> Abeytha Thuraisingam | UI Designer
Beastly Bonds is a fun little game where users can take care of their virtual pet in real-time. This means, just like a real pet, the player can’t take a break and must attend to their pet (closing the app can’t cheat your way out of responsibility). There are various ways to care for your pet, including feeding them, cleaning them, playing with them, or chatting with them.
The stack includes React, JavaScript, Node.js, Express.js, PostgreSQL, Amazon web service RDS, SupaBase, Sentiment AI and Render.
At the very start of the game, the player can adopt a pet. They can choose a species, and give it a name and a colour.
Beastly Bonds has a variety of ways to manage their pet. With a cloud database server, each of the pet’s attributes: hunger, energy, happiness, and cleanliness are constantly being decremented overtime until reaching zero. It’s up to the player to give their pet the respective items or actions to maintain their stats.
Click and drag a food item to replenish some hunger.
Click and drag a toiletry item to replenish some cleanliness.
Chat to your pet, and give it your affection. Complimenting your pet will replenish it’s happiness. However, giving it a mean or negative response will make it sad, and losing happiness. Sentiment AI detects whether the response sounds positive or negative by giving it a score.
Pressing the sleep button will allow the pet to sleep to restore it’s energy.
When your inventory seems to be running low, you can always enter the shop to purchase some more items, with a price.
When money seems a bit low, you can always earn some more by playing the math game. Train with your pet and answer some basic arithmetic questions before the time runs out to earn your cash. The more correct answers reward you with more cash.
As this was one of my first major react full-stack projects, my team faced various challenges diving in but ultimately persevered. As I was new to API fetching I had originally fetched the entire database for every set intervals. This was bad practice, and I was eating up memory quickly. I realized that keeping the code clean and only dedicating certain columns and tables to be updated when appropriate was the solution. This more modular approach was key to being more memory efficient, which resulted in less lag and alleviated unexplainable glitchy behaviours.
This modular approach was taken to my workflow, isolating key pet interactions to certain chunks before merging them together. This ensures that each key function was working properly.
My role in this project was mainly centred around the backend development and fetching apis from the database to Express.js and communicating it to the React Router. It was also my role to deploy the stacks to Render.com and deploy the database to AWS RDS via Supabase. Running it through a cloud database ensures that the pet is updated at real-time, with decrementing values as real-time passes.
Overall this project taught me practical experience in deploying a full-stack react app and working with API fetching, as well as managing a development workflow with my team, such as using Trello to communicate tasks to be completed as well as merging git contributions.
As I conclude this documentation, I’m currently working on implementing a user registration and sign up, in order to personalize the process of managing pets. I’m also considering to implement an AuthO allowing for an external provider to manage user authentication, this includes having Google, or Facebook manage the sign-up and registration process.
Another idea was to implement a competitive system where users could compare how well they take care of their pet among the rest of the player base. This could just be a simple high scoreboard where the players with the highest base stats of their pets (which includes energy, hunger, cleanliness, and happiness) for the longest time since adopting the pet will be listed at the top.