ŚTEṈ-Walk the land, speak the words

A location based language learning game designed to help students learn SENĆOŦEN.

Comment

🗺️ Adventure Map Game Hub

A web-based interactive map featuring multiple points of interest that guide players to mini-games. Each location has its own theme and corresponding challenge — blending fun, learning, and exploration into one connected experience.

💡 Inspiration

This project was inspired by the interest in creating interactive learning environments that merge education, exploration, and play. We wanted to design a system where players could discover knowledge by navigating a map, much like embarking on a digital adventure.

Each themed area — from the 🌊 Ocean to the 🌳 Forest — represents a different environment and learning domain. The concept also draws inspiration from gamified education, where knowledge unfolds through exploration rather than instruction.

🧠 What I Learned

Throughout the project, I deepened my understanding of both technical game development and frontend architecture.

Some of the key lessons include:

  • Integrating Phaser.js mini-games inside a React application using lifecycle hooks such as useEffect and useRef.

  • Managing state synchronisation between React and Phaser scenes for seamless transitions.

  • Building an interactive map using Leaflet and connecting it with modular game routes through React Router.

  • Structuring a multi-page web app for performance and scalability.

  • Implementing UI design principles with Tailwind CSS for responsiveness and clarity.

  • Handling data requests via a Node.js + Express backend to fetch dynamic content like word lists and game data.

From a design perspective, I also learned how subtle visual feedback and interactivity enhance player engagement — making educational games more immersive.

🎮 Features

Interactive Map: Clickable points of interest guide players to different games.

Multiple Themes: 🌊 Ocean 🌳 Forest 🏫 School 🛒 Grocery Store

Mini-Games: Each theme hosts its own unique challenge built with Phaser.js.

Dynamic Navigation: Players return to the map after completing a game to explore new areas.

🗺️ Map Navigation Flow

Users begin on the central map interface.

Clicking a location provides context and a brief story.

The player is redirected to the corresponding mini-game page.

Upon completion, they can return to the map and continue exploring.

⚡ Technology Stack Layer Tools Frontend React, Tailwind CSS, Phaser.js Backend Node.js + Express Routing React Router Data Handling REST API for game word lists

⚙️ Challenges Faced

React–Phaser Integration: Phaser manages its own render loop, so ensuring state consistency with React required careful handling of lifecycle methods and cleanup.

Routing Transitions: Smoothly returning to the map without reloading the page involved maintaining shared game state across routes.

User Experience Design: Balancing simplicity with interactivity — ensuring players feel guided but still free to explore.

Backend Data Fetching: Creating a flexible data API for each mini-game theme while keeping it scalable for future additions.

✨ Reflection

Building the Adventure Map Game Hub taught us how to combine frontend engineering, game development, and educational design into a cohesive experience. It strengthened our problem-solving mindset and deepened our understanding of real-time game architecture in the web ecosystem.

Most importantly, this project reaffirmed our beliefs that learning through play can bridge creativity, culture, and technology — inspiring curiosity while making education more engaging.

🌟 Future Improvements

  • Add more themed environments and stories.

  • Introduce scoreboards and player achievements.

  • Implement a progression system, allowing users to unlock new games.

  • Enhance accessibility with multilingual options and audio cues.

Share this project:

Updates