IDE Setup

1. Set your project to use whatever node.js version is referenced in the package.json
2. Set Webstorm to use the ESLint settings of the project
3. Set Webstorm to use the Prettier Settings of the project
4. Set Webstorm to use PostCSS as the dialect of stylesheet

Key Components:

The tooling setup for this project loosely follows [this guide.](class="max-w-md mx-auto")

Runtimes / Package Manager

1. NodeJS - Server side JavaScript Interpreter
2. Yarn - Modern package manager to replace NPM that supports a better CLI and parallelism

Dev Server / Bundler

1. Vite - Dev server / bundler (Uses ES6 modules for development / Hot Module Reload, uses Parcel for production bundles.)

JavaScript Frameworks

1. VueJS 3.0 - Minimal front-end framework
2. TypeScript - Language that provides static typing for JS and transpiles to it.

Linting / Formatting

1. ESLint - Semantic analysis
2. Prettier - Formatting

Styles

1. PostCSS - Modular CSS Processing framework that allows the installation of plugins to add features. We're using the PreCSS plugin which mimics SCSS (nested styles, variables, etc)
2. TailwindCSS - Utility based CSS framework that has a predefined list of classes that you use to style your elements.

Testing / Continuous Integration

1. Jest - Standard JS unit testing library
2. Vue Testing Library - VueJS component testing library
3. Cypress.io - End-to-End (E2E) testing framework
4. Husky / Lint-staged - Git hooks tool that runs Prettier, ESLint, and Jest before commits to enforce code quality

Component Driven Design

1. Storybooks - Environment to develop components in isolation and provide documentation for them.