Welcome to the Frontend Engineer Handbook!

Are you tired of sifting through outdated articles? Look no further! This handbook is here to guide you through the constantly-moving world of front end engineering.

Practical guides are provided by this handbook that will help you create an app from start to finish and understand the different concepts thrown around in the front end world, with real-life examples and code.

The goal of this handbook is to keep you updated with the latest and most effective solutions for common everyday problems.

For now, this handbook focusses on a React + TypeScript environment.

Handbook mission

Newcomers are guided through frontend engineering.
Information is provided that is kept up-to-date by constantly revisiting articles.
Practical guides for common challenges are provided.
Stay updated with solutions.

Get notified of updates

Keep up to date with any latest changes or announcements by subscribing to the newsletter below.
No spam. Unsubscribe whenever.

Contributing

Efforts are made to keep information up-to-date as much as possible, as well as to understand any areas that are missing. That is why the ability to comment below each article has been added. Please comment and help create better documentation for all.

Get started

Set up your environment so that coding can be done proficiently.

Streamlined frontend Mac environmentStep-by-step instructions for setting up a developer environment on a MacBook.

Building strong foundations

Learn how to set up and architect a development environment to suit the needs of your team(s) and application(s).

Scaling applicationsFirst understand the fundamental principles of scaling front end applications.Cultivating collaborationHow to create a collaborative environment that allows teams to work together effectively.Purposeful architectureHow to factor business requirements into the architecture of your application.

Building an application

An overview of the different problem areas within an application and how to best solve them.

Bootstrapping a projectGet your project up and running in anything from a simple repo to a fully integrated monorepo.RoutingRouting solutions for React applications are explored, and how to leverage their unique features.State managementDifferences between client and server state are explored, and the recommended libraries are discovered.Data fetchingBest practices for fetching data in React are learned, along with implementing scalable data fetching strategies.StylingUnderstand the different available styling techniques and how they complement eachother.Form handlingEffective ways to handle forms in React applications using popular form handling libraries and validation techniques are learned.TablesHow to create tables in React using popular table libraries and avoid the pitfalls of creating your own are learned.AccessibilityA practical guide to making React applications accessible, covering fundamentals and key techniques.

Development workflow

Learn how to integrate processes that empower, not block, teams to introduce changes to your application(s).

Mastering frontend testingDifferent types of tests and strategies for writing effective automated tests are learned.

Build tools

Package managersPopular frontend package managers, their features, and how to choose the right one for your projects are explored.BundlersPopular frontend bundlers, their features, and how to choose the right one for your projects are explored.