CrystalMath

Notes, examples, and a graph on combinatorics
Notes, examples, and images on Bernoulli distributions
Github Network Visualization
Example of a user's list of pages

Inspiration

What it does

CrystalMath provides a worktable with WYSIWYG editors for creating and solving math environments.

It supports mathematical expressions, variable declarations, and functions and will evaluate expressions and functions according to the declared variables.
It also supports textboxes, images, and graphing for note-taking and visualization.
Drag and drop cards for your viewing pleasure.
A user account will also allow users to create, save, and delete notebook pages.

CrystalMath's solver engine builds a dependency graph between the functions, expressions, and variables and evaluates them in order to solve for other parameters. This allows the user to tweak a small number of variable declarations, for example, and see the result of those changes reflected immediately in the rest of their calculations.

How we built it

CrystalMath is a primarily front-end application written with Vue.js version 3 and TypeScript. Several Vue components provide the various equations/WYSIWYG editors/image renderers/charts.

Under the hood, we are using math.js's syntax tree and a graph modeling library to determine the relationships between the different math statements in the workspace. With this graph, we can evaluate the statements leaves-up to solve the entire page as one large system of equations.

Basic user authentication and page saving is done with the help of a REST API also written in TypeScript. User data and page records are saved to a PostgreSQL database.

The "production" version of the application is deployed to Google Cloud using its Kubernetes Engine.

Challenges we ran into

This was the first time any of our group had implemented a significant application in Vue. We learned a lot with respect to Vue's change detection system and event-propagation rules (or lack thereof), but in the end we wound up with a pretty responsive application that was much easier to develop than if we had done it in vanilla JS.

Reliably positioning draggable items on a web page is surprisingly difficult, especially when you are also inserting new ones into the DOM.

Accomplishments that we're proud of

As addictive as math
UI/visuals turned out really clean
We were able to integrate all of the features from our initial design (expressions/variables/functions/text boxes/graphs/images) and a few more.

What we learned

Managing state is hard, especially when parts of your application execute asynchronously.
Lots of ways how not to create a login page

What's next for CrystalMath

We want to do more cleanup and optimizations to the existing features, as well as add support for more advanced calculations like matrix/vector math, numeric integration, and possibly even symbolic execution.