API-first: building a real-time Web platform from scratch in one week

Andy Bruère
Stelace
Published in
4 min readJul 8, 2019

Building a Web platform or an online marketplace is a daunting task. Please believe me, I tried hard.

One of the main reasons of Web platform failure lies in code, but probably not the way you expect.

Despite many awesome open-source projects available out there, it still happens that we spend weeks or months rolling out our own code rather than building a community and making the real difference.

This bad habit often comes with the feeling that similar code or building block may exist somewhere, but probably not exactly what we need, right?

Fighting my inner demons I decided to make the most of the fantastic VueJS framework Quasar to build a marketplace-like website in a few days, featuring platform APIs we’re building at Stelace precisely to help speeding up platform development.

Speaking of speeding things up, deployed website maintenance is also reduced to the minimum with continuous deployment to Netlify. Here is the Github repository and Stelace API Quick Start relying on this starter kit.

Stelace platform runner is the only API-first and open-source solution to build and scale your Web platform or marketplace. We protect your freedom to test and deploy your own backend if you think you don’t need our SaaS hosted solution and support, unlike other API solutions available that lock you in.

Building fast

Quasar framework is immensely useful to build a clean front-end fast as it comes with two precious things in particular:

V1 has just been released (July 2019). Big thanks to @rstoenescu, Quasar core team and all contributors for making this happen.

Quasar components used in Heroes Starter Kit Search UI

A powerful thing we can do with clean components is composition.

This Search UI is generated dynamically based on Stelace Custom Attributes API that are indexed for typo-tolerant and flexible Stelace powering this platform. New search options can be added on the fly:

A simple wrapper component (Github) populates the QDialog component shown above with these search options.

API-first: Stelace Backend

What is this Stelace API thing?

Publicly available Web platform or online marketplace backend is not a common thing, and there simply was none when we started to build our own marketplace Sharinplace, now retired, and then our Platform Runner.

Full UI can take weeks to build, backend with automated tests and CI… Well, you probably have an idea.

Now you can safely double this to start getting the real picture.

Search

Unlike awesome text-focused solutions available out there, such as Algolia, Stelace Search API is specifically built for platforms:

  • Flexible search and sorting that don’t require specific indexing and configuration
  • Time/quantity-based availability computed in real-time depending on Transactions for booking-based platforms

This focus on platforms means we can enjoy high flexibility and fast development experience while still having a typo-tolerant Search that works with all languages out of the box.

Automation, integrations

You probably don’t want to run your Web platform as an isolated island.

Stelace Backend lets you integrate with external systems (such as AWS Lambda functions) and applications easily relying on all the nice Events emitted by your platform.

Slack notification triggered by a Workflow in this demo

All you need to taste serverless integrations and platform automation is a bit of JavaScript magic:

Example of automation with a Workflow

Real-time

The cool thing about Events is that they let you build anything. The demo intensively use custom Events for moves of Assets (heroes) in real-time over the map.

Most missions assigned to super heroes in the demo are generated randomly by a Workflow.

Using Signal API, all visitors can be notified about assignments in real-time. Same applies to all kinds of messaging on your platform.

This won’t be long.

You can build any real-time platform this way, from IoT to ride-sharing service where car coordinates and availability need to be updated in real-time.

Concluding: API-first approach can be your saver

No wonder I could build this Heroes Platform in one week, including some nice time picking GIF images included in the demo…

I cheated: I guarantee we did not develop Stelace API in weeks. Taking additional time to build and test a full platform backend yourself may be a bad idea, unless time and speed are not your concern (lucky you).

Have a look at our docs to make your own opinion.

If you don’t like it so much, I encourage you to look at other API-first alternatives for the success of your project. These are scarce. Famous marketplace builder Sharetribe is launching a marketplace backend too, named Flex, not open-source though. Have a look at their strengths if you don’t need Stelace Search and Automation APIs but only marketplace-specific features.

If you like what you see about Stelace, just get your API key here to get started or deploy your own open-source Stelace server.

I built this demo UI in one week using Quasar front-end and Stelace API, you can certainly build something much better and more useful from there ;)

Happy building!

Originally published at https://stelace.com on July 8, 2019.

--

--

Andy Bruère
Stelace
Writer for

Cofounder of Stelace, passionate about open-source and many other charming things around our little globe.