How Do You Organize Your Frontend Project Folders in 2025?
Asked by
CuriousCoder92
I'm really interested in seeing how everyone is structuring their frontend project folders in 2025, whether you're using React, Next.js, Vite, Svelte, Vue, or something else. Could you share your `src/` folder structure? It would be great if you could also explain a few reasons behind your choices, like if you're going for a domain-driven structure, colocation of tests, or specific naming conventions. Here's how I've structured mine with Next.js:
src
├── analytics # for event tracking and metrics
├── api # handles API integrations both for my own backends and external services
├── app # where my Next.js pages live
├── assets # holds static files like styles, images, fonts, and icons
├── auth # all authentication logic can be found here
├── components # basic UI components that make up my UI kit
├── i18n # for internalization purposes
├── utils # generic helper functions and hooks
└── widgets # specific UI building blocks for the project
I designed my structure this way because it helps with easy navigation (having big features upfront like auth and analytics), separates reusable code, and establishes a clear hierarchy from components to pages. I also used a command to print this tree: `npx tree-node-cli ./src -L 1 -d`. Would love to see your setups!
Answers
Just wanted to point out that I keep my assets directory outside of `src/`, and actually restrict access to the whole `src` directory. It's probably not the best setup, but it works for me.
Reply to this answer
I like your structure! I’ve been using something similar, but I don't have an analytics folder—my tracking code is usually embedded directly. I do maintain a `routes` folder for components that map to URLs in my app. And I'm curious about what you consider `widgets`—to me, they seem like they'd fit under `components`.
Reply to this answer
I've recently adopted the Feature-Sliced Design for organizing my folders. It really helps with project scalability! You can check out the specifics here: https://feature-sliced.github.io/documentation/docs/get-started/overview.
Reply to this answer
Here's my setup:
src
├── api # files for fetching content from REST/BBD
├── assets # for static files
├── components # reusable components like SearchBar, ShareButton, etc.
├── composables # holds reusable Vue bits
├── routes # all route definitions
├── stores # state management here
├── utilities # utility functions
└── views # view templates that act as pages
It's a pretty standard organization for Vue projects. Just keeps things clean!
VueRookie24: What's inside the `composables` folder?
Reply to this answer
Add your answer
Answers are reviewed before publication.
FrontendFanatic88: We separate widgets to indicate they are higher-level components made up of multiple simpler components, while the components serve as reusable UI elements like buttons or forms.