# Folder structure

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

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

## 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](https://github.com/nfl/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](http://cssnext.io/features/#custom-properties-var) 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](https://redux.js.org/) 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](http://expressjs.com)
  (Node.js framework).
- `server/csp.js` [Content Security Policy](https://content-security-policy.com), 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 file contains default email templates for various needs (e.g. _booking-request-accepted_, or
_verify-your-email_). You should customize all the different files (\*-html.html, \*-subject.txt,
and \*-text.txt).

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