Published on

Evolution of my React boilerplate

I started building web applications in my first job using HTML, CSS (Bootstrap), and JQuery. That's it! It was back in 2018. I was a part of the team that used to build financial and event dashboards for our clients.

It had all possible web components like chartss, tables, maps, and carousels. We used a lot of third party libraries like Chart.js, jQuery, and Bootstrap. The code was very modular and easy to maintain. But the biggest problem was duplciation. We had to copy and paste the same code in multiple places.

We sensed a component based architecture was needed. We started to build a component library. The team was familiar with Angular and React. But we went ahead with React because of the one way data flow and component composition patterns.

The OG Boilerplate

I didn't have any say in the choice of the libraries used in the boilerplate as I was new to React. I call this OG boilerplate, as this is still more or less the standard boilerplate in many big corporate react applications.

  1. Bootstrapped using Create React App
  2. Routing enabled by React Router v5
  3. Styling and Components base using:
  4. State management using Redux
  5. Testing using Jest and Enzyme
  6. Bundling using Webpack

I later added linting using ESLint and Prettierto the mix. We didn't use TypeScript but we had PropTypes for type checking.

The Most Used Boilerplate

As I was learning React at job, I started building many side projects by following many online tutorials, and the thing about me is I like to play around with tech stack choices as I follow along a tutorial. Hence I decided to build a boilerplate that I could use to build my own projects. I also wanted to have a boilerplate that was easy to maintain and extend.

This was back in early 2020, hence mostly resembles the OG boilerplate. But the noticable deviation was the use of React Hooks and TypeScript in the project. My state management approach was overhauled to separate out server cache and application state thanks to my one of the all time favourite articles on the subject Application State Management with React by none other than Kent C. Dodds.

  1. Bootstrapped using Create React App
  2. Routing enabled by React Router v6
  3. Styling and Components base using:
  4. State management using React Query
  5. Testing using Jest and Testing Library

I must mention that I am one of the early adopters of Tailwind CSS inspired by the article of CSS Utility Classes and "Separation of Concerns" by Adam Wathan. However it still didn't make it into the boilerplate as it was go to choice for buidling quick websites but I was dependent on component libraries for getting the job done.

The Transition Boilerplate

In 2021, I decided to take a step back and re-evaluate the boilerplate. This is when I was assigned to build the design system for my company. Headless component libraries like Reach UI and Radix UI were gaining traction.

I was extensively using Next.js v9 for my personal projects, and was a big fan of the file based routing. This was also the time I overhauled the OG stack to start using the more modern approach to building React applications and started leveraging Server Side Rendering (SSR) and Static Site Generation (SSG) made popular by Next.js.

  1. Bootstrapped using Create Next App
  2. Routing enabled by Next.js
  3. Styling and Components base using Tailwind CSS
  1. State management using React Query
  2. Testing using Jest and Testing Library and Cypress for end to end testing

The Ultimate Boilerplate

I have changed two jobs in the last three years. Worked in a react native project, went back to using Redux (made easier by Redux Toolkit).

Meantime, React has finally moved the new documentation site out from beta which saw a slow death of Create React App and Next.js is now the official choice to scaffold a production-grade React application.

I have tried Gatsby but found it to be a bit too opinionated and not the right fit for my needs. I got my hands on Remix as soon they went open source and I was hooked by their right approach to building web applications. I infacted advocated to use it in my job but it didn't turn out well due to the steep learning curve and the lack of community support. The new developers in the team were not familiar with some of the opiniated approach of Remix.

This made me realise there is no perfect boilerplate and I have to pick the right tools for the job keeping in mind the team and maintainability. Avoid revamping the boilerplate as soon there is a new hot react meta framework out there. However if I have to make a choice now, I will go with:

  1. Bootstrapped using:
  • Create Next App if my team is familiar with Next.js
  • Vite if my team is not familiar with any meta framework
  • Remix for personal projects and a team that is familiar with the web platform
  1. Routing enabled by
  1. Styling and Components base using:
  1. State management using
  • React Query the undisputed king of state management
  • Jotai coupled with Context Providers for application states
  1. Testing using
  1. Form management using
  1. Misc: