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.
onlook-dev
/
onlook
The open source, local-first Figma for React. Design directly in your live React app and publish your changes to code.
Onlook
The first browser-powered visual editor
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
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.
Getting Started
Installation
Run locally
- Clone the repo
git clone https://github.com/onlook-dev/onlook.git
- Navigate to app folder inside the project
cd onlook/app - Install NPM packages
npm install
- Run the…
Issue #3
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.
Top comments (2)
Nice work on the right-click menu feature! It's great to see you tackling a real-world issue in Onlook, even in the early stages of development. The fact that you're learning TypeScript while contributing is impressive. 👍
Great Work,
You Can also take part in:
7 Open-Source Events You Can Participate in this Hacktoberfest — Win Cool Swags 🎁
Arindam Majumder ・ Sep 30