Index

Education / Product engineering

Period
Apr 2025–Feb 2026
Role
Lead frontend
Focus
Product engineering
Access
Private product
Designed Graus cover with the phrase Aprende con claridad, the crowned mascot, and colorful mathematics symbols on the product's blue grid.

Overview

A connected learning system.

At Graus, I led frontend development, coordinated delivery, and shaped both the learner and administrator experiences.

Built with

  • Next.js
  • React
  • Tailwind CSS
  • GSAP
  • Lenis
  • Express
  • MongoDB

Graus product tour

A tour of Graus, from its public experience and profile tools to course authoring, learner activities, and rewards.

System

One frontend contract across changing backend conditions.

A same-origin boundary manages sessions and supports real or mock providers behind one frontend contract.

  1. 01

    Role-aware Next.js interface

    Public, authenticated, administrator, and focused activity surfaces.

  2. 02

    Same-origin API boundary

    HTTP-only sessions keep upstream authentication out of browser code.

  3. 03

    Real / mock providers

    A shared contract supports live integration and deterministic local work.

  4. 04

    Product service and data

    Express and MongoDB-backed operations supply learning and profile state.

01 / Product problem

A clear path through a deep course structure.

Courses, concepts, and activities stay connected in one hierarchy, while prerequisites show learners what opens next.

  • Course, concept, and activity hierarchy
  • Visible prerequisite and progress states
The learner home keeps courses and their available mathematics topics visible as one navigable path.

02 / Product decisions

Authoring complexity, kept away from learners.

Role-aware tools separate planning, question setup, and publishing from the focused learner runtime.

  • Role-aware administrator surfaces
  • Reusable prerequisite configuration
Role-aware authoring controls sit alongside the same course structure learners use.

Progression logic

Prerequisites stay legible while they are configured.

The editor keeps each dependency beside the activity map, making progression rules easier to understand and verify.

Administrators can select prerequisite activities while seeing their position in the learning sequence.

03 / Interaction loop

From activity to feedback and reward.

Completion feedback and rewards return each focused activity to the learner's wider sense of progress.

  • Focused activity player
  • Result and reward feedback loop
The focused runtime combines a short prompt, a visual reference, and clear answer controls.

Completion state

Results close the task before the next decision.

Performance, time, and earned experience appear together in one compact state before the learner moves on.

A concise completion state summarizes performance before returning the learner to the wider progress loop.

Reward state

Reward reconnects one activity to long-term momentum.

The streak view turns a completed exercise into visible continuity without competing with the result itself.

The matched reward state connects an individual activity to the learner's ongoing streak.

Beyond the learning flow.

Profile customization and public pages extend the same visual language across the wider product.

Drag to scroll