Last updated

Getting started with FTW

This tutorial is the place to start your journey of getting hands-on with Sharetribe Flex. You will learn the basic building blocks by creating an example marketplace with on of the Flex Templates for Web (FTW).

Flex Templates for Web (FTW) are marketplace web applications built on top of the Marketplace API. While you can create a marketplace purely using just the API, it requires a lot of effort and we recommened using the template as a starting point for customizations.

Currently we have two templates is available:

  • FTW-daily "Saunatime" - a rental marketplace with day-based bookings
  • FTW-hourly "Yogatime" - a service marketplace with time-based bookings

Note: By default your Flex marketplace comes with day-based transaction process. If you want to start working with FTW-hourly, you need to change to the time-based process. See getting started with Flex CLI for more information.

Depending on your needs for customization, changing the template application requires varying levels of development knowledge. For this tutorial it is enough to know how to open a terminal to run some commands and edit text files to change configuration values.

For more information on what skills are needed for customization, see the What development skills are needed? article.

Request API access

To use the Marketplace API, you will need a client ID. You can request access at https://sharetribe.typeform.com/to/BI9M4O

Install development tooling

To get FTW up and running, you will need to download and install some basic development tooling:

Setup FTW-daily

Clone the Git repository:

git clone https://github.com/sharetribe/ftw-daily.git

NOTE: When starting an actual customization project, we recommend forking the Git repository instead of cloning it. This enables pulling in FTW updates later. However, for the purposes of this tutorial, cloning the repository is enough.

Go to the cloned directory:

cd ftw-daily/

Install dependencies

Install all dependencies:

yarn install

Configuration

Start the configurations:

yarn run config

This command will create .env file and guide you through setting up the required environment variables. If the .env file doesn't exist the application won't start.

There are three required variables for FTW to work correctly:

  • REACT_APP_SHARETRIBE_SDK_CLIENT_ID

    Your application's client ID. You need this in order to access the Marketplace API with the SDK. You can find out what your application's client ID is in Flex Console.

    If you don't set the client ID, API calls to the Marketplace API won't work in the application.

  • REACT_APP_STRIPE_PUBLISHABLE_KEY

    Public Stripe key enables payments using Stripe. You can follow How to set up and use Stripe guide to get the publishable key. You should also make sure you have enabled Stripe Connect in your platform.

    If you don't set the Stripe key, payment's won't work in the application.

  • REACT_APP_MAPBOX_ACCESS_TOKEN

    Mapbox access token is used for the maps in the marketplace. Follow the Mapbox set up guide to get your access token.

    If you don't set the Mapbox key, the map components won't work in the application.

See the FTW Environment configuration variables for more information on the environment variables.

Start the server

Start the development server:

yarn run dev

This will automatically open http://localhost:3000 in a browser:

Default marketplace screenshot

Make a customization

Now that we have the default template marketplace running, let's make some customizations!

Open the src/marketplace.css file with a text editor and change the variable --marketplaceColor to have a different value:

--marketplaceColor: rebeccapurple;

This will automatically refresh the browser and show the updated styles:

Customized marketplace screenshot

Summary

In this tutorial, we used FTW-hourly to make our own customized marketplace. As you see, FTW is a fully ready and polished marketplace application that is running on top of the Marketplace API. All of the customization is in your control, and you can change it to fit your marketplace needs. To start customizing FTW as you own marketplace, see the How to Customize FTW guide.