Choose your character
Choose your gender
Enter your name
Project map - 1
Project map - 2
Access food from other players' fridges or add your leftover meals to share
Talk to NPCs at the Hokie House
Have fun at the Centros

Foodiverse

Live Demo: https://foodiverse-vthacks.vercel.app/

Inspiration

Foodiverse was inspired by the real challenges students face with food insecurity and waste on college campuses. We wanted to create a solution that gamifies food sharing while making it accessible and inclusive for everyone. The pixel-art aesthetic was chosen to create a welcoming, nostalgic environment that removes barriers and makes food resource sharing feel like a fun community activity rather than a stigmatized necessity. We were particularly motivated to center equity and accessibility from the ground up, ensuring that students with different abilities, backgrounds, and identities could all participate meaningfully in campus food sharing.

What it does

Foodiverse is a pixel-art campus world where students can discover and share food resources through community fridges and mutual-aid listings. Players create inclusive characters with customizable pronouns and navigate a 2D campus environment to interact with virtual community fridges that mirror real-world food sharing locations. The platform features:

Interactive Campus World: A pixel-perfect 2D environment with keyboard-first navigation
Community Fridges: Virtual fridges where students can add, browse, and claim food items
Real-time Updates: Live notifications when new food becomes available via Server-Sent Events
AI Integration: Gemini AI for food identification from photos and recipe suggestions
Social Features: Chat with "Jake" the AI bartender for campus life advice and community building
Inclusive Design: Comprehensive character creation with diverse representation and custom pronouns
Accessibility: Full keyboard navigation, ARIA live regions, and high-contrast design

How we built it

Frontend: Built with Next.js 15 and TypeScript, featuring a custom canvas-based game engine with pixel-perfect rendering. The game world uses a sophisticated scene management system with collision detection, character animation, and real-time UI overlays.

Backend: Express.js server with PostgreSQL database, implementing RESTful APIs for food listings, user authentication, and real-time features through Server-Sent Events.

AI Integration: Google Gemini AI for food identification from images and conversational AI through the "Jake" bartender character, providing campus life advice and community interaction.

Real-time Architecture: Custom SSE implementation for live updates of food listings and community activity without the overhead of WebSockets.

Accessibility: Comprehensive keyboard navigation system, ARIA live regions for screen readers, and inclusive character creation with diverse representation options.

Challenges we ran into

Canvas Performance: Implementing smooth 60fps pixel-perfect rendering while maintaining responsiveness across different devices required careful optimization of the game loop and rendering pipeline.

Real-time Synchronization: Building a robust Server-Sent Events system that handles connection drops, reconnections, and ensures all clients stay synchronized with food listing updates was technically challenging.

Accessibility in Games: Creating a fully keyboard-navigable pixel game while maintaining accessibility standards required innovative approaches to UI design and input handling.

AI Integration Reliability: Implementing fallback systems for when Gemini AI is unavailable, ensuring the app remains functional even when AI services are down.

Database Schema Design: Designing a flexible schema that supports different types of food listings, user permissions, and building/apartment structures while maintaining performance.

Cross-Platform Compatibility: Ensuring consistent pixel-perfect rendering and input handling across different browsers and devices.

Accomplishments that we're proud of

Inclusive Design Leadership: Successfully implemented one of the most comprehensive inclusive character creation systems we've seen, with diverse representation and custom pronoun support built from the ground up.

Technical Innovation: Created a sophisticated real-time game architecture that combines modern web technologies with retro pixel aesthetics, achieving smooth performance and responsive gameplay.

Accessibility Excellence: Built a fully keyboard-navigable game experience with proper ARIA support, proving that games can be both fun and accessible.

AI Integration: Successfully integrated multiple AI features (food identification, conversational AI) that enhance the user experience without being gimmicky.

Community Impact: Designed a platform that addresses real food insecurity issues while removing stigma through gamification and community building.

Full-Stack Execution: Delivered a complete, production-ready application with frontend, backend, database, real-time features, and AI integration all working seamlessly together.

What we learned

Accessibility is Design, Not an Afterthought: Building accessibility features from the beginning resulted in a better user experience for everyone, not just users with disabilities.

Real-time Systems Complexity: Implementing reliable real-time features requires careful consideration of edge cases, connection handling, and fallback mechanisms.

AI Integration Best Practices: Learned the importance of graceful degradation and fallback systems when integrating AI services that may be unreliable.

Game Development in Web: Discovered the challenges and opportunities of building game-like experiences using web technologies, including performance optimization and input handling.

Community-Centered Design: Learned that addressing social issues through technology requires deep consideration of user psychology, stigma, and community dynamics.

TypeScript in Complex Projects: Gained experience with TypeScript's benefits for large, multi-component applications with complex state management.

What's next for Foodiverse

Mobile Optimization: Develop touch-friendly controls and responsive design for mobile devices to increase accessibility.

Enhanced AI Features: Expand Gemini integration for nutritional analysis, dietary restriction matching, and personalized food recommendations.

Community Features: Add user profiles, reputation systems, and community challenges to increase engagement and build stronger campus food-sharing networks.

Multi-Campus Support: Scale the platform to support multiple universities with campus-specific customization and inter-campus food sharing.

Analytics Dashboard: Implement impact tracking to measure food waste reduction and community engagement metrics.

Integration Partnerships: Partner with campus dining services, food pantries, and sustainability offices to create a comprehensive campus food ecosystem.

Advanced Accessibility: Add voice navigation support and screen reader optimizations to make the platform even more inclusive.

Sustainability Tracking: Implement features to track environmental impact and food waste reduction to gamify sustainability efforts.