DEV Community

Cover image for My DO Hackathon Project

My DO Hackathon Project

codemaster138 profile image Jake Sarjeant Updated on ・1 min read

Hey everyone! It's been a long time since I last posted to DEV, but I'm finally back.

I have decided to take part in the DigitalOcean App Platform hackathon! 🎉🎉

My Project Idea

I'm thinking of building an online project where people can build web APIs visually. The user drags nodes into a canvas and connects them. (This interface is inspired by node-red). There will be several nodes for data management, route management, response construction, request sending, et cetera. The user can export the project to a node.js project and continue the project by writing code. Note that a node.js project cannot be re-imported.

Core concepts

An overview of the project's core concepts

A "node" can be dragged into the canvas from the node palette to the right. A node has zero or more input "ports" and at least one output port.

"Ports" can be either of type "input" or "output" an input port is placed on the left side of a node and is shaped like a triangle pointing into its node. An output port is located on the right side of a node. It is shaped like a circle.

"Wires" are the connections that connect the outputs of one node to the inputs of another. The user clicks an output port and drags a wire to another node's input port. Now, when the value on the output port changes, the node connected to that port is recomputed.

Let me know what you think!

Tell me in the comments, or by giving this post a heart & 🦄!

Discussion (1)

Editor guide
raddevus profile image

This one sounds very interesting. I'd really like to see this developed further so I'll be following along as you go. I like the idea of the drag and drop interface and doing that in HTML Canvas could be very cool. I completed my entry to the #dohackathon and hope you'll check it out and let me know what you think, since you have web dev experience. Good luck in the hackathon, hope to see more soon.