An engineer's toolset is part of what sets them apart. Well chosen tools allow him or her to stay focused and productive.

You can get a short version of this post at my what-i-use Github repository

React

React is declarative and encourages a functional programming approach. It's focused on just one thing and does it well: User Interface. I can plug in whatever technology I want for other areas of my project.

React has a massive community which makes getting support simple. A quick google search gets me solutions to any issues I'm having, and leads to awesome curated content like React Patterns and this React component collection

Firebase

Firebase is a Backend as a Service. It provides a place to host my app and a database to store everything. It also provides a simple API for authentication and security. The documentation is clear and concise, and since it's owned by Google, it's constantly being invested in and improved.

Firebase also has some awesome extras that make it go above and beyond like realtime data updates and simple push notifications.

Having Firebase take care of backend services lets me focus on what makes my project shine.

Bulma

Bulma is a simple CSS framework that provides a number of well-designed and commonly used user interface components like buttons, cards, and toolbars. Using Bulma's preset components saves me the tons of hours of CSS development I'd need to build these components from scratch every time.

Bulma doesn't come with any Javascript, meaning it can focus on what it does well: CSS and design.

Create React App

Create React App is the fastest way to get up and running with a React Single Page Application. It sets me up with a configuration that works for most projects so I can focus on building software. It has an active community so it also keeps me up to date on best practices for code linting (checking for common coding errors), compiling (turning source code into production ready code), and other development operations stuff it takes care of.

ESLint

ESLint highlights errors, common potential areas for bugs, and unclear code. I hook it up to my text editor so it shows warnings and errors as I code. It drastically spiked my efficiency when I started using it.

Prettier

This is one of the newer tools I use, and it is incredible. Prettier formats my code every time I hit save. It'll add in semicolons and proper spacing. Since prettier does it automatically, I don't spend any time thinking about code formatting, which means I'm focused on what matters.

Lodash

When programming, less is more. The less code I write, the less code I maintain, the less surface area for bugs. Lodash provides a set of commonly used tools that I use regularly. It saves me from rewriting the same things over and over or maintaining my own versions.

Since Lodash is open source and used by tons of other developers, I'm sure that it's all well tested and bug free.

Functional Programming Concepts

I use concepts from functional programming because I've found they keep my code simple, concise, and easy to reason about.

My favourite book for learning functional programming is Kyle Simpson's Functional-Light-JS Book.