Microprocessor lab, reimagined for the browser.

UI/UX & Frontend2 monthsDec 2025CET, Trivandrum

FRONTENDWEB DEV

Overview

A web-based emulator for MPMC (Microprocessor & Microcontroller) architecture. Built to help students learn assembly programming without needing physical hardware kits.

GitHub Repo Live Site

Project Process

Discovery & Brief

Identified student pain points with lab hardware.

Research & Requirements

Studied existing emulator solutions.

Wireframing & IA

Designed intuitive code editor + output layout

Visual Design

Clean, educational-focused interface

Development

React + Zustand for state management

Testing & Launch

Tested with 50+ students for usability

The Challenge

Complex microprocessor instruction set needed accurate emulation
Students found existing tools unintuitive and hard to use
Required real-time code execution feedback

The Approach

Built a simplified instruction parser with step-by-step execution
Designed a split-panel editor with visual register/memory display
Added example programs and inline documentation

Process & Methodology

Phase 01

Research

Analyzed existing emulators like GNUSim8085 and identified UX gaps that made them difficult for beginners.

Phase 02

UI Design

Created a clean, distraction-free interface with a Monaco-based code editor and real-time register state visualization.

Phase 03

Development

Built with Next.js, Zustand for state management, and a custom assembly parser written in TypeScript.

UI Design / Final Visuals

Conclusion

The emulator became the primary learning tool for 3rd-semester CS students, reducing dependency on physical lab kits and enabling remote learning.

PreviousHerakles Racing CET Up nextPgBee