• try modern tech stack
• share code between platforms as much as possible
• use great tooling (IDE , Debuggers, DevTools, linters, code formatters)
• front-end - JS on any platform (React), common back-end. GraphQL - to bind both

Create shop example for ANY platform with shared front-end and single common back-end

• web (React).
• mobile web (React). Project link
• mobile app for Android and iOS (React Native). Project link
• desktop app for Windows, MacOS and Linux (React + Electron)
• cross-platform monorepo with shared code from projects mentioned above using ReactXP or Lerna

Smells like future front-end!

• TypeScript
• React
• Redux to manage app's state
• Apollo Client to manage data from GraphQL API
• Webpack 3 with React Hot Loader
• CSS-Modules
• Ant Design Mobile for UI

• GraphQL server using Python Graphene

1. Install Yarn
2. Clone git project and cd to it with command git clone https://github.com/ArtemSerga/react-shop.git && cd react-shop
3. Copy .env.default file to .env with command cp .env.default .env. This will be your local settings
4. Install packages by running yarn install
5. Start project with yarn start
6. Open in Chrome http://localhost:3000/, inspect window (from menu View -> Developer -> Developer Tools) and enable mobile device simulator in DevTools

/MyComponent
  /MyComponent.tsx
  /myQuery.gql  # GraphQL query. Named like "GraphQl root query field". Can be multiple per directory
  /styles.css  # local-scoped styles with CSS-Modules
  /my-icon.svg  # some media. Can be multiple per directory
  /readme.md  # component-related docs

An in-browser IDE for exploring GraphQL API. Try this query (when opened press Prettify and play button)

Interactive GraphQL schema (e-shop demo)

1. In Chrome install React DevTools extension
2. After that, you will have "React" tab in Debug Toolbar

1. In Chrome install Redux DevTools extension
2. After that, you will have "Redux" tab in Debug Toolbar

1. In Chrome install Apollo DevTools extension
2. After that, you will have "Apollo" tab in Debug Toolbar

• subjectively handles this stack better (even than WebStorm)
• you can fully and quickly configure it with steps below

1. Install VSCode and open project's directory via menu File -> Open...
2. Install extension Settings Sync
   • in menu select View -> Extensions to open extensions sidebar
   • type Settings Sync and install it
3. Download extensions and keybindings
   • in menu select View -> Command Palette and run command "Sync : Download Settings". After this step all happens automatically and your VSCode will be ready for work

• NOTE: If you don't need keybindings like IntelliJ IDEA uninstall this extension

• to prevent rewriting your own settings - you can try it with VSCode Insiders
• or just look at list of recommended extensions
• or do nothing, mandatory extensions are mentioned below

• before webpack building, TS => JS compilation happens automatically, so you don't need to run it manually
• VSCode
  • to watch and conveniently solve TS errors via PROBLEMS section (in menu View -> Problems) select in menu View -> Command Palette... and type command "Tasks: Run Build Task"

• to run manually for all project via terminal yarn run tslint
• VSCode
  • install TsLint extension
  • for opened files it automatically show errors in PROBLEMS section (in menu View -> Problems)
  • to see all project problems select in menu Go -> Go to File... and type task tslint

• TSLint for linting, Prettier for code formatting
• in this project all TypeScript, JS, CSS, GraphQL and JSON files are formatted using Prettier
• VSCode
  • install Prettier - JavaScript formatter extension
  • to format file select in menu View -> Command Palette... and type command "Format Document"

• Stylelint for linting, Prettier for code formatting
• to run manually for all project select in menu Go -> Go to File... and type "task stylelint"
• VSCode
  • install stylelint extension
  • for opened files it automatically shows errors in PROBLEMS section (select in menu View -> Problems)
  • for code formatting use Prettier described above

• Also use Prettier described above

• every React component has own directory, so it's a good place to describe it with readme.md
• VSCode
  • side-by-side preview with extension Auto-Open Markdown Preview
  • linting with extension markdownlint to solve problems via menu View -> Problems

• based on React, written in TypeScript
• dozens of features
• subjectively one of the most mature UI library
• cross-platform support:
  • Ant Design for web + desktop apps (supports Electron)
  • Ant Design Mobile for mobile web + mobile apps (supports React Native)
• intensively developed by Alibaba

• react-native-shop - same e-shop example, tech stack and back-end, but for Android and iOS using React Native
• react-cross-platform - online e-shop demo for Mobile WEB, Android, iOS platforms