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 ❤️.
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.
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.
- Asset management. Assets can be anything from flats and homes to cars or concerts
- Powerful and typo-tolerant Search 🔍, on a relevance and dynamic availability basis
- User authentication including social login & SSO
- User management and Ratings ⭐
- Real-time Events and Messaging
- Automation with Stelace Workflows 🚥
- Customizable payment process using serverless functions
- Headless CMS 📃 with Stelace Content API
- Global CDN for images and user files
- i18n 🌍 and full translations
- Accessibility
- …
- and much more with Stelace API
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.
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
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.
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
yarnIf 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.
cp .env.example .env.development
# You may want to use live keys in this file
cp .env.example .env.productionYou need to fill the following environment variables:
STELACE_INSTANT_WEBSITE_URLSTELACE_PUBLISHABLE_API_KEY(_pubk__...) used in Vue appSTELACE_SECRET_API_KEY(_seck__...) used in data seeding scriptsSTELACE_API_URLcan be left blank unless you use your own server rather than defaultapi.stelace.com
Please refer to .env.example for more details about environment variables, including map, payment gateway, logging and analytics.
- Start the development server
quasar dev
# or, if you want to run Netlify functions with stripe payments as well:
yarn devPlease refer to Quasar docs for more details about front-end configuration and components.
- Branding
Customize the app with your own colors and branding in src/styles.json, documented in styles.json.md.
We’ve set up continuous deployment for you with Netlify.
You just have to click "Deploy to netlify" above and follow the instructions to deploy.
Please refer to deployment docs section for more details or alternatives.