Creating New Features

When creating a new feature inside /app/features there is a script that can be run to scaffold the commonly required folders.

# inside the root project directory

yarn scaffold-feature <FEATURE_NAME>

This will generate a new directory inside of app/features with the supplied name, as well as key directories such as components, screens, hooks etc. It will also create folders for tests, initial empty barrel files, and a readme at the root of the folder.

Teams are free to add, modify and remove files and folders as the feature demands, but the goal should be to keep conventions consistent with the rest of the codebase. As files are added, barrel files should be updated as well as the feature entry point.

Barrel files are only necessary when exposing modules from within a feature to be consumed by other parts of the app. When creating creating components, functions etc for use only within the feature there's no need to add them to the feature barrel file, and they can just be imported via relative imports.

// in app/features/group-mode/components/GroupModeHeader.tsx
// this component is only used by the GroupModeHomeScreen component
export const GroupModeHeader = () => { ... }

// in app/features/group-mode/screens/GroupModeHomeScreen.tsx
import { GroupModeHeader } from '../components/GroupModeHeader';

export const GroupModeHomeScreen = () => {}

// in app/features/group-mode/index.ts
export * from 'screens/GroupModeHomeScreen' // this screen is used outside the feature folder so is added to the feature barrel file

In the above example, the GroupModeHeader file is only used inside the group-mode feature, so doesn't need to be in the barrel file used outside the feature.

The readme at the root of the feature is there as a launch pad for anyone new to that feature, and is a great chance to document file structure, design decisions, any feature quirks etc. That same readme will also be used in this wiki section, as another page under App Features in the sidebar.