Echoes of The State

Echoes of the Estate is an AI-powered interactive horror experience where you explore a haunted mansion and have real conversations with a ghost.

Comment

🎃 Inspiration

The idea for Echoes of the Estate came from a desire to blend classic gothic horror storytelling with cutting-edge AI technology. I wanted to create an experience that felt both nostalgically atmospheric like reading a Victorian ghost story by candlelight and innovatively interactive. The question that drove me was: "What if you could actually talk to a ghost, and they would respond intelligently to your empathy, curiosity, or fear?"

Halloween hackathons are the perfect opportunity to push creative boundaries, and I was inspired by games like Until Dawn , The Walking Dead , and the most important Life in Adventure where player choices matter, combined with the potential of AI to create truly dynamic, unrepeatable conversations.

🎯 The Problem & Solution

Static horror games lack replayability - once you've seen all the scripted branches, the magic fades.

Echoes of the Estate solves this with dynamic AI conversations that create unique, personal experiences every time. Combined with multi-language support, it makes horror storytelling truly global and infinitely replayable.

🌍 Multi-Language AI Ghost

One of my proudest technical achievements: Eleanor speaks 6 languages ** (English, Spanish, Portuguese, French, Hindi, and Japanese). **This isn't just translation - it's full personality localization where the AI maintains her Victorian ghost personality across all languages, with culturally appropriate responses in each language.

🛠️ How I Built It

Echoes of the Estate is a full-stack web application combining React for the frontend and Node.js/Express for the backend, with Anthropic's Claude AI as the heart of Eleanor's ghost.

Frontend Architecture

  • React with Context API for global state management
  • 6 well-organized component files demonstrating clean code architecture
  • Atmospheric design using CSS-in-JS with custom fonts (Creepster, Special Elite)
  • Web Audio API for smooth music transitions between rooms with fade effects
  • Save system using both localStorage (auto-save) and base64-encoded portable save codes

Backend Infrastructure

  • Express.js server acting as a secure proxy to Claude API
  • Password authentication system for demo access
  • CORS configuration for seamless frontend-backend communication
  • Error handling and health check endpoints

AI Integration

Eleanor's personality is achieved through careful prompt engineering. I crafted system prompts that define her as:

  • A melancholic Victorian-era ghost (died 1892)
  • Speaking in elegant, archaic English
  • Aware of the current room and player trust level
  • Responsive in 2-4 atmospheric sentences

The trust system dynamically influences her responses: higher trust leads to more revealing conversations.

🎨 Design Process

I focused on creating an immersive atmospheric experience:

  1. Visual Design: Dark purple/black color palette with orange accents (#ff6b35) for that classic Halloween aesthetic
  2. Typography: Horror-themed fonts that remain readable
  3. Room System: Each of 6 rooms has unique descriptions, music, and interconnected navigation
  4. Responsive Design: Fully playable on mobile and desktop
  5. Music Credits: All tracks by Kevin MacLeod, properly licensed under CC BY 4.0

🧠 What I Learned

Technical Discoveries

  • AI Prompt Engineering: Learned how to create consistent character personalities through system prompts
  • React Context API: Mastered centralized state management without Redux
  • Audio Management: Implemented smooth fade-in/fade-out transitions for ambient music
  • Save System Architecture: Built both browser-based and portable save mechanisms

Soft Skills

  • Code Organization: Splitting a 1000+ line component into 6 clean, maintainable files
  • User Experience: Balancing atmospheric storytelling with intuitive navigation
  • API Cost Management: Implementing efficient conversation history management (only last 10 messages sent to API)

Challenges & Solutions

Challenge 1: Infinite Render Loops

Problem: useEffect dependencies causing the game to freeze
Solution: Learned proper dependency array management and strategic use of eslint-disable comments

Challenge 2: Music Transitions

Problem: Abrupt audio cuts between rooms broke immersion
Solution: Implemented fade-in/fade-out using intervals and Web Audio API volume control

Challenge 3: Mobile Responsiveness

Problem: Absolute-positioned buttons broke on mobile
Solution: Switched to flexbox layout with responsive breakpoints

Challenge 4: File Organization

Problem: Started with one massive 1000+ line App.js
Solution: Refactored into 6 clean files (contexts, components, data) demonstrating proper React architecture

🏆 Accomplishments I am Proud Of

✨ Created a fully functional, atmospheric game in hackathon timeframe
✨ Clean, well-commented code architecture perfect for hackathon judging
✨ Multi-language - Eleanor speaks 6 languages while maintaining consistent Victorian personality ✨ Integrated Claude AI for dynamic, context-aware conversations
✨ Built a complete save system with both auto-save and portable codes
✨ Implemented smooth audio system with fade transitions
✨ Made it fully responsive - works great on phones and tablets
✨ Proper attribution for all music and fonts (CC BY 4.0 compliance)

🚀 What's Next for Echoes of the Estate

I have exciting plans to expand the experience:

  • Multiple Endings: Different story outcomes based on final trust level
  • More Rooms: Expand the mansion with hidden areas and secret passages
  • Inventory System: Collect items that unlock new dialogue options
  • Voice Synthesis: Add Eleanor's voice using text-to-speech for even more immersion
  • Multiplayer Mode: Explore the mansion with friends, making choices together
  • Achievement System: Unlock badges for different interaction paths
  • Mobile App: Native iOS/Android versions for on-the-go ghost hunting

🎯 Technical Highlights

Frontend:

  • React 18 with Hooks
  • Context API for state management
  • Responsive CSS-in-JS
  • Web Audio API with fade effects
  • localStorage + base64 save system

Backend:

  • Node.js + Express
  • Anthropic Claude API integration
  • Password authentication
  • CORS configuration
  • RESTful API design

DevOps:

  • Deployed on Netlify (frontend) and Render (backend)
  • Environment variable management
  • CI/CD pipeline via GitHub

Built for BUILD Halloween Hacks 2025 🎃
"The past never truly dies... it merely waits in the shadows."

Built With

Share this project:

Updates

Submission history