Web Application Development
Folder Structure for Modern
Web Applications
It is critical to create a maintainable folder
structure while developing web apps, having the
right files in the correct folder helps organize
your code and makes other developers have an
idea of how the architecture of your web
application is or will be during development.
Maintaining a well-organized folder structure is
crucial when developing web applications, even
though it may not be the first thing that comes
to mind when working alone or with few
resources.
11/19/2025 Web Application Development 2
Some Tips In Designing Your
Folder Structure
• Understand the purpose of your web project: In
order to figure out how to organize your web
project, you will need to establish a good
understanding of what you have, depending on
how many assets you are trying to organize and
the features in your web applications.
• Use proper naming convention for your folders
and files, they should be descriptive of the
purpose in your web application.
11/19/2025 Web Application Development 3
Folder Structures and their
explanation
Assets
The assets folder contains all images, icons, css
files, font files, etc. that will be used in your web
application. Custom images, icons, paid fonts are
being placed inside this folder.
11/19/2025 Web Application Development 4
Context
When using React Js as your preferred frontend
ui library, the context folder stores all your react
context files that are used across components
and multiple pages.
11/19/2025 Web Application Development 5
Components
The components folder holds the UI for your
application. It contains all our UI components like
navbar, footer, buttons, modals, cards, etc.
11/19/2025 Web Application Development 6
Composables
In the context of Vue applications, a
"composable" is a function that leverages Vue's
Composition API to encapsulate and reuse
stateful logic.
Data
The data folder is used for storing text data
which will be used in different sections and
pages as JSON files. Doing this will enable
updating of information easier.
11/19/2025 Web Application Development 7
11/19/2025 Web Application Development 8
Features
This folder contains individual folder feature for
each page (authentication, theme, modals). For
example each page might have a modal feature.
11/19/2025 Web Application Development 9
Hooks
Hooks are functions that let you “hook into”
React state and lifecycle features from function
components. Also we can create custom hooks
whose name starts with 'use' and can be used to
call other hooks.
11/19/2025 Web Application Development 10
Layouts
When defining the general look and feel of the
web page, the Layouts folder comes in handy. It
is used to place layout-based components such
as the sidebar, navbar, and footer. If your web
application has many layouts, this folder is a
fantastic place to save them.
11/19/2025 Web Application Development 11
Modules
Modules folder handles specific tasks in your
application.
11/19/2025 Web Application Development 12
Pages
The pages directory contains your web
application views. Pages directory in frontend
frameworks like Next Js and Nuxt Js reads all files
inside the directory and automatically creates
the router configuration for you.
Public
The public directory is directly served at the
server root and contains public files that won't
change e.g [Link].
Routes
The routes folder is just a place in your web
11/19/2025 Web Application Development 13
application to store the routes path to different
Utility/Utils
This folder is for storing all utility functions, such
as auth, theme, handleApiError, etc.
Views
Views folder are like the pages folder, The views
are used to represent your pages properly, that
users can navigate back and forth.
[Link]
file serves as the entry point of your
application, enabling Vue initialization and
configuration of plugins or additional libraries.
11/19/2025 Web Application Development 14
[Link]/[Link]
file represents the root component of your
application, acting as a container for other
components and serving as the main template.
11/19/2025 Web Application Development 15
Config
Application configuration files.
features
Contains all the application features. We want to
keep most of the application code inside here
Layouts
Different layouts for the pages.
11/19/2025 Web Application Development 16
lib
Configurations for different third-party libraries
that are used in our application.
Pages
The pages of our application.
Services
Shared application services and providers.
Stores
Global state stores.
test
Test-related mocks, helpers, utilities, and
configurations.
types
11/19/2025 Web Application Development 17
Shared TypeScript type definitions.
Utils
Shared utility functions.
11/19/2025 Web Application Development 18
File Structure
Is there a recommended way to structure
React projects?
React doesn’t have opinions on how you put files
into folders. A few common approaches popular in
the ecosystem that may be considered.
Grouping by features or routes
Grouping by file type
One common way to structure projects is to
locate CSS, JS, and tests together inside folders
grouped by feature or route.
11/19/2025 Web Application Development 19
Grouping by features or routes
One common way to structure projects is to
locate CSS, JS, and tests together inside folders
grouped by feature or route.
11/19/2025 Web Application Development 20
Grouping by file type
Another popular way to structure projects is to
group similar files together, for example:
11/19/2025 Web Application Development 21
Avoid too much nesting
There are many pain points associated with deep
directory nesting in JavaScript projects. It becomes
harder to write relative imports between them, or
to update those imports when the files are moved.
Unless you have a very compelling reason to use a
deep folder structure, consider limiting yourself to
a maximum of three or four nested folders within a
single project.
it is a good idea to keep files that often change
together close to each other. This principle is called
“colocation”.
11/19/2025 Web Application Development 22
Conclusion
A good folder structure allows you and other
developers to find files faster and manage them
more easily. A well-organized folder structure
makes you appear professional.
11/19/2025 Web Application Development 23
References
[Link]
pplications-4d11
[Link]
ucture-that-makes-sense-ecc0b690968b
[Link]
11/19/2025 Web Application Development 24