// the find
WebDevSimplified/react-folder-structure
A companion repo for a Web Dev Simplified YouTube video showing the same todo/auth app organized three ways: flat beginner structure, page-collocated intermediate, and feature-sliced advanced. It's a teaching artifact, not a library or framework — you clone it, look at it, and move on.
The three-tier progression is the actual value here: you can diff beginner vs advanced and see exactly what changes and why. The advanced structure uses feature slicing (authentication/, todos/, projects/ each owning their own components, hooks, services, and context) which is a defensible pattern for mid-size React apps. Tests are co-located with the code they test in the advanced version, which is the right call. The barrel index.js files on each feature make import paths clean without a path alias.
Last touched June 2022 and still on Create React App, which is unmaintained — anyone following this today would be starting with a dead toolchain instead of Vite or Next. The intermediate structure puts too much in pages/ (context, hooks, and components all mixed in a page folder) which is just a messier version of the beginner approach, not a real middle ground. No TypeScript anywhere, which matters a lot when the whole point is demonstrating scalable project structure. The 'advanced' pattern also lacks a clear data-fetching story — services/ is just thin fetch wrappers with no caching, loading state, or error boundary integration.