Public People Frontend ·

This repo contains the user interface for the Public People project.

Stack

Built with Gatsby and Redux

The following Gatsby plugins are used:

• gatsby-link
• gatsby-plugin-google-fonts
• gatsby-plugin-react-helmet
• gatsby-plugin-sass

The following Redux bindings/plugins are used:

• react-redux
• redux-devtools-extension
• redux-thunk
• redux-batched-subscribe

Conventions

Files

• Underlying file architecture corresponds to guidelines established in Gatsby documentation.

Redux

• Redux file architecture corresponds to Ducks convention.
• Redux action structure correspond to Flux Standard Action convention.

CSS

• Utility classes follows naming conventions used by Tailwind CSS
• CSS linting done in accordance with the following Stylelint configs:
  • stylelint-config-standard
  • stylelint-scss
  • stylelint-config-css-modules
  • stylelint-no-unsupported-browser-features

JavaScript

• JavaScript linting done in accordance with the following ESLint configs:
  • eslint-config-airbnb.
  • eslint-plugin-react.
  • eslint-plugin-import
  • eslint-plugin-jsx-a11y

Testing

• Unit tests are written in Jest and placed in a __tests__ folder located inside a component folder. Can be run with npm run test:jest.
• Visual regressive testing is done with BackstopJS, and configured in the tooling/backstop folder. Can be run with npm run test:backstop.

Support

• Browser support should correspond with the following Browserslist rules:
  • last 12 chrome versions
  • last 12 firefox versions
  • last 6 safari versions
  • explorer >= 9
  • edge > 0

Development

1. Clone this project by running git clone https://githubcom/public-people/public-people-frontend.
2. Make sure you have NodeJS installed.
3. Run npm install in the root folder of the repository.
4. Run npm start to spin up the development server.*
5. Open localhost:8000 in your browser.

* Development server uses hot-reloading. Changes will reflect immediately on localhost:8000 without refreshing the browser.

Deployment

1. Husky automatically executes ESLint, Stylelint, Jest and BrowserStack tests via npm run test:local upon running a git push command.
2. Code will only be pushed to remote repository if npm test passes. ^{2 3}
3. Netlify builds a new static site instance of the repo via npm run build.
4. If build is valid it will be deployed to Netlify at public-people.netlify.com.

² It is advised to integrate ESLint into your editor/IDE to receive linting errors as you work. Read the following ESLInt documentation to integrate ESLint into your editor/IDE.

³ If this is not possible it is advised that you run npm test:lint as often as possible during development. In emergencies Husky can be bypassed by running git push --no-verify.

Contribute

See tasks for the current pre-release version.

Appreciation

Thank you to Browserstack for providing free cross-browser testing services.