A maintainable front-end project structure

Update (9/13/2016): Test files are now flattened/co-located next to what they’re testing to reduce confusion.

There’s a herd wisdom that emerged in the past few years to group your code by semantic type, e.g. reducers, views, actions, etc.

Don’t do that.

Here’s the thing, the further away your bits of code get from each other, the harder it is to untangle functionality, make substitutions, and outright rip out old components. It makes much more sense to group your code thematically.

Often, this takes the form of your application routes: e.g. home, search, settings. The benefit to this system of organization is 90–100% of all the code you need for a view is all in one place — no more hunting and pecking for a particular reducer or an errant style. Here’s an example:

The generator-enigma yeoman scaffolder will get you most of the way there for new projects. Thanks for reading!