Hacktoberfest 2024 - part 3

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

1. Installation
2. Usage
3. Roadmap
4. Contributing
5. Contact
6. Acknowledgments
7. License

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

1. Clone the repo

   git clone https://github.com/onlook-dev/onlook.git
2. Navigate to app folder inside the project

   cd onlook/app
3. Install NPM packages

   npm install
4. Run the…

View on GitHub

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.

Comments

[Boopathi]

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. 👍

[Arindam Majumder]

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

#opensource #webdev #beginners #hacktoberfestchallenge