Return to Blog Home

Express Handler Tracker in the Cloud

Source Live

Express Handler Tracker in the Cloud

Cloud-based sharing of Express Handler Tracker results!

As great as any tool can be, the more barriers to using such tool, the less it'll be used - so making as much of Express Handler Tracker as possible available online was a must!

Import & Export

As I already was confident this would be a goal for the project, I started with making it possible to completly - or partly - export the state of the application, and of course import it back in.

While there is a bit of data, it can be easily divided into two parts: UI and the Requests. This is exactly how I decided to split the data, making it possible to export one, the other, or both.

Due to the rushed nature of the project the ability to seamlessly switch application state was out of the question, instead the interface for modifying the current state would be toggled to a locally-updating on when working on imported data, and restored to the backend-updating one when working on the live data from the currently-running application.

More Features

I went on a spree of adding feature after feature I found useful, from tooltips over the current file with links to the source file, to animating these tooltips around as the request played back, a code-preview window showing the current code for the current handler, the ability to annotate each handler as one wished with Markdown, full CRUD support for every piece of data, custom cytoscape.js styling to one's liking, PNG & SVG image exports, and there's still I have probably forgotten!

Cloud

All these features as I said aren't too useful if the barrier to using them is too high, so building off the import/export functionality, I threw together a backend server that with GitHub OAuth, and a MongoDB database, allows for the sharing & direct linking of Express Handler Tracker results.

https://rascaltwo.github.io/express-handler-tracker/#/100devs/binary-upload-boom/RascalTwo/walkthrough

While the URL isn't the shortest, it does contain all the information needed to access the data:

/#/Owner-Name/Repo-Name/Author-Name/Collection-Name

With this one can - after recording their own data - share it with others, and link to it accordingly, allowing one to give real insight into their code without them having to leave their browser!

Future

This is very much a MVP of the cloud & sharing feature, not only are more improvements to sharing a must, but additionally the ability to edit these requests into a presentable-state must be made quicker and easier.

Lastly I have plans to make the application more media-friendly, allowing one to simply link to a URL like the one above and be returned an image, or even an animation of the request playing back!