DEV Community

Ansh Saini
Ansh Saini

Posted on

Finally, a scalable folder structure for your frontend code

#webdev #javascript #beginners #react

Problem with "pages"

Well, its simple. Not all features are pages. Then you end up developing features in your re-usable components folder.

Solution

A folder-based structure which aims to keep a feature and its dependencies together. I'll be referring to this structure as The Base in the rest of this post.

FolderName ├── index.tsx // Entry point ├── FolderName.module.css // Styles ├── components // Components that are specific to this feature │ ├── ComponentName │ │ ├── index.tsx │ │ └── ComponentName.module.css │ └── AnotherComponentName │ ├── index.tsx │ └── AnotherComponentName.module.css ├── hooks // Hooks that are specific to this feature │ ├── useHookName.ts │ └── useAnotherHookName.ts ├── utils // Utils that are specific to this feature │ ├── utilName.ts │ └── anotherUtilName.ts └── assets // Assets that are specific to this feature └── someImage.png
Enter fullscreen mode Exit fullscreen mode

The beauty of this structure is that if you don't need something, just don't create the folder for it.

Here's an example of a react app

src ├── components // Generic re-usable components │ ├── ui │ │ ├── Button │ │ │ ├── index.tsx │ │ │ └── Button.module.css │ │ └── TextField │ │ ├── index.tsx │ │ └── TextField.module.css │ └── Navigation │ ├── Link │ │ ├── index.tsx │ │ └── Link.module.css │ ├── BottomNavigation │ │ ├── index.tsx │ │ └── BottomNavigation.module.css │ ├── TopNavigation │ │ └── index.tsx │ └── hooks │ └── useExcludeShadow.ts ├── features │ └── Notifications │ ├── index.tsx │ ├── Notifications.module.css │ ├── components │ │ ├── NotificationRowCard │ │ │ └── index.tsx │ │ ├── NotificationsList │ │ │ ├── index.tsx │ │ │ └── NotificationsList.module.css │ │ └── NotificationsPopup │ │ └── index.tsx │ └── hooks │ ├── useNotificationAction.ts │ ├── useNotifications.ts │ └── index.tsx ├── api │ ├── axios.ts │ └── resources │ ├── auth │ │ ├── index.ts │ │ └── types.ts │ ├── notifications │ │ ├── index.ts │ │ └── types.ts │ ├── payment │ │ ├── index.ts │ │ └── types.ts │ └── settings │ ├── index.ts │ └── types.ts ├── assets │ ├── lotties │ │ └── confetti.json │ ├── icons │ ├── placeholders │ │ └── user-avatar-placeholder.svg │ ├── fonts │ │ ├── Inter.ttf │ │ └── Switzer.ttf │ ├── logos │ │ ├── logo-primary.svg │ │ ├── logo-stacked.svg │ │ └── logo-alternate.svg │ └── icons │ ├── apple-icon.svg │ ├── facebook-icon.svg │ ├── google-icon.svg │ ├── linkedin-icon.svg │ ├── refresh-icon.svg │ ├── telegram-icon.svg │ └── whatsapp-icon.svg ├── global │ ├── AppContext │ │ ├── context.ts │ │ └── index.tsx │ ├── FeatureToggles │ │ ├── useFeatureToggle.ts │ │ └── index.tsx │ └── UserPreferences │ ├── useUserPreferences.ts │ └── index.tsx ├── utils │ ├── routes.ts │ ├── formatDate.ts │ └── hooks │ ├── useArray.ts │ └── useDeviceOrientation.ts └── tracking ├── googleAnalytics.ts ├── firebaseTracking.ts └── useTracking.ts
Enter fullscreen mode Exit fullscreen mode

This structure has been working and scaling well for us for over 3 years.
Let me know if you guys want a detailed explanation about the api setup. Maybe I'll convert this post into a series of chapters.

Top comments (0)