{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/introduction/development-skills/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"What development skills are needed?","slug":"development-skills","updated":"2019-11-21T00:00:00.000Z","category":"introduction","ingress":"Building a custom marketplace with Flex requires some software development skills. This article explains what you need to know when customizing the platform.","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can use any technology to build a marketplace on top of the\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/operator-guides/concepts/#marketplace-api"},"children":[{"type":"text","value":"Marketplace API"}]},{"type":"text","value":". However,\nmaking a marketplace user interface (UI) from scratch requires a lot of\neffort. This is why we provide Flex Templates for Web (FTW). These are\npolished marketplace web applications that are ready for customization."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"FTW is a template web application that uses the Marketplace API. It is\nbuilt using common and modern frontend tooling, so frontend developers\nshould feel right at home and happy with all the technology."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"technologies","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#technologies","ariaLabel":"technologies permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Technologies"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here are the main technologies the FTW uses:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"JavaScript: the programming language for the whole application"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"CSS: styling the user interface using\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/css-modules/css-modules","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"CSS Modules"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://reactjs.org/","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"React"}]},{"type":"text","value":": library for creating user interfaces\nwith components"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://redux.js.org/","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Redux"}]},{"type":"text","value":": state and data flow handling"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://reacttraining.com/react-router/","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"React Router"}]},{"type":"text","value":": routing"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/final-form/final-form","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Final Form"}]},{"type":"text","value":": forms"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://expressjs.com/","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Express"}]},{"type":"text","value":": server side rendering of the React\napplication"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://nodejs.org/","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Node.js"}]},{"type":"text","value":": development tooling and running the\nExpress server"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"customization","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#customization","ariaLabel":"customization permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Customization"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Depending on what needs to be customized, the required skills might vary\na lot. Simple color and image changes require only basic development\nskills, but familiarity with command line tooling is helpful. Many UI\nchanges can be done with pure CSS knowlege."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For anything more extensive than basic look-and-feel changes,\nfamiliarity with JavaScript, React, and crafting UIs with components is\nneeded. Working knowledge of frontend web development and JavaScript is\na good starting point in learning the technologies."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Check out the\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/introduction/getting-started-with-ftw-daily/"},"children":[{"type":"text","value":"Getting started with FTW"}]},{"type":"text","value":"\ntutorial to see what it takes to get the template running with a small\ncustomization."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"development-tooling","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#development-tooling","ariaLabel":"development tooling permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Development tooling"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"While FTW uses Webpack, PostCSS, and various other tools behind the\nscene, knowledge of these technologies is not needed in usual\ncustomizations. Compared to a usual frontend project with a long list of\ndependencies and extensive Webpack configuration files, FTW hides all\nthis behind a\n"},{"type":"element","tagName":"a","properties":{"href":"https://www.npmjs.com/package/sharetribe-scripts","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"sharetribe-scripts"}]},{"type":"text","value":"\nNPM package."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sharetribe-scripts"}]},{"type":"text","value":" is a fork of the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"react-scripts"}]},{"type":"text","value":" package in the\namazing "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/facebook/create-react-app","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Create React App"}]},{"type":"text","value":"\ntool. We have added server side rendering and CSS modules, but otherwise\nall the nice things from "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"create-react-app"}]},{"type":"text","value":" are still there."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"getting-help","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getting-help","ariaLabel":"getting help permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Getting help"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are unsure if something is possible or how to do a certain thing\nwith Flex, you can contact our support:\n"},{"type":"element","tagName":"a","properties":{"href":"mailto:flex-support@sharetribe.com","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"flex-support@sharetribe.com"}]},{"type":"text","value":". If\nyou are not a developer or don't have access to one, we can also help\nyou."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For developers doing customizations, we have an active community in\nSlack. You will get access to the channel when you get an account to\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/operator-guides/concepts/#console"},"children":[{"type":"text","value":"Console"}]},{"type":"text","value":"."}]}],"data":{"quirksMode":false}},"headings":[{"value":"Technologies","depth":2},{"value":"Customization","depth":2},{"value":"Development tooling","depth":2},{"value":"Getting help","depth":2}]}},"pageContext":{"slug":"development-skills","category":"introduction"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}