Handoff

Collaborative No-Code

Comment 1

Background

Low-code development is currently taking the world by storm. According to Forbes, the low-code industry is expected to grow at a 28% annual compound rate to become a $45 billion industry. More importantly, this technology is becomingly increasingly essential, for small businesses and individual entrepreneurs, especially in a time period when skilled developers are more highly valued than ever. Research conducted by Gartner estimates that over 40% of people who are in need of customized platforms lack the technical skill to develop them on their own.

Low-code fixes this problem - by having all the benefits of being cost-effective, fast, scalable, and quick to deploy. However, low-code development suffers from one major drawback - the ability to work together in teams. In the professional development world, we have real-time collaborative brainstorming tools like Figma and Vectary, pair-programming tools like Codepen and CodeSandbox, and Version Control systems like Git. How is low-code supposed to become the fastest way to build an application when the majority of creators have to go about it alone?

We wanted to bring a brand new level of connectivity to the low-code development world - a tool that allows anyone, developer or non-devloper, to work together with their friends and co-workers to build the app of their dreams. That's why we built Handoff - the world's first collaborative low-code platform for creating fully functioning applications in real-time.

Handoff Logo

What is Handoff?

Handoff is a collaborative tool created so any team could make fully functioning web applications - regardless of each individual's technical background.

Here's how it works.

1. Sign up for an account and log in! If you're looking for just a trial, feel free to use guest access by just entering your name.

Landing Page

2. Browse through your personal project gallery, or create a new project!

Project Gallery

3. Work, in real time, together to drag and drop text, buttons, and forms to create a website! Create

4. Customize each individual component using slides, inputs, and buttons Customize

5. For tech-savvy developers - view and edit your code! Code

6. Click just one single button to deploy your website to the entire world Deploy

Features

Handoff supports all of the following features!

  • Real-time collaboration
  • One-click link sharing, to invite friends to your workspace
  • Drag and drop user interface for creating web applications
  • Fully functioning components including buttons, forms, containers, images, and more!
  • Customization options for each component so you can pick colors, adjust sizes, and select images
  • A shared save history, coupled with undo/redo buttons for any mistakes the team made
  • Code editor locking, in case you want to pause your team's development
  • A code converted viewer and editor
  • Project storage and custom file naming
  • A base64 encoded file generator, to store your websites in a super-condensed format
  • One-click deployment, with an auto-generated link to share your website with the entire world!

Creation Process

UI / UX and Challenges

For our design, we created both low-fidelity and high-fidelity prototypes. We wanted our application to be a unique user experience, and we aimed to make it as interactive and as fun as possible. We incorporated a wide variety of tools - buttons, sliders, radio selects, inputs, color selectors, in order to create as much interaction as possible. We also aimed to keep our user journey short by limiting ourselves to a small number of screens.

For our user interface, we modeled our design language after design prototypes and sketches. We took inspiration from tools like Adobe XD, Squarespace, and Figma. We also decided to take a vastly different approach from the majority of designers - we combined two-component libraries - Google's Material UI and the open-source Ant Design. While this may seem like a strange move - the decision to use hybrid component libraries helped us create a unique aesthetic and helped our developers leverage the advantages of each library as much as possible.

Figma Prototypes We used Figma, a design tool we were unsurprisingly inspired by, to create lo-fi and hi-fi prototypes

Backend and Challenges

For our backend, we utilized a combination of Node.js, Express, Socket.io, and Firebase. Express and Firebase were used to create a typical CRUD REST API. Routes were created to store user's projects, including name, pictures, and files.

More interestingly was our usage of socket.io. This was many of our teammate's first time using socket.io in many years, and so we had to read up on quite a lot of documentation. The employment of WebSockets allowed us to have real-time communication between users. The user communication was handled in two ways.

First off, to simulate working on the same workspace, we emitted user's mouse positions on mousemoves. Every other user would receive these updates, and a div on the front end representing a cursor would be placed at that mouse's coordinates to simulate mouse movement. For the actual website creation, we converted HTML Doms into SerializedNodes on the frontend, encoded them using Base64, and then passed this information to every single user. This information was then received by the frontend.

System Architecture A system diagram explaining how all of our parts interact

Frontend and Challenges

For the frontend, we used React coupled with two-component libraries. We also used a library called craft.js, which allowed us to create customizable page editors. On the front end side, the HTML Doms were converted into SerializedNodes, as mentioned above. When the encoded string was received by other users, each user's client would actually convert the encoded string back to JSON, and then deserialize it into React components. A lot of this was done through the use of craft.js!

The most challenging part on the front end actually ended up being creating the CodeViewer. A lot of it had to be custom written, because we could not find a good library for it. We took the HTML within our editor component using a simple .outerHTML selector. A function was then written to convert the string into parsed HTML, which was then placed into an HTML element itself and highlighted using React-Syntax-Highlighter.

All in all, the frontend and backend had to play around with a ton of data, race conditions, and timing, in order to get this application to have real-time collaboration.

Tech Stack An overview of our tech stack

Takeaways

What We Learned

On the product side, it was extremely difficult coming up with an idea, and hard trying to create our project in a short span of time. We spent the first 14 hours of our hackathon brainstorming, and didn't start on our project until ~10:00 AM on Saturday. This is a stark contrast from our typical hackathons where we normally would have a prototype by that time. The time crunch ended up forcing us to skip some steps - like creating design documentation and forced us to go completely without sleep on the second night. On the technical side, for many of us, this was our first time dealing with WebSockets with so many moving parts. There are literally millions of permutations you can make with the different components and variants you can add. We also rarely played around with this much data, timing, and synchronization on the web so that ended up being a massive challenge. We're extremely proud that we were able to overcome some massive hurdles.

Accomplishments

We're very happy with the final product. We managed to fit in so many features to create a platform that we could really see ourselves using! It felt immensely satisfying seeing the beautiful real-time collaboration that was happening across all of our laptops. We're also very happy with how helpful and impactful our project could become - there's so much potential for it and we had such a fun time creating it!

What's Next!

There are so many features we envisioned for Handoff that we simply didn't have enough time for. We wanted to add more components - login forms, sliders, calendars, and more! We also wanted there to be more interaction between our components, and ideally also provide developers the ability to add JavaScript code to each component. There's also still a lot of bugs, despite our best efforts debugging for nearly 10 hours! Dealing with so much data and timing gave way to so many race conditions and parsing issues. Hopefully one day we can make this versatile, powerful, and game-changing as other low-code platforms, but with the real-time collaboration and connectivity that makes Handoff so special.

+ 10 more
Share this project:

Updates