folder-structure.md

docs/folder-structure.md

@@ -0,0 +1,101 @@
+# 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, 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 **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,
+etc. - and we have had forms that have been connected to Redux store.
+
+_**NOTE:** Currently, we are migrating to
+[🏁 Final Form](https://github.com/final-form/react-final-form) (away from
+[Redux Form](http://redux-form.com/))._
+
+## server/
+
+* `server/index.js` handles server-side rendering (SSR). Build with [Express](http://expressjs.com)
+  (Node.js framework)
+* `server/csp.js` [content security policy](https://content-security-policy.com) (a whitelist of
+  domains that external scripts are allowed to access)
+* `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._