--- title: A Front-End Application Folder Structure that Makes Sense description: The goal is to apply some kind of modularisation that will make the codebase easier to understand by setting boundaries between features and minimizing code... canonical: https://daily.dev/posts/a-front-end-application-folder-structure-that-makes-sense-x72onqaat twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: A Front-End Application Folder Structure that Makes Sense | daily.dev og:description: The goal is to apply some kind of modularisation that will make the codebase easier to understand by setting boundaries between features and minimizing code... og:url: https://daily.dev/posts/a-front-end-application-folder-structure-that-makes-sense-x72onqaat og:image: https://api.daily.dev/og/posts/X72onQAAT.png og:image:alt: A Front-End Application Folder Structure that Makes Sense og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # A Front-End Application Folder Structure that Makes Sense **[Medium](https://daily.dev/sources/medium_js)** · [@fadamakis](https://daily.dev/fadamakis) · 5 min read · 331 upvotes · 20 comments ## Summary The goal is to apply some kind of modularisation that will make the codebase easier to understand by setting boundaries between features and minimizing code coupling and side effects. By default when scaffolding a new project using one of the popular front-end frameworks the component structure is flat and follows no hierarchy whatsoever. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@anylmumbran** · 5 upvotes > Feature-oriented architecture is a game-changer for complex projects, simplifying development and boosting scalability. Highly recommended! **@kokwei325** · 4 upvotes > really helpful advice especially for someone who is still junior like me. **@kruzt** · 3 upvotes > Nice thx for this!! If, lets say my codebase is of legacy redux, could i use a own api folder for fetching instead of actions folder or does this goes for the same? :) **@ittiddev** · 3 upvotes > helpfull article merci, > do u have a yrl for a good vue.js 3 tutorial ( free or $£ ) **@lcrojano** · 1 upvotes > good insights, it helps to understand the basic idea. ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#vuejs](https://daily.dev/tags/vuejs), [#frontend](https://daily.dev/tags/frontend) [View this post on daily.dev](https://daily.dev/posts/a-front-end-application-folder-structure-that-makes-sense-x72onqaat) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"A Front-End Application Folder Structure that Makes Sense","url":"https://daily.dev/posts/a-front-end-application-folder-structure-that-makes-sense-x72onqaat","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/a-front-end-application-folder-structure-that-makes-sense-x72onqaat"},"datePublished":"2023-08-03T09:32:19.411Z","dateModified":"2023-08-04T06:00:06.086Z","description":"The goal is to apply some kind of modularisation that will make the codebase easier to understand by setting boundaries between features and minimizing code...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/487c8a8e0e52033d9e22dc0a395d7525?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/487c8a8e0e52033d9e22dc0a395d7525?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"Medium","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Fotis","url":"https://daily.dev/fadamakis","image":"https://media.daily.dev/image/upload/s--KOPPk6Si--/f_auto,q_auto/v1/avatars/avatar_EsUYS1j4youWBm81ZEe4G","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":980}},"commentCount":20,"discussionUrl":"https://daily.dev/posts/a-front-end-application-folder-structure-that-makes-sense-x72onqaat","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":331},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":20}],"keywords":"javascript,vuejs,frontend","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Medium","item":"https://daily.dev/sources/medium_js"},{"@type":"ListItem","position":3,"name":"A Front-End Application Folder Structure that Makes Sense"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/a-front-end-application-folder-structure-that-makes-sense-x72onqaat","comment":[{"@type":"Comment","text":"Feature-oriented architecture is a game-changer for complex projects, simplifying development and boosting scalability. Highly recommended!","datePublished":"2023-09-14T16:09:01.209Z","url":"https://daily.dev/posts/X72onQAAT#c-WCzo5Fzto","author":{"@type":"Person","name":"Anyl Mumbran","url":"https://daily.dev/anylmumbran","image":"https://media.daily.dev/image/upload/s--O0TOmw4y--/f_auto/v1715772965/public/noProfile"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"really helpful advice especially for someone who is still junior like me.","datePublished":"2023-09-07T12:57:02.015Z","url":"https://daily.dev/posts/X72onQAAT#c-hrisaJhBo","author":{"@type":"Person","name":"Lai Kok Wui","url":"https://daily.dev/kokwei325","image":"https://media.daily.dev/image/upload/s--d8rIIWaU--/f_auto/v1746762979/avatars/avatar_NAaXjoTzeUS4NLOyQ1aSA?_a=BAMClqUq0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"Nice thx for this!! If, lets say my codebase is of legacy redux, could i use a own api folder for fetching instead of actions folder or does this goes for the same? :)","datePublished":"2023-08-31T06:41:30.507Z","url":"https://daily.dev/posts/X72onQAAT#c-XMpANm74s","author":{"@type":"Person","name":"Stian ih","url":"https://daily.dev/kruzt","image":"https://avatars.githubusercontent.com/u/66445281?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"helpfull article merci,\ndo u have a yrl for a good vue.js 3 tutorial ( free or $£ )","datePublished":"2023-08-04T08:53:36.111Z","url":"https://daily.dev/posts/X72onQAAT#c-yhtZLZmjT","author":{"@type":"Person","name":"ittid","url":"https://daily.dev/ittiddev","image":"https://avatars.githubusercontent.com/u/44928080?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"good insights, it helps to understand the basic idea.","datePublished":"2023-08-28T18:50:22.416Z","url":"https://daily.dev/posts/X72onQAAT#c-h45O4YXu0","author":{"@type":"Person","name":"luis carlos rojano","url":"https://daily.dev/lcrojano","image":"https://media.daily.dev/image/upload/s--5AUFOyfC--/f_auto,q_auto/v1/avatars/avatar_M6CnhzFVJiNHFeaQjV882"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```