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
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
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)