Skip to content

Latest commit

 

History

History

docs

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
analytics.md
analytics.md
 
 
ci.md
ci.md
 
 
content-security-policy.md
content-security-policy.md
 
 
customization-checklist.md
customization-checklist.md
 
 
customization-guide.md
customization-guide.md
 
 
deploying-to-production.md
deploying-to-production.md
 
 
env.md
env.md
 
 
extend-listing.md
extend-listing.md
 
 
google-maps.md
google-maps.md
 
 
icons.md
icons.md
 
 
improving-performance.md
improving-performance.md
 
 
map-providers.md
map-providers.md
 
 
redux.md
redux.md
 
 
routing.md
routing.md
 
 
search-filters.md
search-filters.md
 
 
sentry.md
sentry.md
 
 
static-pages.md
static-pages.md
 
 
styling.md
styling.md
 
 
terms-of-service-and-privacy-policy.md
terms-of-service-and-privacy-policy.md
 
 
testing.md
testing.md
 
 
translations.md
translations.md
 
 

README.md

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:

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:

See also the following articles:

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.