Causeway
/ UCSC Tech4Good Lab

Overview

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

Contributions

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 embedded a Terminal pane using Xterm.js and created a button to easily toggle between the Terminal and Output pane for a better user experience.
• File System Pane: Lastly, we used 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.

Reflections

Coming from very little frontend development experience, I learned a ton about developing with APIs, choosing the right frameworks, and building UI components, turning requirements into tangible results in a matter of weeks. It was awesome to be a part of Tech4Good's mission and to help lay the foundation for Causeway in its earliest days. Since then, the project has launched and grown into one of the lab's key initiatives, with lab members continuing to build on the groundwork we established.