Toolbox view (view mode)
Toolbox view (edit mode)
Workflow view (view mode)
Do you ever sit in front of your search engine and just don't know how to frame your problem?
Everyday, entrepreneurs, managers, in fact everybody need to keep up with the rapid pace of new tools and technologies out there for solving problems in a wide variety of areas. Being a good generalist is considered a must in the 21st century. However, despite the abundance of search results and youtube tutorials on the web getting an overview requires an hour long research on google or even meetings with domain experts. This is a waste of time.
Let's say you just started a company and you need to get a quick overview of the state-of-the-art tools and workflows to, let's say:
- manage your instagram page,
- shoot a commercial
- do data science
You ask yourself: What do people use nowadays? Are there any cutting-edge tools that will automate this for me? Do I hire somebody or can I learn to do this myself? And if I hire somebody, what do I look for?
What it does
21.tools is a platform that hosts crowdsourced toolboxes and workflow videos.
Toolboxes are visual maps of software and hardware tools that are commonly used in a field (i.e. videography). They can be edited by everyone and are version controlled.
Workflows are videos from domain experts that show how they make use of some of the tools in the toolbox. This could be a video by an expert videographer showing how he performs a shoot for a music video. End-to-end. From taking the camera into his hands to the final .mp4. The tools used are highlighted in the toolbox and start to glow when they are mentioned in the video. You can also skip directly to that part of the video by clicking on the tool.
The advantages of a graphic and a video are combined. You get a full overview of the tools, but also a slightly in-depth, tangible understanding of how those tools are used and what their connections are. Every YouTube video can be annotated on 21.tools. Therefore, this platform can be seen as a second-layer video player.
How I built it
The front-end is build with react.js. It uses some libraries for the visualisation of the nodes and interacting with them such as jsplumb and interact.js
The webapp runs completely server-less. I use MongoDB Stitch as the database and MongoDB Stitch functions for some backend functionality.
In detail The toolboxes and workflows are stored as single documents in MongoDB. I base64 encode the images and store them in the toolbox document, so that it can be downloaded as one. Therefore, the toolboxes can be loaded without tedious http or sql requests and they can also be used offline.
The videos are hosted on youtube so I make use of the youtube API to display the videos.
Challenges I ran into
Really just on the frontend. Using the jsplumb library was quite difficult because the documentation is not really maintained up-to-date.
Accomplishments that I'm proud of
- Having set up my first-ever server-less web app (yay!) and having learned to use MongoDB so quickly.
- Finally, having build the toolbox editor with jsplumb the way I wanted.
What I learned
Server-less is so much easier. You can spend your time on fixing the frontend :) instead of setting up the backend and complex API routing.
What's next for 21.tools
- I want to engage more people in using the platform to get feedback on the UX.
- Currently, everybody can submit workflows. I want to make distinctions to the uploads from selected experts.
- I have another feature in mind. I plan to analyse the videos in detail to provide a visualization on a timeline when the speaker stays on a superficial (overview) level and when he goes more in-depth about a specific tool. This helps deciding which video to watch or where to skip to inside the video.
Here you can find the GitHub repository: https://github.com/xanpj/21.tools