Tech Stack
Linting and Formatting
Section titled “Linting and Formatting”We use ESLint and Prettier
for code linting and formatting, respectively.
ESLint helps us catch bugs, bad practices, etc., during development rather
than in production.
Prettier allows us to format our entire codebase uniformly, simplifying code
readability and team integration.
Before each commit, we automatically lint and format the code using
husky and
lint-staged.
Bundler
Section titled “Bundler”The bundler serves the following purposes:
A module bundler provides a method for arranging and merging multiple JavaScript files into a unified single file. Using a JavaScript bundler becomes necessary when your project outgrows a single file or when dealing with libraries with numerous dependencies. As a result, the end-user’s browser or client doesn’t have to fetch numerous files individually.
After initializing this project with CRA (create-react-app), which uses the
webpack bundler, we switched to vite, which uses esbuild and
rollup depending on the environment (dev or production).
This change has dramatically sped up the start time (and productivity) in dev mode.
Error Handling
Section titled “Error Handling”Use react-error-boundary as a wrapper functional component
react-error-boundary +
article
Router
Section titled “Router”- react-router-dom (industry standard)
Complex State Management
Section titled “Complex State Management”- Redux + react-redux + redux-toolkit
UI Framework
Section titled “UI Framework”Different Types of Framework
Section titled “Different Types of Framework”- CSS module in React => + scoped styles
- Preprocessor (SASS) => + nesting, mixins, functions
- Utility class library => + unified UI | - verbose HTML code (many
classes), risk with the cascade nature of
CSS - CSS-in-JS => + style components programmatically, create dynamic styles, scopes styles
- CSS framework (
Bulma) => + prebuilt components | - large bundle size - Component Library (
Mantine,Ant Design,MUI,Chakra)
Selection
Section titled “Selection”react-hook-formlink
Graphs
Section titled “Graphs”Kendolink
Kendolink
Notifications
Section titled “Notifications”react-toastifylink
Translation / Localization
Section titled “Translation / Localization”i18nlink
Real-time Bidirectional Communication
Section titled “Real-time Bidirectional Communication”SignalRlink
HTTP Request
Section titled “HTTP Request”RTK Querylink