This Folder Structure Makes Me 100% More Productive

Getting the right folder structure is a difficult task that can take years to master, but it doesn’t have to take years for you. In this video I will show you everything I have learned about creating a good folder structure for any application that is easy to maintain, refactor, and work in.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
01:05 - The problem with normal folder structures
05:25 - Real world project example (bad structure)
08:15 - Feature based folder structure explained
12:08 - Real world project example (feature structure)
13:23 - Side by side comparison
15:53 - ESLint configuration
22:32 - Potential downsides

#FolderStructure #WDS #JavaScript

[Dan-StefanMartin]

After 20k lines my codebases started to become harder to manage. Watched this and decided to give it a go since i also wanted to refactor some parts. After 30h of work and 2 days, i am pleased! Ty

[SamuelLclau]

Really helpful when you're facing the exact problem of maintaining a pretty large and complex application .. . And cherry on the cake is that boundary eslint module which I discovered today. Thanks for producing all these excellent videos !

[tdotgg]

I know my original folder structure video was awful but this was the key point I wanted to make. Grouping should always be by feature, NOT by technology.

“Separation of concerns” was a lie

[foldisnomistake]

Guys, take a look into FSD methodology (Feature Sliced Design). It uses pretty much the same approaches. Tried to build several project using it, and really loved it.

[engelshernandez]

I'm just about to start a large complex project. Now I'm not worried about the folder structure. This is pure gold 💪

[LewisCowles]

Since nobody is commenting on your absolute boss-level excalidraw diagrams I will. This came up in my feed and I just came for the diagrams. Organise your code however makes sense for the folks that work on the code. This looks fine, but the real win here is in Excalidraw presenting information.

[typingaway]

See on Feature Sliced Design (FSD). It’s a architecture methodology which based on feature based approach (showed in the video), clean architecture (layers for abstractions) and contains a lot of good arch practices (disallow cross imports between modules, public api and so on). Also you can use linter Steiger instead of eslint, which more effective

[sense]

Hi Kyle, As a beginner and struggling to organize my files since English is my second language where it takes time to think a name of a file or folder, this is a really HUGE help for us

[ericmisha]

You've just described is how Angular has been doing this for years. A textbook example of structuring medium and large-sized Angular applications that scale well. This is the proper way to do it.

[ninoJAckwwe]

ُThank you so much Kyle, BTY you're the only youtuber that I watch his video with the normal playback speed :)

[Vigiflyer]

I'd be interested in seeing a NUXT implementation of this. Great Video. Thank you for taking the time to produce it

[gauravkumawat]

Exactly what I wanted to begin my Lead Management System Project ❤
Thnks Kyle....🎉🎉

[DigitalAlchemyst]

Okay This video has been living rent free in my mind since it dropped. I think I am going to refactor my work project this way and see how I like it. I am pretty much done with coding the project so if I don't like it I wont have to deal much with it anymore will come back later on and give my feedback on the structure.

[RonNorthcutt]

This reminds me alot of OOP patterns where the features are *conceptually* similar to objects. Putting all of the required code for each feature makes total sense, and it is a great way to organize it. This is actually how I like to think about code organization. As you point out, this makes it much easier to FIND things later - if it is related to users and not global, then look in users (or add it there).

The other benefit is that this makes the code much more modular in design, which reduces the chances of spaghetti code. If all of your user code is encapsulated in this way, then it is harder to end up with cross-feature dependencies... because if you need it cross feature, then it should be global.

[jerryknows]

Actually, I do almost exactly the same in my projects and even wrote a Medium article about it. But I didn't know this ESLint plugin to enforce this rules in my team. Thank you for sharing.

[SSan-nq]

TIL about the eslint boundary plugin, will implement this way of folder structure going forward. tysm for the amazing videos and diagrams Kyle :)

[antidegenerates]

Cody and Kyle are the best web dev tutors on yt

[megaclinton]

developing can get really complicated with just one change... thanks for simplifying it!

[peeratchaikleebbua]

This is brilliant. I always struggle on how to make whole team follow the rule of our planned folder structure. Eslint boundaries is very useful. Thanks alot. You deserve more than this.

If it is possible, I would love to see how you organize and manage role based or attribute based access control along with the feature style folder structure as well

[cliffordwilliam]

Thank you for this, this improves scalability for my projects. Both web app and game dev