Jib Camp

Inspiration

Before Bitcamp even started, our group members kept making jokes about finding ways to fit tamagotchi (the 90s toy where you take care of a virtual pet) into every project someone suggested. This stayed as just an inside joke for our group, until at the opening ceremony we had an idea: what if everyone at Bitcamp could have their own tamagotchi? The idea shifted as we started to consider how we could have all of these tamagotchis interact and become friends, and was finalized when we decided to make our own creatures, the Jibs, instead of using the original tamagotchi designs.

What it does

Jib Camp is a shared, real-time pixel world where you create and customize your own character, your Jib, by mixing and matching different bodies, faces, hats, and accessories. Once your Jib is dropped into the world, it explores on its own. Wandering the map, hanging out at the campfire, going fishing, having picnics, and engaging in even more activities that build relationships with other Jibs. Every activity gets logged in a live feed and captured as a polaroid photo. Jibs even track their best friend automatically based on who they spend the most time with. You can pan around the world, click on any JIB to see their profile and activity history, print their sprite as a PNG, and watch the whole camp grow in real time as other users join and add their own Jibs.

How we built it

The frontend is built with React and Vite. The backend is a Node.js + Express server deployed on Railway, with Socket.io powering real time activity broadcasts and Jib creation events across all connected clients. Character sprites are stored as layered PNG images and composited at render time (and via the HTML Canvas API for PNG export). We used Supabase as our database and file storage layer. The activity simulation runs server-side on a timer, randomly pairing Jibs and generating events that are broadcast instantly to every connected user.

Challenges we ran into

The first challenge we faced was with our UI. We struggled to accurately implement our Windows 95 style UI through CSS. So, we learned to use the Figma MCP integration to pull design context directly into our project, which significantly helped keep the final product looking like what we set out to build. The other major challenge was getting the activity and polaroid system to actually work once the website was deployed. locally everything loaded fine, but in production we ran into CORS mismatches, socket connections falling back to polling, and image URLs that broke when served from Supabase storage, all of which required a lot of trial-and-error debugging across Railway logs and live deploys.

Accomplishments that we're proud of

The first major accomplishment we're proud of is building and deploying a completely finished app. This is all of our first hackathon, so the idea of starting from from nothing and having a whole app deployed by the end of the weekend was honestly daunting for us, but over the weekend we learned a lot and we're really proud of what we were able to make. The second thing we are proud of is being able to completely implement our custom UI. Each sprite and UI element was handmade, so we are proud that it was able to be implemented without compromise. Finally, we're proud of ourselves for going out of our comfort zones and trying to meet as many people at Bitcamp as possible, hearing about their projects, and getting them to make a Jib of their own.

What we learned

None of us had ever deployed a full-stack application before, so figuring out how to connect a live backend on Railway to a frontend with a real database was a completely new experience. We also learned how to use Supabase from scratch, using it for our database, file storage, and real-time queries all at once. On top of that, we discovered the Figma MCP integration and learned how to use it to directly implement our design, which was something none of us had even heard of before the hackathon.

What's next for Jib Camp

Although Jib Camp is already deployed, we hope to scale the project in the future by creating new activities, adding new clothing items, and by optimizing the Jib placement in the camp so that the website won't lag with a larger user base.