top of page
Projects
Quick Links
From designing user-friendly interfaces to building robust backend systems,
I ensured seamless functionality and impactful user experiences for the projects below.
Click to learn more about my contributions.
UI/ UX
Software
Interactive
UI / UX Case Studies
Page Palette
A Web-based color based personality quiz.
A recipe-sharing iOS application that celebrates family recipes.
A tool for debugging and optimizing React apps
UI Design
UX Case Study + UI Design
UX Case Study
Reactime
Reactime is an all-in-one, open-source Chrome extension for debugging and optimizing React apps, offering real-time state visualization, time-travel debugging, and performance monitoring in an intuitive interface.
Responsibilities:
Core Development
-
Developed recursive algorithms to capture state and visualize React Fiber trees for debugging.
-
​Redesigned and implemented a functional UI/UX, adding a vertical slider for seamless navigation through state snapshots.
-
Fixed playback capabilities to ensure smooth state transitions and improved debugging accuracy.
​
Web, UX and Branding
-
Engineered and styled the Reactime website, implementing responsive design and dynamic features for an intuitive user experience.
-
Managed Reactime's online presence, including its LinkedIn page, to enhance visibility and engagement.
-
Designed the project logo and created custom digital art to strengthen Reactime's visual identity and overall appeal.
-
Enhanced UX by leading testing efforts, collecting user feedback, and adding front-end features like dark mode.
Testing and Accessibility
-
Boosted test coverage from 40% to 85% using Jest, identifying and fixing critical bugs for better reliability.
-
Improved accessibility audits by extracting and visualizing accessibility trees with Chrome's Debugger API.​
Technologies:
React, Redux, Tailwind, Jest, Express, TypeScript, Chrome Extension APIs
Image References:
The image above features an example app—a locally run game interface for Tic-Tac-Toe—that we will be debugging with Reactime.
The image above shows Reactime's main user interface.
The left panel allows you to browse through snapshots, as well as visualize your application's provider/ consumer relationships.
The right panels include tabs for Map, History, Performance, Web Metrics, Tree, and Accessibility, along with a hierarchical tree view of React components.
Slider comparison of previous Reactime UI, versus current Reactime UI
Demo Video
Debate Mate
Debate Mate is an AI-powered platform designed to help students sharpen their debating skills. It features an interactive interface where users can practice debating against an AI opponent, receive feedback, and improve their argumentation techniques in real-time.
Responsibilities:
-
Integrated the AI API into Debate Mate to provide real-time, intelligent debate simulations that empower users to improve their public speaking and critical thinking skills.
-
Designed and implemented a responsive and dynamic front-end using React.
-
Collaborated with backend engineers to configure and optimize the architecture with Express, ensuring efficient communication with the OpenAI API and Pinecone database for seamless application performance.
Tech Stack:
TypeScript, React, Express, OpenAI APIs
Image References:
The image above showcases Debate Mate's main page. Selecting the left microphone allows users to engage in a debate as the CON side, while selecting the right microphone positions them as the PRO.
copytory
copytory is a powerful Chrome extension that allows users to copy multiple items simultaneously, organize them, and seamlessly select and paste content onto a new page.
Responsibilities:
-
Designed and implemented dynamic, reusable frontend components for Copytory, enabling user registration, login functionality, and clipboard item management.
-
Connected frontend login and registration portals to the backend, utilizing MongoDB for data storage and incorporating password hashing to enhance user account security.
-
Leveraged Tailwind CSS to deliver visually appealing and responsive interfaces.​
Technologies:
React, Tailwind, Express, MongoDB, TypeScript, Chrome Extension APIs
Image References:
The video above shows copytory's main user interface. As users copy selected text, it is automatically added to an organized inventory. From there, they can easily select and paste the desired text into another document or text field as needed.
Interactive Projects
Platform and Asset Designer
World in a Cell, USC
Storyboarder
bottom of page