Pixelogy

Inspiration

My inspiration was seeing beautiful beaches being covered in garbage, and most people walking past the trash without thinking twice. I wanted to find a way to make cleaning up the environment something people would look forward for.

I took inspiration from games like Pokemon Go which make exploring and going out into the world rewarding. I wanted to turn picking up trash into a collection/adventure game, similar to Pokemon.

What it does

Players explore a piexelated map of their real0world surroundings using GPS. When they discover trash they can phtograph it with their phones camera. Google Gemini anaylzes the image and matches the object to a collectible in the ShoreDex.

Collected items can become equipment for the players crab. For example, a plastic bottle can become a sword, cardboard can become shell armor and bottle caps can become boots.

How we built it

I developed Pixelogy as a mobile-first web application using React, TypeScript, Vite, and Tailwind CSS, with Vercel handling deployment.

I used MapLibre with OpenStreetMap-based geographic data to create a GPS-powered overworld with a retro pixel-art appearance. The map displays the player's character and their crab companion as they explore their surroundings.

For trash identification, I integrated Google's Gemini API to analyze camera images and match recognized objects to predefined collectibles.

The game's battle system uses custom turn-based combat logic, including damage calculations, defenses, cooldowns, equipment-based abilities, and separate progression mechanics.

I also integrated Supabase for authentication and backend functionality, while using browser storage to support local gameplay progress.

Challenges we ran into

Getting GPS tracking to work correctly while making the map look like a pixel-art game required careful handling of geographic data, rendering, and character movement.

Another challenge was making the camera and AI recognition work together. I wanted users to photograph trash and unlock collectibles rather than receiving a pixelated version of their photograph.

Also, near the end I made an update, but for some reason it caused the gemini AI to be disconnected. I was able to fix this, but not before I submitted the video.

Accomplishments that we're proud of

The biggest accomplishment was creating a system where a real-world object can become part of a virtual game. Finding a piece of trash can unlock a collectible and that collectible can become equipment for a crab, and the equipment can impact how the crab performs in battle.

I'm also proud of the GPS-based pixel-art overworld, the customizable crab companion, and the original Blacktide storyline.

What we learned

Building Pixelogy taught me how to connect AI image recognition, geolocaation frontend development, database services all into one application.

I learned a lot about managing asynchronous APIs, handling permissions, designing mobile interfaces, and organizing a growing codebase.

What's next for Pixelogy

Built With

• chatgpt
• codex
• github
• googleai
• supabase
• vercel