Building a Web platform or an online marketplace is a daunting task. Please believe me, I tried hard. To get a fresh start, I’ve decided to join forces with some Super Heroes and have some good time, hopefully.

One of the main reasons of 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 platform 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.

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 Search powering this platform. New search options can be added on the fly:

const customAttributes = [ // attributes displayed in search
  'speed', // number -> QRange
  'abilities', // abilities -> QSelect (multiple)
  'gender', // gender -> QSelect
  'stelaceStaffPick', // boolean -> QCheckbox
  'environmentHero' // boolean -> QCheckbox
]

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 and 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 Stelace Platform Runner.

Full platform UI can take weeks to build, backend… Well, you probably have an idea.

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

await stelace.search.list({ // advanced boolean logic
  filter: 'speed >= 40 && environmentHero == true && '
    + 'abilities["Communication with animals",Flight] >= 2',
  sort: [ // dynamic sorting
    { _price: 'asc' },
    { _createdDate: 'desc' }
  ],
  // available from…
  startDate: new Date().toISOString()
})

Unlike awesome text-focused solutions available out there, such as Algolia, Stelace Search 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.

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

await stelace.search.list({
  query: '風の谷' // Valley of the Wind
})

await stelace.search.list({
  query: 'Nauzicay' // Sorry for messing up your name Nausicaä
})

Automation, integrations

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

Stelace Backend lets you integrate external systems 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:

{
  name: "flagVisitorHero",
  description: "Workflow flagging hero on custom Event",
  event: "flag_hero", // custom Event name triggering this Workflow
  run: [{
      // Omitted here: flag the hero if conditions are met
    }, {
      // Second step
      description: "Notify Team on Slack when some hero is flagged.",
      endpointMethod: "POST",
      skip: "!env.SLACK_WEBHOOK_URL", // secured environment variable
      endpointUri: "${env.SLACK_WEBHOOK_URL}",
      endpointPayload: {
        // Using ES6 ${template literal} in Slack message
        text: "`${asset.name} [${asset.id}] flagged on <heroes.demo.stelace.com|live demo>.`"
      }
    }]
}

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. Visitors can assign their own missions too.

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 the GIF 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).

Hint: this statement is even more valid as we plan to open-source our core API over the next few months :)

Have a look at our docs to make your own opinion and feel free to get in touch on our community forum.

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. Have a look at their strengths if you don’t need Stelace Search and Automation APIs but only marketplace-specific features, provided you don’t need a free developer tier.

If you like what you see about Stelace, just ask your free API key here to get started.

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

Happy building!

Heroes Platform Demo made with ❤️ by Stelace. Github repo (MIT license)