Unified Data Modeler

Inspiration

Whenever we start projects, our team comes together to design data models. We often use LucidChart or Google Sheets to plan our models and then individually recreate them on the front and backends. By having to remake the same design multiple times, you’d run the risk of creating small discrepancies and mistakes that mess up the project. We realized that a great solution would be to create a unified data modeling system, where you would create ONE model to be easily exported to all of your languages. Rather than making essentially the same thing three times, you can use one centralized system for all!

What UDM does

Unified Data Modeler (UDM) is a collaborative graphical tool where teams create data models together to be used in the front and backend. The GUI allows users to add parameters, select data types, and toggle whether the parameter is required. Once they’ve customized their models, they can export them to TS, Dart, Rust, C#, Java, or our custom UDM format. The UDM format allows users to import their models later on for further customization.

Unified Data Modeler also includes JSON parsing on each of its objects to make connecting models from language to language as easy as possible.

We were able to build out a custom type syntax tree to allow users to enter in a specific type, and get the most specific version of it in each language. For example, if a user chooses an unsigned integer type, they get a usize in Rust, an int in Dart, and a number in TypeScript.

How we built it

We designed a Sapper app with Socket.IO to create a live tool that allows users to collaborate together, as collaboration was one of our top priorities. We also created a manifest.json to allow users to download UDM for use offline if needed.

We created Click to Deploy buttons for Google Cloud, Heroku, and Digital Ocean to allow users to deploy their own as easy as possible.

In order to find the correct syntax for each language, we developed custom models for each language along with a custom syntax tree for types. We used an inorder tree search to find the most specific type for each language based on our type tree.

Usage

Users can deploy their own UDM GUI on Google Cloud, Digital Ocean, or Heroku with the click of a button. We chose this structure to give everyone access to this tool while saving on costs. Users can also clone the repository and run it with docker or npm.

Run on Google
Cloud Run on Digital Ocean Run on Heroku

In Review

What were our challenges?

We originally had trouble getting Socket.IO to broadcast to all users in production. By allowing CORS, we eventually allowed it to be sent to all users.

We had trouble syncing users, so we went with a stateful event-based model to keep every user in sync.

Traversing our syntax tree was complicated as it is a custom struct rather than a list or an object where each subtype is encapsulated rather than inherited.

Accomplishments that we're proud of

  • We were able to create a single tree that allows users to select any type and have it supported in every language!

  • We were able to create a live tool, which is perfect for collaboration!

  • We added many more language conversions than we originally expected!

What's next for UDM?

We’re going to use it for data modeling for our future projects!

In terms of upgrades, we would love to add more languages so that UDM can be used in more projects. We want to improve our type system to allow users to create multiple structs at once in our tool and embed them in each other for more advanced model generation. We also want to create a cloud-hosted option for enterprise teams who do not want to deal with spinning up regularly, along with a CLI so users can choose to work in the console!

Built With

Share this project:

Updates