Guardianes de Parques Nacionales

01

Context

Educational 2D web game. The player explores a park as a ranger, takes on missions, observes species and fills in a logbook.

Responsibilities

• Frontend contributions with Next.js, React and TypeScript, including the Canvas 2D game engine
• Backend contributions in FastAPI: player state, missions and game event processing
• Integration between the interface, the API and Supabase (accounts, sessions and guest mode)
• Backend tests with pytest and documentation, including the user manuals

02

Problem

Bring the national parks closer with a learning goal rather than a competitive one: observe without disturbing, stay on the trails and choose well.

03

Solution

A browser game with its own Canvas 2D engine, the educational content kept separate from the code, and a backend that stores progress and processes game events.

Built

• Map of Costa Rica with the six parks
• Park scene in Canvas 2D with camera, collisions and depth sorting
• Playable character in eight directions and characters with dialogue that depends on game conditions
• Supabase accounts and a guest mode with a local identity
• Achievements and per-park badges
• Missions API: states, start and completion
• Inventory, logbook and progress with a conservation index
• Game event processing
• Analytics on player behaviour and interests
• Supabase session validation with a public key
• Park completion summary and game resumption

04

Architecture

The interface, in Next.js, React and TypeScript, uses its own Canvas 2D engine independent of React (camera, collisions and depth sorting). The FastAPI backend serves player state and processes events on Supabase (PostgreSQL), with a local JSON store for offline work and tests.

05

Technologies

• TypeScript
• React
• Next.js
• Python
• FastAPI
• Pydantic
• Supabase
• pytest

06

Technical decisions

• Educational content lives in JSON with schemas, separate from the engine, so it can grow without touching code.
• A per-player lock stops two simultaneous requests from duplicating rewards.
• Tokens are validated with Supabase’s public key: the backend needs no shared secrets to authenticate.
• Tests use a local store and never write to the real database.

07

Verifiable results

• 437 backend tests pass; 36 tests against the real Supabase are skipped without credentials (8 October 2026).
• Santa Rosa is the complete park in the current scope; Rincón de la Vieja has a scene.

Known limits

• Live streaming (WebRTC) is assigned to another team member and still pending.
• Audio is disabled on purpose.

08

Screenshots and evidence

Interface on desktop and mobile

Open full size ((opens in a new tab))

Open full size ((opens in a new tab))

Screen gallery

• Open full size ((opens in a new tab))

• Open full size ((opens in a new tab))

• Open full size ((opens in a new tab))

• Open full size ((opens in a new tab))

• Open full size ((opens in a new tab))

Real screenshots of the game in guest mode, in a local environment with a temporary copy of the data. The artwork belongs to the academic team project.

Close

Documentation and tests

• User and technical manuals from the final delivery, README with the status of each feature, contribution guide, and frontend and backend tests.