GAIA React Documentation

GAIA React is a fully comprehensive template for building modern React web applications.

It is designed to be the best possible starting point for any professional React project.

It comes with EVERYTHING you need, fully configured and ready to go.

The Developer Experience (DX) is designed to be top-notch.

• Automated and robust code quality tools are all set up, keeping your code clean and tech debt to a minimum.
• Best practices are baked into the source code examples for you to follow.
• Utilities, hooks, authentication, components, services, styles, tests, stories, and other code examples are all included to help you get started quickly.
• Unit, integration, visual regression, and end-to-end tests are set up.
• While GAIA comes with recommended packages, conventions, and settings, you’re free to change or remove them to suit your needs!

GAIA React has many great features built-in:

• Built with Remix, the best full-stack React framework for the modern web
• TailwindCSS for styling, along with CSS Module support
• Zod for data validation
• Robust ESLint ruleset along with Prettier and Stylelint
• Husky and Lint-Staged for pre-commit checks to ensure code quality
• A complete testing suite with Vitest, React Testing Library, and PlayWright
• Storybook and Chromatic, with a Remix Stub decorator included
• Mock Service Worker with working handlers, and msw/data for data mocking
• remix-auth with a working authentication example
• Toast notifications with remix-toast and react-toastify
• Internationalization via remix-i18next with sample files already in place
• RVF for form management and validation
• FontAwesome icons
• A convenient and flexible wrapper around fetch that simplifies API calls
• Many example components, ready for you to use and modify
• Useful utility functions and hooks
• Dark mode support
• And much more!

No matter what your skill level or experience, GAIA will make your life and your code better.

Background

GAIA React is the spiritual successor to the GAIA Flash Framework, which was the most popular Flash framework in the world. It was used to build over 100,000 Flash sites and relied upon by every major digital agency worldwide. GAIA was known for its comprehensive feature set, ease of use, and robustness. It was designed to make Flash development easier and more efficient, and it succeeded in that goal.

GAIA React has been in development for over 4 years, with multiple developers on different teams contributing to its development. It has been used in production on multiple projects, and has been refined and improved over time.

Why GAIA?

Back in the Flash days, almost all projects were greenfield, and Flash engineers had many opportunities every year to build projects from scratch. This gave us a lot of practice learning the hard way what worked and what didn’t. We didn’t have npm, we had to build everything ourselves everytime. And we got to do it over and over again.

Nowadays, there are few opportunities for engineers to practice and learn from building greenfield projects. Most projects are maintenance projects, where you’re working on someone else’s code, and your ability to make fundamental changes can be limited. In the worst cases, the main thing you’re learning is how to cope with a project that has too much tech debt.

GAIA React is the culmination of years of experience building greenfield projects. It is a great way to learn best practices and how a modern React project should be structured, organized, and sufficiently enforced to ensure technical debt is kept to a minimum.

Philosophy

GAIA is built upon the philosophy that the best way to produce cohesive well-written, easy-to-read and easy-to-maintain code, regardless of skill level, is having automated tooling to maintain code quality. GAIA’s robust linting setup has fix-on-save functionality that automatically keeps code clean and high quality so you and your fellow developers can focus on what really matters.

All the linting configuration files are included. You can leave it as-is, or customize to your preferences. Detailed information about the linting setup can be found in the Code Quality section.

Component-Driven Development

Storybook is included with GAIA to facilitate Component-Driven Development which is a proven methodology for building web applications. It involves breaking down the UI into small, reusable components that can be developed, tested, and documented in isolation. This makes it easier to build, maintain, and scale applications.

Check out the Testing section for more information.