R3wy

React application proof-of-concept with focus on maintainability, setting as many 💂‍♂️ guard 🛤️ rails as possible.

• Features
• Install
• Application Stack
• Development flow
• Scripts
• Todo

Features

• 🐉 Lerna monorepo to encourage setting up your application domain as a sum of smaller packages
• CircleCI with jobs that read, almost, as pure functions + Contexts
• Typescript, ESLint, Prettier, LintStaged, CommitLint and Githooks because I don't trust myself to be consistent
• 💌 Automated, Conventional Commits based, versioning and releases via commitlint + lerna publish
• 🔨 E2E testing using Cypress and Unit testing with Jest

Install

git clone git@github.com:r3wy/r3wy.git && \
  cd r3wy && \
  npm run setup

Even if you are not contributing code and only updating docs or CI configurations, you should still run once npm run setup or npm install. Doing this will activate git hooks present in .githooks folder.

Application Stack

• webpack v5 + swc - Most popular JS bundler + lightning fast, Rust based, compile times
• typescript v4 - A strongly typed programming language that builds on JavaScript
• react v18 - A JavaScript library for building user interfaces
• react-router v6 - Declarative routing for React
• chakra-ui - Simple, Modular & Accessible UI Components for your React Applications
• rambda - Point-free style functional programming library. Faster, smaller and with TypeScript support alternative to Ramda

Development flow

Trunk based development with friends. All code changes flow one-way, bottom-up without diverging:

• feat/pr-branch -> dev -> main.

+--------+
|  main  |
+--------+
   ^
   |  +--------+
   \--+  dev   |
      +--------+
         ^
         |   +-------------------------+
         |<--+  feat/login-form        |
         |   +-------------------------+
         |
         |   +-------------------------+
         \<--+  fix/login-remember-me  |
             +-------------------------+

⚠️ WARNING
Always use "Squash and Merge" when mearging a PR into dev.
Merge commits can still be done from the terminal - should never be the case.

Scripts

Starts development servers:

• localhost:8080 - Local development server
• localhost:8888 - Bundle analyzer

# repo root 
#  > "start": "npm run start --workspace=@r3wy/react"

# @r3wy/react
#  > "start": "webpack serve --mode development"
npm start

Build src/index.tsx entry point into dist folder:

# repo root
#  > "build": "npm run build --workspace=@r3wy/react"

# @r3wy/react
#  > "prebuild": "rm -rf dist",
#  > "build": "webpack --mode production"
npm run build

⚠️ WARNING
start and build scripts will not throw on TypeScript or ESLint errors

Interactivly upgrade dependencies to the latest versions across all packages:

# repo root
#  > ncu --deep --interactive
npm run update

Todo

• Fix unit-test coverage scope, enforce minimum test coverate in CI
• Update setup CI job to benefit from cached node_modules
• 🔴 Locally install npm packages in lambda function repos. Currently they are not part of workspace as a workaround for the lack of npm's or lerna's --nohoist
• Use lerna run to run scripts cross-package and benefit from caching and parallel running
• 🔴 Increment versions and local dependencies versions of private repos also, not only of those who get published to npm ... prob via separate call to lerna version
• Refactor useCRUDStatus to allow arbitrary actions
• 🔴 Configure Lerna canary builds for dev branch
• 🔴 Introduce Terraform as Infrastructure as Code solution
• Code splitting
• Export Typescript config to separate @r3wy.ts-config public package
• Export UI primitives to separate @r3wy.react-ui public package
• Export hooks to separate @r3wy.react-hooks public package
• I18n with react-i18next + Google Spreadsheet data import
• SSR
• Update CRUDStatusUI to display all running operations
• OAuth API + useAuth support
• Realtime updates
• Refactor inline css styles in separate Chakra Components