GAIA Foundation

GAIA’s foundation includes the following:

Remix

Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience.

GAIA’s Remix setup includes the following helpful libraries:

• remix-auth
• remix-flat-routes
• remix-development-tools
• remix-toast
• remix-utils

Tailwind

Tailwind is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.

GAIA’s Tailwind setup includes the following great tools which make working with Tailwind even better:

Class Management

• tailwind-merge

Linting

• eslint-plugin-tailwindcss
• prettier-plugin-tailwindcss
• stylelint-config-tailwindcss

Plugins

• @tailwindcss/aspect-ratio
• @tailwindcss/container-queries
• @tailwindcss/forms
• @tailwindcss/typography

Data Validation

GAIA comes with Zod, which you can use for form validation, API request/response validation and transformation, environment variables validation, generating TypeScript types, and more.

There are other libraries you can use instead, such as Yup and Superstruct.

Internationalization

GAIA comes with remix-i18next, which is built on top of i18next.

Even if your site only has one language, being able to externalize your strings makes it easier to maintain and update your site.

GAIA’s Storybook setup includes the storybook-react-i18next addon so you can test your components in different languages.

Translation Files

GAIA uses .ts files for language files, instead of JSON. There are many reasons for this:

• ESLint keeps the files organized and formatted consistently.
• TypeScript will catch any syntax errors.
• Type safety and auto-completion.
• It’s easy to extend translations with dot syntax for pages by route paths (e.g. pages.user.profile.settings).
• You can easily use translation strings in your tests. Check the Playwright tests included in GAIA for examples.

Form Validation

GAIA includes RVF for form validation.

There are other libraries you can use instead, such as remix-forms, conform, etc.

Icons

GAIA includes FontAwesome, a popular icon library that has thousands of React-friendly icons.

There are other libraries you can use instead, such as heroicons, Feather, etc.