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. In this post, I am going to explain some folder names when building your modern web project.

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. If not, you run the risk of coming across as unprofessional.

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.

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.

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.

Components
The components folder holds the UI for your application. It contains all our UI components like navbar, footer, buttons, modals, cards, etc.

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.

Features
This folder contains individual folder feature for each page (authentication, theme, modals). For example each page might have a modal feature.

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.

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.

Modules
Modules folder handles specific tasks in your application.

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 favicon.ico.

Routes
The routes folder is just a place in your web application to store the routes path to different screens.

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.

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.