Intro to Gene 🧬

Gene is an opinionated React framework designed to bridge the gap between develpmpent speed project maintainability and scalability.

It highly leverages the power of code generations and automation. It is built on top of Nx (opens in a new tab) and Nx Workspace Generators (opens in a new tab).

Mental Model

Gene's mental model and architecture on the highest level is the following:

• An app is built up of one or many modules.
• A module consists of components, that are (usually) imported from ui-libraries.
  • One module can use as many ui-libraries as many it requires.
  • Modules can have their own components too if they are not shared and are 100% module specific.

Gene Modules are standalone pieces of UI elements, they have no dependency between each other. Though, they can communicate with each other, but more on that later.

Important to mention: gene modules are framework agnostic thanks to ✨_Dependency Injection_✨ (that we will talk about in the following chapters), thus they can be used in NextJS or pure React or any other react framework if we wanted to do so.

Let's see a "live" example!

Through this example we will try to show how does a React application import modules and builds itself up.

We have our beautiful UI:

If we dissect the application we can see that it is built up of Gene Modules that are built up of Components:

Please notice that the background colors of the comments on the UI diagram correspond with the blocks on our first diagram with the high level architecture

On the diagram we mentioned NextJS but it can really be any React framework, although currently we base our applications exclusively on NextJS.

Get Started

npm init @brainly-gene acme

cd acme

code .

pnpm nx g @brainly-gene/tools:nextjs-app --name my-first-app --directory web --no-interactive 

pnpm nx serve web-my-first-app

See cheatsheet for more commands and tips.