DEV Community

Ansh Saini
Ansh Saini

Posted on

1

Finally, a scalable folder structure for your frontend code

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)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series