Skip to main content
Software•2026•Independent Developer

Pijar Nusantara: Interactive IPAS Learning App

An interactive Indonesian-language learning web app designed for elementary school students, featuring gamified IPAS learning activities, educational content, and quizzes.

View Demo

Technologies

ReactTypeScriptViteReact RouterTailwind CSSZustandFramer Motion@dnd-kit/core

Problem & Context

Pijar Nusantara began as a planned KKN (community service program) work program: an interactive learning application for elementary school students. The program was not continued because the KKN did not permit targeting school students, so the idea was built instead as an independent project.

The application targets grade 3–4 students and follows the Kurikulum Merdeka, starting with IPAS (integrated natural and social science). Learning material was based on Kurikulum Merdeka references from the Ministry of Education and supplemented with related information collected with AI assistance.

Goal

Build an interactive, game-based learning web application in Indonesian for grade 3–4 elementary students, starting with an IPAS module, with Mathematics and Language modules planned for later.

Approach

Organized the application as a dashboard of subject modules, with IPAS as the only module available so far. The IPAS module is designed as a mission map of five missions, where each mission has three levels that must be completed to unlock the next one. Three missions are implemented: biodiversity (Indonesian flora and fauna, habitats, and conservation), the water cycle, and energy transformation.

Each mission combines learning cards, drag-and-drop activities, and quizzes, with scores, progress, and sound and animation feedback to keep the experience game-like. The application was developed independently, with AI coding assistants supporting implementation, and its illustrations were generated with AI.

Technical Implementation

Built as a single-page web application with React, TypeScript, and Vite, using React Router for navigation and Tailwind CSS for styling. Zustand with local persistence stores the player name, scores, and mission progress in the browser, so the application needs no backend. @dnd-kit/core powers the drag-and-drop activities, Framer Motion handles animation, and sound effects are generated with the Web Audio API. Educational content lives in structured data files separate from the interface components. The demo is deployed on Vercel.

Outcome

A working prototype with three IPAS missions covering biodiversity, the water cycle, and energy transformation, including learning cards, drag-and-drop activities, quizzes, scoring, and local progress tracking, available as a live demo. The remaining two IPAS missions and the Mathematics and Language modules are planned but not built. The application has not been tested with students or teachers, so no learning outcomes are claimed.

Lessons Learned

The interface is currently optimized for desktop only and still needs a responsive, touch-friendly layout. The drag-and-drop game is not yet intuitive, mainly because of item spacing and scroll behavior, and the overall game flow still needs refinement. Because the application has not been tried by real users, these problems were identified through self-review rather than user feedback. The next steps are fixing these interactions, adapting the layout for tablets and phones, and testing with students and teachers before building the remaining missions.