Office-RPG: Bridging the Modern Skills Gap with Gemini 3

🚀 The Inspiration

Transitioning from a classroom to a corporate cubicle is often a "sink or swim" experience. While students may master theory, they frequently struggle with the multidimensional pressures of a real office—balancing technical tasks with soft skills, stress management, and deadline prioritization. We built Office-RPG to turn this daunting transition into an immersive, low-risk simulation where the next generation of professionals can "level up" before their first day on the job.


💡 The Gemini 3 Advantage

Our project leverages the Gemini 3 model as the "Game Master," moving beyond static gameplay to a truly dynamic environment.

  • Infinite Dynamic Quests: Unlike traditional simulators with hardcoded scenarios, we use Gemini to procedurally generate coding challenges, reading comprehension tasks, and workplace MCQs. This ensures no two "workdays" are the same.
  • Contextual Feedback: Gemini analyzes player performance in real-time, providing constructive, AI-driven feedback that mimics a mentor’s guidance rather than a simple "Pass/Fail" screen.
  • Adaptive Difficulty: The model adjusts quest complexity based on the player's evolving skill stats (Coding, Soft Skills, Problem-Solving), ensuring the game remains challenging but achievable.

🛠️ The Google Tech Stack

To build a scalable, high-fidelity experience, we utilized a robust Google-centric ecosystem:

  • Gemini API: The core engine for dynamic content and intelligent NPC interactions.
  • Firebase Authentication: Secured, seamless onboarding via GitHub and Google login.
  • Firebase Hosting: Optimized delivery for our high-performance React frontend.
  • Google Cloud Functions: For serverless processing of game logic and AI prompts.

🕹️ How We Built It

We adopted a modern, responsive architecture to ensure the simulation felt like a premium consumer game:

  • Frontend: React + Vite for speed, paired with Tailwind CSS and Shadcn/UI for a sleek, corporate-themed aesthetic.
  • State Management: Framer Motion for smooth "Zone Transitions" (Workspace to Cafeteria) to enhance immersion.
  • Backend: A Python/Flask API layer to bridge the frontend with Gemini’s generative capabilities.
  • Game Mechanics: A dual-axis stat system inspired by RPGs.

The Performance Logic: Performance = (Skill Level * Mood) / Stress

Players must balance productivity with "Mental Health" by visiting the Game Lounge or Cafeteria to prevent burnout.


🚧 Challenges & Learnings

  • Prompt Engineering for Consistency: Initially, AI-generated quests varied too much in format. We learned to use strict JSON schema prompting to ensure the frontend could reliably parse Gemini's output.
  • State Equilibrium: Balancing the "Stress vs. Reward" mechanic was tough. We had to iterate on the math to ensure the game felt like a challenge rather than a chore.
  • Real-time Immersion: Integrating a live "Office Music Player" and digital clock taught us the importance of ambient UX in educational tools.

🌍 Impact & SDGs

Office-RPG isn't just a game; it's a tool for SDG 8 (Decent Work & Economic Growth) and SDG 4 (Quality Education). By democratizing "vocational training" through a free web app, we are preparing youth for a resilient future.

"Office-RPG transforms the anxiety of the first job into the excitement of the first quest."


Built With

Share this project:

Updates