Hackernoon logoHow to Build a Website With Non-Coding Teammates using Velo By Wix by@d1zzy1zzy

How to Build a Website With Non-Coding Teammates using Velo By Wix

Velo enables diverse teams to come together and accomplish amazing things. It’s a great tool for offloading the burden of front-end development while maintaining control over those precious 1s and 0s. Velo supports a large library of arbitrary backend node.js packages. Check out our fledgling project: easychurchmerch.com. This article is part of a writing contest hosted by Hacker Noon in partnership with Wix. Learn how to enter here and take a shot at winning $1000 every month.
image
D1zzy1zzy Hacker Noon profile picture

D1zzy1zzy

en·tre·pre·neur, pro·gram·mer

CAUTION! Building an app with Velo is easy, but building a business with your friend will have challenges : ) You’ve been warned!

Let’s build something great

Any good company, like friendship, is built on diversity. A diversity of skill sets, tendencies, experiences, and of course opinions!

Velo and wix are that beautiful partnership.

In early 2020, my friend Matthew approached me with a neat-looking prototype for an ecommerce drop-shipping application built, drag-and-drop, on Wix.

Matthew: “So here’s what I need you to do: Build a t-shirt designer into the site.”
Me: “Excuse me?! *Barf* 🤮 Is that even possible with Wix. I want to see the bare metal baby!”
Matthew: “Bare metal??”

Thanks to Velo, I managed to do it by the way (but that could be a separate post):

image

T-Shirt Designer Built with Velo

Enter Velo

Velo provides a powerful interface between the painless design of your front-end (Matthew’s realm) and the nuts and bolts of keeping your app running smoothly in the backend (my domain).

In addition to providing standard back-end tools like database manipulation, Velo comes out-of-the-box with powerful systems like Ecommerce integration.

Example Time

It’s crunch time and our site still needs a catalog page to display each of the products we offer for designing.

Let’s take a look at the interplay between wix and Velo:

Matthew chooses to build our catalog page with a repeater element. The repeater is connected to our product collection (database) via a dataset.

image

Catalog Page = repeater + dataset

Does Matthew know he’s using Velo-ready components? Nope. It’s just drag and drop!

Easy Peasy!

“One more thing,” he says, “When you click on an item, let’s send the user to the t-shirt designer and load in the product they chose.”

“Easy peasy!” I tell him. Do I know how to do that? Of course not! But I head over to the Velo Api Documentation and within a few moments I have full control.

$w.onReady(function () {
	$w("#repeater1").onItemReady( ($item, itemData, index) => {
		let button = $item("#button1");
		button.link = `/designer?pid=${itemData.productId}`;
	});
});

Using Velo I can easily hook into the contents of the repeater once they have loaded. I query the button using a friendly selector $item(“#button1”) and change its link properties. Remember that the repeater has been populated with data from the dataset. I can grab the product id of each item from the dataset and pass it as a GET parameter to our designer page. Woo!

Better Together

That’s how it’s done! Velo enables diverse teams to come together and accomplish amazing things. It’s a great tool for offloading the burden of front-end development while maintaining control over those precious 1s and 0s. (Did I mention velo supports a large library of arbitrary backend node.js packages 🥰)

Business, like life, is a dance. Every solution to a problem has its tradeoffs. Know when to do it yourself and when to ask for help.

Advanced Stuffs

The conversation about working in a team is incomplete without mentioning version control. Admittedly, this is a challenge for the wix ecosystem, but the Velo team is hard at work on this issue! For teams serious about using this technology, I would recommend looking into the Velo CLI. This enables teams to work with local versions of the wix editor and keeps us all from pulling out our hair : )

Check out our fledgling project: easychurchmerch.com

Image Credit

This article is part of a writing contest hosted by Hacker Noon in partnership with Wix. Learn how to enter here and take a shot at winning $1000 every month, from March 1st, 2021 to May 31st, 2021.

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.