CyberCritters

Start Menu
Page
Page
Page
Page
Page

Inspiration

Sadly, over 230 million internet users are affected every year by cyber crimes, people that are just like us!! Spooky stuff right? With our reliance on technology on the rise, more and more of us will need to confront cyber threats within our lifetimes. Unfortunately our friend was one of such unknowing victims, lacking the vital knowledge needed to fight cyber threats, and succumbed to a ruthless scammer. However, with our project, CyberCritters, we will educate public youth on the dangers of the cyber space, decreasing the threat of cybersecurity with the power of knowledge. We did this while sticking to an eerie halloween theme to make it even more appealing to users.

What it does

CyberCritters is an interactive AI-driven story game that takes users through realistic and dangerous cyber tech journeys. This story is conveyed solely using ai generated text and images. Players can choose from several options to drive the characters in the story toward safety. Their fate is in your hands.

How we built it

Diving more into the ai-generated aspect, we used openai’s DALL-E 3 and v1 chat completion to generate a story with both images and text. We used OPENAI API in the backend, which is written in javascript. Starting the game, generating images, these are all endpoints exposed through our express backend. For the front end, we used React vite with tailwind for styling.

Challenges we ran into

Figuring out the CORS-violations making requests from frontend to backend took a surprising amount of time. It turned out to be a simple fix - enabling CORS in the Express middleware. Moreover, it was quite difficult to generate consistent choices and display them - before, it would sometimes not generate any images, or miss a choice, or get rate limited by the openai api. Fortunately, hours of tweaking allowed us to generate prompts with a relatively high degree of consistency.

Accomplishments that we're proud of

Before NewHacks, half our team never touched react or node.js before. We're proud of how we set a goal to make an ai driven story game, and saw it through to the end, despite struggling quite a bit along the way. We're overjoyed of how we never let our ignorance impel us to rack and ruin.

What we learned

We learned how to use react, accessing apis in backend on a server, and how to style an appealing website with window resize support. We also learned how to work specifically with openai to generate content in a consistent and relatively controllable manner. Furthermore, we learned how to use github in a single branch to effectively collaborate without overwriting each other's work.

What's next for Cyber Critters

Accessibility: We'd like to take CyberCritters live using our godaddy domain at bussinboomers.study!! We'd also need to rent a service to handle server processing required to execute our openai api accesses. Furthermore, we'd like to port our project into a mobile app to reach a broader variety of users.

Functionality: Being made for the little critters, we'd like CyberCritters's stories to be more appealing to kids. We'd like to generate our text to be more concise, and simpler to read. Additionally, we'd like to make the ai generated images more cartoony and fun.