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.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay