docs

Flex Template for Web: Documentation

Why Saunatime?

Short answer: Demonstrate the features of Flex with a marketplace for renting saunas. Because why not.

Long answer: Saunatime works as a template for a marketplace user interface. It can be used as a marketplace client out of the box but is intended to be modified to match the requirements of each marketplace built on top of the Flex API. Also, marketplaces that do not use Saunatime as a template for building a client can use this template application as a reference on how the Flex API can be used in a browser environment using the JavaScript SDK.

Marketplace features included in Saunatime:

• Location search shows the user if there are saunas available in a given location.
• The listing page gives a detailed view about what a particular sauna offers.
• Transaction process: Saunatime uses nightly booking.
• Notifications: Emails are sent during the booking process to alert customers and providers about changes in the booking state.
• Inbox lists orders and sales.
• Reviews can be given after a completed transaction.
• User profiles provide detailed information about a given user.
• Extended data: The listing and user data models are modified using extended data.

Directory structure

After cloning the repo, your project should look like this:

├── ext/
│   └── default-mail-templates/
├── package.json
├── docs/
├── public/
│   ├── static/
│   ├── 500.html
│   ├── index.html
│   └── robots.txt
├── server/
│   ├── csp.js
│   ├── index.js
│   ├── sitemap.js
│   └   ...
└── src/
    ├── analytics/
    ├── assets/
    ├── components/
    ├── containers/
    ├── ducks/
    ├── forms/
    ├── translations/
    ├── util/
    ├── Routes.js
    ├── app.js
    ├── config.js
    ├── examples.js
    ├── index.js
    ├── marketplace-custom-config.js
    ├── marketplace.css
    ├── marketplaceFonts.css
    ├── marketplaceIndex.css
    ├── reducers.js
    ├── routeConfiguration.js
    └── store.js

public/index.html

This is the page template. It includes fonts, Stripe SDK, Mapbox API (and Google Maps JavaScript API), and app icons. It also specifies placeholders for tags generated by React Helmet

src/

• src/index.js is the JavaScript entry point on the client-side (it also exports renderApp function to be used for server-side rendering).
• src/app.js creates ClientApp and ServerApp
• src/routeConfiguration.js defines logic between routes and page-level components
• src/marketplace.css, src/marketplaceIndex.css, src/marketplaceIndex.css define marketplace level styling using CSS Properties and CSS Property Sets.
• src/translations/en.json all English translations used in Saunatime template app. (A good place to start customization.)

src/components/

Normal components used in Flex Template for Web are defined here. The main file for the component is behind path src/components/ComponentName/ComponentName.js, but you can import it through component/index.js:

import { NamedLink } from 'path/to/components';

When creating new components, remember to import marketplace.css file to component's own CSS file - that way you can use CSS Property variables defined in src/marketplace.css.

src/containers/

Containers are components that are connected to Redux store. Currently, this folder contains only page-level components and one common component: TopbarContainer.

src/forms/

Forms are in their own folder since they are using a special library to handle validations, errors, internal state, etc.

server/

• server/index.js handles server-side rendering (SSR). Built with Express (Node.js framework).
• server/csp.js Content Security Policy, whitelist of domains that the application and loaded scripts are allowed to access from the browser.
• server/sitemap.js generates a minimal sitemap.xml for SEO purposes.

ext/default-mail-templates/

This directory contains default email templates for transaction-specific needs (e.g. booking-request-accepted). However, there are some built-in email templates that you can change in Flex Console.

NOTE: Changing these doesn't change actual email templates - you need to send customized templates to your Flex contact person.

Getting started

We recommend going through the Getting started articles in the Flex Docs:

• Introducing Flex
• What development skills are needed?
• Getting started with FTW

Customization guide

The easiest way to start a customization project is to read through the How to Customize FTW guide in Flex Docs.

How to customize this template

After going through the customization guide, you should probably start with the following guides in Flex Docs:

• How to set up Mapbox for FTW
• How to change FTW UI texts and translations
• How to customize FTW styles
• How to change Terms of Service and Privacy Policy in FTW
• How to change FTW icons
• FTW customization checklist
• How to deploy FTW to production
• How routing works in FTW
• How the Redux setup works in FTW

See also the following articles:

• How to extend listing data in FTW
• How to change search filters in FTW
• How to add static pages in FTW
• How to test FTW
• How to set up Sentry to log errors in FTW
• How to set up Analytics for FTW
• How to set up Content Security Policy (CSP) for FTW
• How to use CI with FTW
• How to improve performance

See also the original create-react-app documentation.

The application was bootstrapped with a forked version of create-react-app. While most of the original documentation still applies, there are some important differences listed in the sharetribe-scripts NPM package.