CharanSriram

Might be misunderstanding the problem, but what’s stopping you from using env variables like you specified? Create React App has this baked in by prefixing env variables with REACT_APP [1]; I’m assuming other configurations can achieve the same.

[1] https://create-react-app.dev/docs/adding-custom-environment-...

I’ve been working on a tool called Phases! (bit.ly/phases-demo). It’s basically a way to expose localhost to the web with a neat UI that let’s others edit your underlying webpage via AI (currently works with React).

Currently working on building a simpler version first that lets you expose multiple ports (like for your frontend and backend), generates a public URL, and connects the ports by rewriting requests in the browser to the public URLs.

Basically ngrok + more powerful deploy previews. Curious what y’all think!

This is sick! What was the motivation for building it?

This isn’t so much a data structure than an implementation of one, but map-represented trees are great.

For context, they were used by Figma to represent its scene-graph (https://www.figma.com/blog/how-figmas-multiplayer-technology...).

Essentially, it’s a way to represent a normal tree as a map; keys of the map represent individual nodes on the trees, and one key “ROOT” points to the rootmost node.

Each node is connected via the following relationship: parents have an unordered set of their children’s keys (not the actual node reference) and children know their parent’s key. Children also maintain a property to track their index using a technique called fractional indexing.

What’s great about this data structure is that you have O(1) transformations for most parts. If you need to change a node’s property, height for instance, (assuming this is a design tool or something), all you need is that nodes key. If you need to reposition a node under a new parent, simply remove the key from the parent’s set, change the node’s parent key, and update the index. This structure plays well with collaborative apps too as most edits to the tree are O(1)— edits are swift and can be communicated to other collaborative instances quite simply with small payloads.

Last thing I’ll touch on is fractional indexing. Very crudely put, it forces children nodes to track their position in a list via an “index” that can be a normal float. To reposition a child node, you first find its neighbors and average their indices to find a new index. Ordering the list is a sort from smallest indexes to largest.

In an example, say we had 3 nodes A, B, and C. A’s index is 0.1, B’s is 0.3, and C’s is 0.5. To insert an element D between A and B, I average A and B’s index (0.2), set that as the index of D and insert it into the parent node’s children set. At render, the set is ordered and we find A, D, B, C.

Shameless plug, but I’m using these techniques to build a multi-framework mobile app builder at phazia.com :). I love nerding out about these things so thanks for the chance to do so @op.