nohands

nohands is my personal, opinionated, zero-config starter kit based on:

npm for its speed and [workspaces] support
parcel for its (zero-config) ease of use and tree-shaking
typescript for its types, duuh. (Also its es5 transpiling)
SCSS, because you don't want to do CSS (also I hate the css-in-js approach, especially in production)
react for its minimal boilerplate - In my entire (15+ year career) I have never written less to achieve the same goal
react-router for its industry-standard and awesome documentation
bootstrap for its style framework and very good variables
reactstrap for its convenient way of using bootstrap components
use-intl for its easy to learn and use way of doing i18n, also industry-standards (BabelEdit etc.)
prettier, because I don't want to reinvent the wheel - set and enforce standards across the team (possibly prevent the tabs-vs-spaces war, because spaces are surely superior as everyone knows and agrees upon on)
stylelint for its help in consistency and quality
eslint for its help in consistency and quality
lint-staged for its convenience when working together
husky, required to enable the above
editorconfig just for fun

No static site generator though.

You'll also need to add polyfills as you need them. core-js is your friend here.

Prerequisites

Node.js >= 16.18.0
npm >= 8.19.2
Under windows: windows-build-tools: npm install --global --production windows-build-tools@4.0.0

It is also recommended (though not required) to install the following plugins in your IDE (I favor VSCode) to get the most out of this repo:

EditorConfig
ESLint
gitignore
Prettier
SCSS
stylelint
Typescript-Essentials
Visual Studio IndelliCode

Install

in project-root run npm install

Pro Tip

I added aliases for the main commands (windows cmder):

alias yo=yarn outdated $*
alias yup=yarn upgrade-interactive --latest $*
alias yes=yarn start $*
alias yb=yarn build $*
alias y=yarn $*
alias gco=git checkout $*
alias gm=git merge $*
alias gcam=git commit -am $*
alias gs=git status $*
alias gps=git push $*

Start developing

in project-root run npm run start

QA and code quality

There are multiple libraries involved in ensuring the best possible code quality, even when working with teams.

To verify parts of the code on-demand just do (one of) the following:

in project-root run npm run check:ts to verify that the typescript compiler can interprete your project and otherwise lists the errors
in project-root run npm run lint:ts to let eslint crawl through your code and find warnings and errors
in project-root run npm run check:deps to let dependency-cruiser check all your dependencies
in project-root run npm run draw:deps to draw the dependency-tree determined by dependency-cruiser (You'll need to have the dot cli command installed. Graphviz is the library behind this)
in project-root run npm run check:all to run all the above tests
in project-root run npm run pretty to clean up all auto-fixable code styling warnings and errors