Folder Structure


When you open your project in your favourite code editor ( Let's say VSCode ), the might see that the folder structure looks something like this:

⚠️
You might notice that certain folders or files, such as .vscode, may or may not be present in your project.
.docker // Used in the context of a Docker setup with NGINX
.husky // Configures pre-commit hook using Husky for Git lifecycle events
.vscode // Configurations for Visual Studio Code editor settings and preferences
apps // We will check it later
capistrano // Automates deployment tasks for web applications
capistrano-pm2 // Automates deployment tasks for web applications
node_modules // Contains dependencies & 3rd party packages installed for a the project
packages // Contains configurations for the console and core package
patches // Provides modifications or fixes for existing code or dependencies
scripts // Contains files that handles operations for services
.dockerignore // Specifies files and directories to exclude during Docker builds
.drone.yml // Defines CI/CD pipeline configuration for the Drone CI tool
.editorconfig // Provides consistent coding styles across different editors and IDEs
.eslintignore // Lists files and directories to exclude from ESLint linting
.eslintrc.json // Configures ESLint rules and settings for code linting
.gitignore // Lists files and directories to exclude from Git
.hygen.js // Configuration file for Hygen, a code generator tool
.prettierignore // Specifies files and directories to exclude from Prettier formatting
.prettierrc.json // Configures Prettier code formatting rules and settings
babel.config.js // Configuration file for Babel, a JavaScript compiler
docker-compose.yml // Defines the services, networks, and volumes for Docker Compose
Dockerfile // Contains instructions for building a Docker image
Dockerfile.staging // Dockerfile variant for staging environment image
lerna.json // Configuration file for Lerna, a tool for managing JavaScript projects with multiple packages
package.json // Manifest file that defines dependencies, scripts, and metadata for the project
pm2.production.config.js // Configuration file for PM2, a process manager for Node.js applications in production
README.md // Documentation file providing an overview and instructions for the project
tsconfig.json // Configuration file for TypeScript, a typed superset of JavaScript
turbo.json // Configuration file for Turbo, a tool for high-performance development workflows
yarn.lock // Lock file generated by Yarn, specifying exact versions of dependencies for reproducible builds

Now, let's examine the folder structure within the apps directory. We will use starter as an example since it serves as the starting point for creating/cloning new projects:

apps // this folder contains multiple projects/workspaces
|------ documentation // a workspace responsible for documentations ( the one you are reading now )
|------ starter // a workspace responsible for Vactory Main project
|------|------ .next // Generated build output folder for Next.js project
|------|------ .runtime // Internal folder for Next.js runtime files
|------|------ .storybook // Configuration files for Storybook, a UI development environment
|------|------ .webpack // Custom Webpack configurations for Next.js project
|------|------ components // Reusable UI components folder
|------|------ context // Folder for managing React context providers
|------|------ hooks // Custom React hooks folder
|------|------ icons // Folder for storing icon assets
|------|------ lib // Utility functions and modules folder
|------|------ pages // Folder containing Next.js page components
|------|------ public // Static assets folder accessible from the browser
|------|------ styles // Folder for global styles and CSS modules
|------|------ themes // Multi-Themes configuration folder
|------|------ .env // Local Environment variables file
|------|------ .env.example // Example file for environment variables
|------|------ middleware.js // Custom middleware configurations for Next.js
|------|------ next.config.js // Custom configuration file for Next.js
|------|------ package.json // Manifest file defining project dependencies and scripts
|------|------ postcss.config.js // Configuration file for PostCSS, a CSS preprocessor
|------|------ project.redirects.csv // CSV file for managing redirects in the project
|------|------ project.redirects.js // JavaScript file for managing redirects in the project
|------|------ tailwind.config.js // Configuration file for Tailwind CSS, a utility-first CSS framework
|------|------ tsconfig.json // TypeScript configuration file for Next.js project