StormHacks 2025 @ SFU Hackathon Project
Discover your personality through an immersive gaming experience!

PathQuest transforms the traditional MBTI personality test into an engaging, interactive adventure. Instead of answering boring questions, users navigate through four unique social scenarios as a game character, making choices that reveal their true personality type.

• 🎮 Interactive Gameplay: Navigate through 4 beautifully designed Phaser.js game scenes
• 🎯 Realistic Scenarios: Party, Office, Classroom, and Coffee Shop environments
• 🤖 AI-Powered Analysis: Personalized insights using Google Gemini 2.5 Flash
• 🎙️ Voice Narration: Immersive audio experience with ElevenLabs text-to-speech
• 📊 Detailed Results: MBTI type breakdown with percentage analysis
• 🎨 Beautiful UI: Modern, responsive design with Tailwind CSS
• ♿ Accessible: Age-appropriate recommendations (1-120 years)

Try it now: https://pathquest-ten.vercel.app/

• React 18.3 - UI library
• TypeScript - Type safety
• Vite 5.4 - Build tool & dev server
• Tailwind CSS - Styling
• Phaser 3.90 - Game engine
• Lucide React - Icons

• Google Gemini 2.5 Flash - AI personality analysis
• ElevenLabs API - Text-to-speech narration
• Express 5.1 - Local development server
• Vercel Serverless Functions - Production API

• Vercel - Hosting & deployment
• Node.js 21 - Runtime environment
• ESLint - Code linting

1. Enter Your Age - Personalized analysis based on your life stage
2. Choose Your Voice - Select your preferred narrator
3. Play Through Scenarios - Navigate 4 social situations as a character
4. Make Choices - Interact with objects and people in each scene
5. Get Results - Receive your MBTI type with AI-powered insights
6. Discover Careers - See recommended career paths for your personality

Navigate a lively party with snack tables, speakers, and decorations. Do you mingle with the crowd or stick to familiar faces?

Experience a professional workplace environment. Are you the team player or the independent contributor?

Return to an academic setting with desks, a teacher's area, and study materials. Group project or solo work?

Relaxed café atmosphere with seating areas and a counter. Work alone or join the conversation?

dumbways/
├── src/
│   ├── components/
│   │   ├── StartScreen.tsx       # Age input & voice selection
│   │   ├── QuestionScreen.tsx    # Game scenes container
│   │   ├── ResultsScreen.tsx     # MBTI results & AI analysis
│   │   └── BaseGameScreen.tsx    # Phaser game logic
│   ├── data/
│   │   ├── questions.ts          # Scene configurations
│   │   ├── personalities.ts      # MBTI type descriptions
│   │   └── sceneConfigs.ts       # Collision & layout data
│   ├── types/
│   │   ├── mbti.ts              # TypeScript interfaces
│   │   └── game.ts              # Game type definitions
│   └── utils/
│       └── mbtiCalculator.ts    # Personality scoring logic
├── server/
│   └── index.ts                 # Local Express server
├── api/
│   └── gemini.ts               # Vercel serverless function
└── public/
    └── images/                  # Scene backgrounds & assets

• Node.js 21+
• npm or yarn
• Google Gemini API key
• ElevenLabs API key (optional for voice)

1. Clone the repository

git clone https://github.com/minecraftcodingcamper/dumbways.git
cd dumbways

2. Install dependencies

npm install

3. Set up environment variables

Create a .env file in the root directory:

GEMINI_API_KEY=your_gemini_api_key_here
VITE_ELEVENLABS_API_KEY=your_elevenlabs_api_key_here

4. Run the development servers

Terminal 1 - Frontend:

npm run dev

Terminal 2 - Backend:

npm run dev:server

5. Open your browser

http://localhost:5173

npm run build

The build output will be in the dist/ directory.

This project is configured for Vercel deployment:

1. Push your code to GitHub
2. Import the project in Vercel
3. Set environment variables in Vercel dashboard:
   • GEMINI_API_KEY
   • VITE_ELEVENLABS_API_KEY
4. Deploy!

The serverless function at /api/gemini.ts will automatically handle production API requests.

• Realistic invisible boundaries around furniture and objects
• Phaser arcade physics for smooth movement
• 21+ collision objects across 4 scenes
• Debug mode available for development

• Age-specific personality insights
• Career recommendations based on MBTI type
• Detailed trait explanations (E/I, S/N, T/F, J/P)
• Powered by Google's latest Gemini 2.5 Flash model

• Multiple voice options for narration
• Text-to-speech powered by ElevenLabs
• Accessible audio controls
• Voice selection persists across sessions

• Ernest @jumiknows
• Cullen @cullendales
• Siwoon @SWL-01

• Google Gemini API for AI-powered personality analysis
• ElevenLabs for text-to-speech technology
• Phaser.js community for game engine documentation
• StormHacks organizers for hosting an amazing event