12 Tools for Fullstack Frontend Engineers

Here is a list of tools I came across during my frontend journey.

Tool Manager

Volta is a JavaScript tool manager. You are working on two projects. One requires Node version 16 and other requires version 14. It is difficult to switch between these version even with `nvm`. Install volta in your laptop. Then have the volta configuration in your project. Rest happens automatically.NVM stands of Node Version Manager. It helps to switch between different Node.js versions in our laptop. It helps to prevent reinstallation of Node.js as per project requirements.Husky can run some tasks before we make a commit to Git. Suppose, we want to check for ESLint errors in the files we worked, before committing it. Husky can help here.

Cloud

AWS or Amazon Web Services is a cloud provider. We can setup servers or use services provided by Amazon infrastructure. Its suits applications of all scales.

Code Quality

ESLint analyze and find problems in JS code. It is available in most of the text editors and can also be used as part of CI/CD.Prettier is a code formatter. It is a stable formatter used in many big projects. Having a `.prettierrc` file in your project ensures uniform code formatting across all developers. Otherwise there are chances that a file change in Git shows only formatting changes.

Bundle the Code

Webpack is a widely used code bundler. It crunches JS, JSX, SASS or whatever and creates a bundle out of it.Metro is a JavaScript bundler for React Native applications developed by Meta(previously Facebook)

Testing

Jest is a JavaScript testing framework. Very popular and supports snapshot testing in React.Live Server is a Visual Studio Code extension that can run a html file from a development server. We can right click on a file directly from VS Code and open it using this live server.

Type Check

Flow is a static type checker for JavaScript. Stripe used it in their Dashboard. Later they moved to TypeScript.TypeScript does static type checking in JavaScript. It is currently maintained by Microsoft and well supported by Visual Studio Code.Airtable Codemod is an open source code from Airtable to convert codebase from Flow to TypeScript. All edge cases are not covered, but a good starting point if you are considering to change Flow to TypeScript in one go.