React stack playground

Project goals

• production ready SPA stater kit
  (may be with more strong and quality oriented defaults with compared to CRA
  although it may happens that we just wanted to cook the webpack ourselves 🙃)
• clean(in our opinion) architecture with attempt to formalize as many as possible project use cases
• target audience - commercial project development team(2+ front-end developers)
• deep dive into React ecosystem

Status

The Project is continuously improved.
Currently the author subjectively satisfied with most of the tech decisions in project

the repo is not used in production, so something may not suit the needs of the real world

Play with master-branch demo
and corresponded webpack bundle analyzer stat page

Code

• Language - TypeScript (with hyper strong tsconfig.json)
• View - react
• State - redux
• Side effects & async flow - RxJs
• Routing - router-5
• i18n - i18next
• Style - SASS + PostCSS with BEM-like-notation, 🤔 CSS modules considered

Tools

• build - good old webpack with loader/plugin friends

• deploy - github pages or nginx-docker container(may be run locally)

• CI services:

  • github actions:
  • code coverage:
  • sonar cloud:
    • 
    • 
    • 

• unit/integration testing: jest, testing-library

• e2e: testcafe

• code scaffolding/generation - plop-based

• code quality:

  • eslint, prettier, stylelint: defacto industry standard
  • dependency-cruiser: validate architecture-related import rule
  • cspell: amazing tool to prevent spell errors in your code(say bye "spell error" messages in code review)

Features

i18n

i18n approach based-on i18next-ecosystem with bellow features:

• automatic keys parsing from source code
• type-safe message ids depending from JSON files
• split translations by multiple JSON files
• (vscode) ability to maintain JSON file directly from editor (via extension i18n-ally)

Read details here

Dynamically loaded config

Dynamically loaded config approach(tools & code utils)

Philosophy is based on

• An app’s config is everything that is likely to vary between deploys (staging, production, developer environments, etc) Config rule from The Twelve Factor App
• Build Once, Deploy Anywhere!

RxJs based http/api client

Hand made HTTP/API client:

• API inspired by angular`s HttpClient
• has declarative mock for testing
• tiny size(just a few source code files over RxJs)

Redux-related tools

Set of common helpers and plop-based code generation tools allows to simplify and unify redux-related code base

Guidelines

• Architecture
• Naming
• Coding(TS and common programming rules)
• Development(tools and env setup)