Project Standards

File/Directory Structures

The file/directory structures we show below are best for SPA (Single Page Applications). You can adopt some ideas for your Next.js or Remix projects - but both frameworks adopt a specific method of organizing your files (App Router for Next.js, Nested Routing for Remix)

This directory structure is based on the bulletproof-react repo - it is an absolute goldmine for good practices and architecture of large/enterprise React application.

To avoid falling victim to analysis paralysis in this area: don't spend more than 5 minutes trying to plan a folder structure that will meet all of your future project needs. It's usually better to simply organize as you go. If you don't know what to do yet - just keep everything in the same flat folder (src). Once you get 10+ files in there that each has its own concern, you'll start to see the patterns that should dictate your folder structure.

Component Files

Deep Dive | Writing Functional Components

Linting and Formatting

Eslint and Prettier can also be very effective at enforcing project standards and consistency. Start with the examples provided in the bulletproof-react repo:

At a minimum, you should always have an eslint configuration in your project, but running both (eslint is more for catching code smells and potential bugs, and prettier is for opinionated formatting) is recommended.

Maintaining Documentation

Getting engineers to properly document their code can sometimes be difficult (and slow down team productivity!)

The question typically isn't "how can we convince our team and stakeholders that well-written documentation is worth it". The right question to ask is "how can we make writing and maintaining documentation easier for our developers". Everyone knows great docs are worth their weight in gold. The hard part is writing great docs.