We have completely revamped our React template “The Chuck Norris Challenge”. We primarily use this template for our internal onboarding for new frontend employees or as a boilerplate for new projects. Many best practices and experiences from past projects have been incorporated into the template, which we would like to present in this article:

Next.js: Why We Switched to Server-Side Rendering

Next.js is an open-source framework for server-side rendering of React applications. It was developed to simplify the development of React-based web applications, especially those that need to be rendered on the server.

Traditionally, React is rendered in the client browser, which means the browser downloads the JavaScript code and then renders the application’s components. This can lead to a delay in page loading, as the user must wait until the code is downloaded and the browser has rendered the page.

Next.js allows developers to render React components on both the server and the browser. The advantage is that the user immediately sees a fully rendered page while the JavaScript code loads in the background.

In the past, we rarely relied on server-side rendering. Usually only when it was necessary for SEO purposes. But a lot has changed. The two biggest points in our view are that deployment and hosting now offer a specific Next.js or SSR option with many solutions. For example, with Firebase or Google Cloud, a Next.js application is deployed and hosted just as easily as a conventional client-side web app. In firebase.json, only the region needs to be set correctly:

The command “firebase deploy” automatically recognizes that it’s a Next.js configuration. For us, this means we no longer have to worry about a Next.js server and hosting largely works out-of-the-box – this was usually a reason for client-side rendering before.

The second major point is that the new official React documentation doesn’t mention “create react app” anymore, and initializing a new project is only recommended with SSR like Next.js, Remix, or Gatsby. The “create react app” command was the official React standard for setting up a new project. The fact that this path is no longer in the documentation is a signal to us that probably no energy or maintenance work will flow into it in the long term.

Folder Structure Domain Driven

Finding a good folder structure for a project is very individual and subjective. That’s why we only want to provide a suggestion in our template of how a project could be well organized. What’s also important: a folder structure is alive and should always fit the growing project size, the developers, and the requirements. Renaming and restructuring are just as important as refactoring in the code itself.

Essentially, however, there are two main approaches to structuring a frontend project, which can be quickly explained using examples:

Application-Driven:

src
- components
  - tsx
  - tsx
  - tsx
  - …
- models
  - ts
  - ts
  - …
- state
  - ts
  - …
- tests
  - test.ts
  - …

Domain Driven:

src
- app
  - components
  - model
  - theming
- auth
  - components
  - context
  - model
- jokes
  - api
  - components
  - model
- randomColor
  - components
  - model
  - state
  - tests

Our experience has shown that for most projects, organizing by functional domain, or Domain Driven, was better, as you can still find your way around even with growing project size. However, we decided against strict guidelines for folder structure, as it’s important that the structure fits the project and the developers. Our primary criterion is always how quickly a new developer can find their way around the project.

Material-UI

Material is a design guideline or style guide from Google. The latest version is now version 3, although it doesn’t seem to be catching on. The predecessor version is much more established. Whether from Google itself or from numerous other app and web app developers – Material interfaces are very widely used and users are well accustomed to the input and output components. Material describes, in addition to colors, spacing, etc., also the appearance and behavior of UI components, such as buttons, text fields, and dropdowns.

This specification of components is implemented by the library Material-UI for React. In addition to ready-made components, Material-UI offers an excellent API to customize buttons, etc., if necessary. The great popularity of Material-UI is proven by its 88,000 GitHub stars. At innFactory, we have been using Material-UI for 6 years now and are impressed by the stability and good migrability to new versions and the library’s continued development.

State Management with Recoil

Officially, the state management framework Recoil, developed directly by Facebook/Meta for React, is still in beta. However, due to the rapidly growing community and the good experiences from our own tests, we have been using Recoil in production for a while. In larger projects, we were able to significantly reduce side effects compared to Redux, while clarity and maintainability increased. With really large projects, state management remains complex – no framework in the world will solve this.

For us, the biggest advantage of Recoil is that it’s very lightweight at the beginning with a small project. As soon as the project grows, Recoil is also flexible and strong enough to meet all requirements while remaining clear with good implementation.

Authentication with Firebase Auth (Google Cloud)

For user management and authentication, we rely on established solutions, such as Firebase Auth for smaller projects or Keycloak for more specific requirements. In our demo project, we have implemented the integration with Firebase Auth and abstracted it so that you could later also use Keycloak as an auth provider or rebuild it relatively easily.

The interaction with Next.js was a bit more difficult here, but could be solved well in our example project with src/auth/context/AuthContext.ts. If you wanted to integrate another auth provider, you would only need a different implementation of the AuthContext.

Forms with Formik and Yup

Even as an experienced web frontend developer, I’m always amazed at how complex implementing a good form is. Usually it’s just a few text fields, recurring, and yet so different that you have to map the logic behind them individually.

Of course, a form isn’t rocket science. Nevertheless, clean validation, meaningful hints, and error messages for the user are crucial for creating a good user experience. For this routine task, a validation framework like Formik with Yup has long been established with us. At first, forms with Formik seem a bit overhead-heavy, but the second form is already so similar that much can be reused or modified due to the modular structure. For validating email, password, and all other fields, Yup brings a standard toolkit that is also highly customizable. So it’s child’s play to check, for example, the input of an 18-digit serial number or various number ranges and present the user with understandable feedback.

Requests and Caching with TanStack-Query (formerly React-Query)

TanStack-Query is an open-source library for data management that is available for React, but also for Vue, Svelte, and Solid. It was developed to simplify working with asynchronous data, i.e., data retrieval from APIs, and to improve the performance and reactivity of the application.

It handles, for example, caching of requests or enables tracking the loading state of queries. In case of erroneous responses from API calls (e.g., when you briefly have no internet on the train), TanStack handles automatic refetching.

Anyone who has implemented this variety of functionality themselves knows how valuable such a library is. Before we decided on TanStack-Query, we also evaluated the competitor SWR. However, with SWR, the few customization options (as of 2022) regarding caching weren’t enough for us. In general, the TanStack library makes a more mature and thought-out impression on us.

How it all works is illustrated in the template with the Chucknorris API. The “RandomJoke.tsx” component uses the library as follows:

The Boolean “isLoading” displays a loading animation when True. Once the request has returned from the server without errors, the data is in the “data” variable and with the “refetch” function you can manually trigger a new call. TanStack-Query offers an automatism so that when the page is re-rendered or the browser tab is selected, the data is updated. Since the API always returns a new random joke here and it should only be renewed manually, this mechanism is turned off with “refetchOnMount” and “refetchOnWindowFocus”.

Conclusion

Our React template react-chuck-norris is equipped with the best libraries and learnings we have used in recent years. This setup is not only perfect for introducing new employees to frontend development, but is also suitable as a boilerplate for new projects and product ideas. Since the repository was published with the MIT license, it may be used unconditionally freely. We would be happy to receive feedback or suggestions for improvement, because the template should always be further developed and updated so that it’s ready for our next challenges in the web area in the future.

Here’s the link to the repository:

https://github.com/innFactory/react-chuck-norris