Mobile WEB e-shop. Demo

Motivation

• 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

Long term idea

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!

Tech stack

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

Back-end

• GraphQL server using Python Graphene

How to install

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

Architecture

One React component - one self-contained directory

/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

Tools

GraphiQL

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

Graphql Voyager

Interactive GraphQL schema (e-shop demo)

React DevTools

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

Redux DevTools

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

Apollo DevTools

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

Visual Studio Code IDE (optional)

Why

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

If you DON'T use it - automatically install all extensions and configure it

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

Already use it

• 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

TypeScript

• 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"

Linters and code formatters

Tslint to lint TS

• 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

Prettier code formatter

• 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 to lint CSS

• 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

JSON formatter

• Also use Prettier described above

MarkDown linter and tools

• 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

UI with Ant Design and Ant Design Mobile

• 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

Related projects

• 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