For this week's hacktoberfest contribution, I had the privilege of working with onlook, a Figma-like visual editor for React applications. For my contribution, I was able to work on an issue to add a new feature to the project.
The open-source, local-first visual editor for your React Apps
Seamlessly integrate with any website or webapp running on React + TailwindCSS, and make live edits directly in the browser DOM. Customize your design, control your codebase, and push changes your changes without compromise.
Onlook.Studio.Component.Demo.for.GitHub.mp4
Built With
Stay up-to-date
Onlook officially launched our first version of Onlook on July 08, 2024 and we've shipped a ton since then. Watch releases of this repository to be notified of future updates, and you can follow along with us on LinkedIn or Substack where we write a weekly newsletter.
The issue I had to work with requires implementing a new feature which includes using existing functionalities in the project.
The feature is to implement a functioning right-click menu with the appropriate functionalities. Even though the project can still be considered in the early stages of development, there is already a lot of functionalities implemented. Which is where the challenge arises from.
Reading and understanding the structure of the project and the code, which is utilizing object-oriented programming and taking advantage of TypeScript to which I'm still learning.
PR #3
My pull request contains the solution to implementing the requested feature. Since the functionalities of the actions are already implemented, the solution to implementing the feature was simple.
So the main process is to figure out the classes that has the necessary methods and how to use them appropriately. Next is where to implement the existing methods. Luckily, the project already has an existing right-click menu feature, so I just had to add the new options required in the feature with their respective methods to do the action.
In the end, one of the repo owners made a suggestion as a review to which he suggested I could make it as a separate issue. But since I think that it would be a minor modification, I took on the task and completed it in the same issue and just made another commit in the same PR.
Cleo Buenaventura
