Building a Digital Treasure Hunt

A technical case study on creating location-based games with modern web technologies

"Operation Grüner Drache" is an interactive urban treasure hunt that guides participants through eight locations in Fribourg, Switzerland, using a web application for code entry and story progression. The project demonstrates how modern web technologies can enhance physical exploration experiences.

Technical Stack

Frontend

• Next.js & React: Core framework providing server-side rendering and dynamic routing
• Tailwind CSS: Utility-first styling for responsive design across devices

Backend

• Next.js API Routes: Handle code validation and content serving
• Redis: Session management and temporary state storage

Visual Assets

• Midjourney: Generated agent IDs, logos, and atmospheric visuals
• Adobe Photoshop: Post-processing and optimization

Core Implementation

The application centers around a simple yet effective code input system:

const CodeInputComponent = () => {
  const [code, setCode] = useState('');
  const router = useRouter();

  const handleSubmit = (e) => {
    e.preventDefault();
    if (code.length === 6) {
      router.push(`/${code}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={code}
        onChange={(e) => setCode(e.target.value.toUpperCase())}
        maxLength={6}
        placeholder="ENTER CODE"
      />
      <button type="submit" disabled={code.length !== 6}>
        Submit
      </button>
    </form>
  );
};

Game Structure

The treasure hunt follows a linear progression through eight Fribourg locations:

1. Bahnhof - Starting point and mission briefing
2. Rue de Lausanne - First clue location
3. Rathausplatz - City center investigation
4. Kathedrale - Historical exploration
5. Murtentor - Medieval gateway
6. Poya-Haltestelle - Modern transport hub
7. Grandfey-Viadukt - Engineering marvel
8. Finale - Mission completion

Each location provides a six-character alphanumeric code that participants enter to access the next story segment and receive their next objective.

Key Features

Dynamic Routing

Next.js file-based routing automatically creates pages for each station code:

/pages/[code].js → Handles any 6-character code input

Error Handling

Invalid codes redirect to a custom 404 page with themed messaging encouraging players to search more carefully.

Mobile-First Design

Tailwind CSS ensures optimal experience across devices, crucial for outdoor gameplay.

State Management

Redis stores game progress and session data, allowing players to resume their adventure if interrupted.

Architecture Benefits

• Scalability: Redis caching and Next.js optimization handle multiple concurrent users
• Performance: Server-side rendering provides fast initial loads on mobile networks
• Maintainability: Clean separation between game content and application logic
• Flexibility: Easy to add new stations or modify existing content

API Route Implementation

Here's how the backend handles code validation:

// pages/api/validate/[code].js
export default async function handler(req, res) {
  const { code } = req.query;
  
  // Check if code exists in valid stations
  const stationData = await redis.get(`station:${code}`);
  
  if (stationData) {
    return res.json({ 
      success: true, 
      data: JSON.parse(stationData) 
    });
  }
  
  return res.status(404).json({ 
    success: false, 
    message: 'Invalid code - check your surroundings more carefully!' 
  });
}

Results

The system successfully creates an engaging phygital experience that:

• Seamlessly blends digital interaction with physical exploration
• Maintains narrative immersion through consistent theming
• Provides reliable performance across various mobile devices
• Offers scalable infrastructure for multiple simultaneous players

Technical Specifications

• Frontend: Next.js 14.0.4, React 18.2.0, Tailwind CSS 3.4.0
• Backend: Node.js 18.x, Redis 7.0
• Deployment: Vercel Platform
• Compatibility: iOS Safari 14+, Android Chrome 90+, modern desktop browsers

Conclusion

This project demonstrates how modern web technologies can enhance real-world experiences without requiring complex infrastructure. The combination of Next.js, Redis, and thoughtful UX design creates a robust foundation for location-based gaming applications.

The success lies in keeping the technical implementation simple while focusing on user experience and narrative engagement. This approach makes the system maintainable and easily extensible for future treasure hunts or similar interactive experiences.

Source code and implementation details available for developers interested in creating similar location-based experiences.