This structure should work well for small and medium size web applications or more document-focused websites. It provides a balance between co-location of component files and separation of components by function.
A 'layered' approach can be used when starting a build using this structure, starting with base styling, a few reusable components and some of your favourite utilities then building each space up.
The aim of this structure is to keep it obvious as to where things go, be able to define areas of ownership and importance and to keep things out of your way when working in a space. This structure scales well to many hundreds of components and works well with a single team workig on a frontend project.
In general, everything should be viewed as some type of encapsulated and independent component.
/app/src/base- Global styling and the initial 'layer' included across the entire application./app/src/components- Reusable components, these could be React, CSS or other types of components./app/src/components/[Component]/- An individual component, has a single well defined purpose./app/src/spaces- Spaces represent unique parts of a project, they can be single pages or an area. Spaces can overlap, be nested and include reusable components unique to that space./app/src/spaces/[Space]- A single space may consist of a container component, multiple presentational components and even some components which are reused within the space./app/src/state- Global state management (Redux or MobX files would go here). Subfolders could have very different structures beneath here depending on the state management style.
- Spaces: Straightforward pages can be spaces (e.g homepage, listing page), an 'area' of a project could be a space (e.g blog section, user dashboard). As an application grows and components need to be shared across spaces they can be moved to /components and made more generic and reusable.
- Components: Button, Header, Footer, Modal, SearchBox, FormTextInput, Carousel
/app/src/utilities- General purpose utilities used globally, often CSS classes like '.u-clearfix' (optional). Utilities could also be stored in a utilities.css file in /base.- Styleguide - A styleguide can be generated using the base styling and reusable components with some additional boilerplate to demonstrate how styling looks and any other guidelines needed.