Case Study

Space Otaku Case Study

A space education build listed in the published portfolio as receiving 1st Prize, using a custom canvas game loop, an ISS tracker, Dialogflow support, and monitoring tooling to make the experience interactive without reducing it to a gimmick.

2024Portfolio-listed 1st Prize

Problem

What had to be solved before the UI mattered

The challenge was to make a space-learning product engaging enough to hold attention while still keeping the educational layer credible. The most demanding part was shipping interactivity that felt game-like without dragging the rest of the experience into a heavy framework.

Timeline

How the project moved from scope to delivery

Discovery

Product framing

Scoped engagement around education first

I framed the build around interactive learning rather than pure gamification so every major feature still pointed back to the educational goal.

Evidence / Result

The existing project brief and module structure both center educational usage rather than standalone gameplay.

Implementation

Gameplay module

Built a custom shooter loop inside the web app

The most demanding interaction was implemented as a purpose-built canvas system using requestAnimationFrame, keeping the module fast and local to the product instead of introducing a larger framework dependency.

Evidence / Result

The repository includes a dedicated SpaceShooter component with a custom animation loop.

Integration

Learning features

Added live ISS tracking and Dialogflow support

I combined real-time feeling product features with the main educational experience so the platform had more than one form of interaction.

Evidence / Result

The repo contains an ISSMap component with polling logic and a Dialogflow API route.

Launch

Reliability and recognition

Hardened the experience and shipped it as a competition-ready product

I backed the interactive surface with monitoring and delivered it as a complete project; the published portfolio lists it as receiving 1st Prize.

Evidence / Result

The repository includes Checkly configuration; the prize reference is a published portfolio claim.

Key Decisions

Tradeoffs that shaped the build

Build the shooter as a custom canvas module

The game experience needed direct control over rendering and update cadence, but the rest of the product still lived inside a standard web application.

Use a full game frameworkAvoid a real-time module entirelyImplement a purpose-built canvas loop inside React
Decision

I built the Space Shooter around a custom canvas game loop so the most interactive feature stayed tightly scoped and performance-aware.

Tradeoff: A custom loop gives more control, but it also means owning more of the gameplay architecture directly.

Impact: The game became a differentiating module without forcing the entire product into a game-engine-first architecture.

Keep live educational data in the product flow

A static space site is less compelling when users can reasonably expect real-world context such as ISS tracking.

Ship only static educational contentEmbed third-party widgetsIntegrate an internal ISS map and polling flow
Decision

I added an ISS tracker flow that polls an internal API and computes user distance in the interface layer.

Tradeoff: Polling adds moving parts and requires discipline around update cadence.

Impact: The site feels closer to a living learning product than a static educational brochure.

Treat observability as part of delivery

Interactive APIs and chatbot flows degrade trust quickly if they fail silently.

Rely on manual checkingMonitor only the deployment platformAdd explicit synthetic monitoring for the product
Decision

I included Checkly-based monitoring so the product had a reliability posture beyond basic deployment success.

Tradeoff: This added operational setup to what could have remained a purely feature-focused project.

Impact: The project demonstrates product stewardship, not just feature implementation.

Architecture

The system decisions behind the product surface

The product is built as a Next.js application with multiple learning modules rather than as a single-purpose game shell.

For the most performance-sensitive experience, the Space Shooter module uses a custom canvas loop inside the React application instead of depending on a heavyweight game engine.

The broader product combines API-backed features such as the ISS tracker and Dialogflow support, with monitoring infrastructure to keep those integrations observable after launch.

Results

The project became a stronger credibility piece because it shows range: real-time canvas work, API-backed educational interaction, chatbot integration, and a reliability mindset. The published portfolio lists a 1st Prize recognition claim for the project.

Takeaways and Next Moves

This project shows I can cross the boundary between application engineering and interactive systems work while still keeping the product grounded in a clear user outcome.

Lessons Learned

  • Interactive learning products need a clear educational spine or they collapse into disconnected demos.
  • Owning the rendering path directly can be worth it when a single feature has very different performance needs from the rest of the app.

Next Improvements

  • Refine the live-data cadence and loading states around the ISS experience.
  • Expand the monitoring and performance evidence around the most interactive modules.
AnkurOS·v0.134.7ready·--:--:--

Full-stack software engineer portfolio · Initialising

-- projects · -- certificates · -- blog posts

Loading0%
Loading AnkurOS