Marketplace starter kit

This Stelace starter kit is free to use, under the terms of the MIT license. Feel free to fork, contribute or just make it your own :heart:.

This starter kit offers a high-performance AirBnB-like marketplace front-end (Vue.js) with pre-configured serverless deployment based on open-source Stelace API server.

Features :gift:
- Fast by default :checkered_flag:
- Integrations
Testing
Stack
Getting started
Deployment

Live Demo

A platform template focused on search, automation and real-time is also available.

What is Stelace?

Stelace API provides advanced search, asset and user management, automation and content delivery APIs for Web platforms ranging from search-intensive marketplaces to online community apps. Stelace open-source marketplace backend lets you focus on what makes your platform unique.

API Docs

Features :gift:

Asset management. Assets can be anything from flats and homes to cars or concerts
Powerful and typo-tolerant Search :mag:, on a relevance and dynamic availability basis
User authentication including social login & SSO
User management and Ratings :star:
Real-time Events and Messaging
Automation with Stelace Workflows :traffic_light:
Customizable payment process using serverless functions
Headless CMS :page_with_curl: with Stelace Content API
Global CDN for images and user files
i18n :earth_africa: and full translations
Accessibility
…
and much more with Stelace API

Fast by default :checkered_flag:

Get 90+ PageSpeed score out of the box:

Pre-rendered static pages for fastest page load, with Vue.js hydrating into full SPA.
Code-splitting with optimized Webpack config in quasar.conf.js.
Image compression using WebP and serverless resizing using AWS Lambda
Ressource prefetching and preloading
PWA-ready thanks to Quasar

This kit follows the PRPL pattern: more info in docs.

Integrations

Leverage these integrations to start running your platform even faster:

Automated and continuous deployment with Netlify
Stripe payments using Netlify functions and Stelace workflows
Sentry for debugging in production environment
Maps and place search with OpenStreetMap providers
Google Analytics

Testing

End-to-end cross-browser testing with TestCafé
Continuous integration with CircleCI

Stack

Serverless JAMStack architecture:

Vue.js
Quasar framework
Stelace API as backend
Stelace headless CMS
Stelace.js SDK
Netlify for static site and lambda functions deployment

Node.js >= 10.18 is used for tooling.

Getting started

You need your Stelace API keys to get started. Good news: Stelace is open-source so you can deploy your own server.

Clone this repository

git clone https://github.com/stelace/marketplace-demo.git
cd marketplace-demo

Install node_modules

# using yarn instead of npm is recommended
yarn

If you don’t have yarn installed, you can follow these instructions.

Create environment files for development and production.

You can copy .env.example and fill it with Stelace API keys (generate them with the server-side open-source project).

cp .env.example .env.development
# You may want to use live keys in this file
cp .env.example .env.production

You need to fill the following environment variables:

STELACE_INSTANT_WEBSITE_URL
STELACE_PUBLISHABLE_API_KEY (pubk_...) used in Vue app
STELACE_SECRET_API_KEY (seck_...) used in data seeding scripts
STELACE_API_URL can be left blank unless you use your own server rather than default api.stelace.com

Please refer to .env.example for more details about environment variables, including map, payment gateway, logging and analytics.

Seed development data

yarn seed

Start the development server

quasar dev
# or, if you want to run Netlify functions with stripe payments as well:
yarn dev

Please refer to Quasar docs for more details about front-end configuration and components.

Developing with self-hosted Stelace API server (open-source backend).

Stelace Core API server has to be launched locally before starting this project's server. First we need to launch services needed by Stelace Core API. ```sh yarn docker:db ``` Then we need to initialize the database with Instant configuration. ```sh cd /path/to/stelace-core git checkout dev yarn setup:instant ``` Secret and publishable api keys will be displayed so you can use it as environment variables for this project. You’ll also need to set some environment variables such as `STELACE_API_URL` (http://127.0.0.1:API_PORT). Let’s start the server. ```sh yarn dev ``` Please refer to`.env.example` in `stelace-server` project.

Branding

Customize the app with your own colors and branding in src/styles.json, documented in styles.json.md.

Deployment

Please refer to deployment docs section for more details.

stelace / marketplace-demo

readme