Victor Li

What I learned from building 7GUIs

7GUIs is a collection of 7 frontend programming tasks comparing different implementations in other languages or frameworks. Similar to the todomvc.

The project source code is available on Github.

I wanted to build these 7 tasks using Redux as the data (state management) layer utilized for the view layer in React/React Native. This was inspired by this blog post on UI as an afterthought.

Leveraging Redux Toolkit

Redux Toolkit is the new standard and modern way to use redux. It eliminates the “boilerplate” from hand-written Redux logic, prevent common mistakes, and provide APIs that simplify standard Redux tasks.

I learned to Structure Nested/Relational State, using byId and allIds.

byId and allIds type definitions

Usage Highlights:

Building with Headless UI Libraries

Headless UI libraries are collections of unstyled, accessible, and reusable components that provide core functionality without enforcing a specific design or style. They are also built with accessibility in mind.

I used Radix and React Aria for this project.

For further reading, check out this insightful post: Headless, Boneless, and Skinless UI.

Testing with Vitest

Vitest is a modern testing framework similar to Jest, and works in combination with Vite and Testing Library. It supports workspaces making it ideal for testing in monorepo setups.

One limitation to note is that Vitest does not support React Native.

Monorepo setup with pnpm

To manage the project structure, I used pnpm to set up a monorepo. The project is divided into four main packages:

  1. apps/web: Web version in React
  2. apps/mobile: Mobile version in Expo React Native
  3. packages/state: Shared state built with Redux
  4. packages/tsconfig: Shared typescript tsconfig that is extended in the other packages

Subpath Exports in packages/state

To simplify imports, I added subpath exports in packages/state. For instance:

For example:

import { increment, selectCount } from '@7gui/state/counterSlice'

Resources I used to learn about monorepo setup:

Setting up React Native with Expo in a pnpm monorepo

Intergrating React Native Expo in a pnpm monorepo requires a few workarounds

To enable importing subpaths, set unstable_enablePackageExports to true in the metro config. Example

Additional resources: