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

Andy Bruère
Jul 8, 2019 · 4 min read
Image for post
Image for post

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.

Image for post
Image for post
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

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.

Hint: try 風の谷 in live demo search: this is where my favorite Hero comes from…

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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Stelace

Stelace

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store