forrest-lee / webapp-exercise

A web app codebase based on webcube for coding interview challenges

webapp-exercise

A web app codebase based on webcube for coding interview challenges

iOS 7+ ✔	Android 4+ ✔	11+ ✔

Challenges

• Job List

Structure

• configs/ - Project-defined configuration files and build scripts
  • env.sample.config - Project-defined template file for env.config
• app/ - All source code for web app (shared between client-side and server-side), including JS, CSS and assets
  • common/ - Reusable code shared between entry points
    • components/ - Presentational components shared between entry points
    • ...
  • job-list/ - An entry point. See Multiple entry points
    • common/ - Reusable code shared between feature sets
      • components/ - Presentational components shared between feature sets
      • ...
    • main/ - The default/global feature set
      • components/ - Presentational components only used by this feature set
      • containers/ - Container components only used by this feature set
        • App.jsx
      • ...
    • ...
    • index.js
  • ...
• staticweb/ - For static web deployment or testing
  • job-list/
    • index.html, deploy.js, deploy.scss
  • ...
• build/
  • public/ - Generated by Gulp and Webpack, do not manually modify
• ...
• index.js - For single entry point, imported by other projects
• package.json - dependencies and npm scripts based on webcube
• yarn.lock - yarn's lockfile
• env.config - Project-defined configuration options for webcube and custom scripts. See Getting Started

Getting Started

Step 1

First of all, you must create an env.config file in the root directory. configs/env.sample.config is a complete template file for env.config

cp ./configs/env.sample.config env.config

Step 2

Install dependencies:

yarn

Step 3

Follow webcube's document to install / build / test / deploy / ...

Other Conventions

Code Style

Similiar to Airbnb JavaScript Style Guide, Airbnb React/JSX Style Guide

More detail:

• .eslintrc.yml
• .flowconfig
• .stylelintrc
• .csscomb.json
• .htmlhintrc

Recommended Editor/IDE

• Atom + following plugins:
  • language-babel
  • linter + linter-eslint + linter-flow + linter-htmlhint
  • editorconfig
  • toggle-quotes + vim-surround
  • auto-detect-indentation + resize-indent
  • atom-css-comb

Recommended Settings for Atom (config.cson):

"linter":
  ignoreVCSIgnoredFiles: false
  lintOnFly: false
"linter-stylelint":
  disableWhenNoConfig: true
"language-babel":
  transpileOnSave: false
"atom-css-comb":
  projectConfigs: ".csscomb"
  readyMadeConfigs: "csscomb"
"whitespace":
  ignoreWhitespaceOnCurrentLine: false
"trailing-spaces":
  enableForCursorLines: true

Git Hooks

• pre-commit: npm run lint
• pre-push: npm run build

Committing Changes with Commitizen

NOTE: Need npm install commitizen -g

git add .
git cz