How To Structure Files in Your Projects?

One of the most important things you'd face as a developer while starting a new project is how to move files around in your projects. In this video, let's discuss how to structure and organize your file system for your projects!

Drop a comment and let us know if you've watched the video till the end!

Timestamps
0:00 Teaser
0:31 Video Starts
1:18 1. Hierarchy
2:40 2. Placing the files together
4:31 3. Create names that make sense
5:25 Conclusion
6:03 Outro

👉 Checkout codedamn on social:

If you found the video valuable, please leave a like and subscribe ❤️ It helps the channel grow and helps me pumping out more such content.

✨ Video Tags ✨
Here's How To Structure Files For Your Projects | Organize File System For Your Projects

✨ Hashtags ✨
#projects #filesystem #file #2022

[parthokr]

It's rare to find videos on project architecture, design pattern, best practices. Thank you.

[codedamn]

One of the most important things you'd face as a developer while starting a new project is how to move files around in your projects. In this video, let's discuss how to structure and organize your file system for your projects!

Drop a comment and let us know if you've watched the video till the end!

[oumardicko]

I watched till the end and thanks. I'm gonna do some refactoring...this was what i needed

[surajshende]

I was searching for the same and got this video. Thanks 💚

[kundumehul]

To be honest you're actually targetting the appropriate concepts that none talks about.

[benyamynbrkyc]

Codedamn coming through with the bangers as usual

[lathavoggu]

Most reasonable concepts which a developer needs other than coding. I watched this video till the end.

[avaplain]

when i only used React, my folder structure looked like this:
src
- assets (you can put this also in public folder)
- components
- componentFolder
- Component.js
- Component.styled.js
- hooks (for custom hooks)
- pages (main pages for app)
- redux (redux config + reducers + ...)
- services (api)
- utils (helper functions)
- App.js (Routing + structure)

also if i have a Component in another Component and not somewhere else i put this component in the Component Folder of the Parent Component. like:

- components
- parent
- Parent.js
- Parent.styled.js
- child
- Child.js
- Child.styled.js

if i use a Component only on one page im also adding the page before the Components:
- componenets
- login
- LoginOnlyComponent.js
- search
- SearchOnlyComponent.js
- page
- login
- search

two options when you have global Components for multiple Pages
- create global folder in ./components
- global (global Components for every Page)
- componentFolder

- list all global components in ./components
- components
- componentFolderX (list all Components)

In NextJS im using a similar folder structure

[windwardhive]

I watched this video till the end. Are you gonna reward us with free codedamn membership?

[rajeev]

I'm not even kidding you read my mind, I was thinking of posting a request on discord about how to structure files and folders in projects, specefically i wish to know about how did you layout the codedmn's repo what was your thought process while you were naming folders and files and their placements. But this video works too. Thanks. And i watched this video till the end!

[nithinbhandari]

Very nice video.

Video Suggestion: Database table name and column name naming strategy

[rayzhang]

File name should be descriptive. Don't worry about long name. 100% agree

[Berlm]

I always search for videos like these. They usually show the structure but dont explain it well, and even thought I understand it, I always want to ser alternative methods as well to compare them.

This is really well done, thanks so much!

[maharun]

I was just looking for exactly this type of video. No body really talks about it much..

[tdiblik]

Hi, this video looks nice, however, I feel like it specifically applies to frontend, are there any plans to address this for backend as well?
TLDR; As a backend dev, this video was not really useful to me. Are there any plans to make some video about file structures for backend?

[eugenetroinov]

Good video, but I think the approach would be more universal if we change from:
- Login
-- Login.tsx
-- Login.module.css

To:
- Login
-- Component.tsx
-- styles.module.css

Because in the first case, if we make a mistake in the name and then want to fix it (after the commit), we will need to rename all the files in the folder, in the second case, only the folder will need to be renamed.

[omparikh]

what about structure for backend / node ?

[hiruthicsha]

Yo, why does your video only has ad for guvi website?

[HassanHassan-chml]

Tell us about backend I watch till the emd

[JohnSnow-giiv]

You can make a video on the latest updates in react native tomorrow 🙂