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!
4 Answers
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!
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.
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`.
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.
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.
What's inside the `composables` folder?