UC Santa Cruz's Tech4Good Lab is a research and social computing organization dedicated to helping individuals and communities to thrive in work and education. During my time at the lab, I worked on the APIs and Frameworks team where I was involved in developing Causeway, an educational web app designed to provide web dev tutorials for students and new lab members through streamlined learning pathways, project hierarchies, mentorship, and collaboration.

I worked on improving the user experience of Causeway to encourage hands-on and interactive learning. This involved developing and integrating several new core features:

• Code editor and live output: Using JavaScript and HTML, my teammate and I created two new components, an Editor pane for writing and saving code, and a dynamic Output pane to display the results of the code. We used the Stackblitz WebContainer API, which offers a browser-based runtime environment for executing applications and operating system commands, along with CodeMirror to achieve this functionality, and imported a basic Express JS app into the WebContainer to test our code.

• Terminal: In order to perform actions like installing dependencies or running commands, we embeded a Terminal pane using Xterm.js and created a button to easily toggle between the Terminal and Output for a better user experience.


• File System Pane: Lastly, we use the Angular mat-tree component to create a file system pane UI, which involved recursively traversing through the directories with the readdir function and updating the code editor based on selected files.

Coming from very little frontend development experience, I learned a ton about developing with APIs, choosing frameworks and integrating components, and turning requirements into tangible results in a matter of weeks. It was awesome to be a part of Tech4Good's mission, contribute to Causeway's beginnings, and create the foundation for future developers and lab members to iterate upon our work!